在 React Hook 中汇总来自多个 Promise 的结果

Question

我正在尝试从 React 挂钩中的多个承诺中获得组合结果。但是当我使用钩子时，函数 getAll 立即 returns 为空，而不是返回所有 MyTypes.

我的钩子：(api.get returns a Promise<MyType[]>)

function useMyHook() {
  const api = useApiService();

  return {
    getAll,
  };

  function getAll(arr: number[]): MyType[] {
    const results: MyType[] = [];
    for (const u of arr) {
        api.get(u).then((res) => {
          results.push(...res);
        });
    }
    return [...new Set(results)];
  }

}

用法：

function MyComponent() {
 // ...
 const myHook= useMyHook();
 
 const use = () => {
    // ...
    const numbers = [1, 2, 3];
    const myTypes = myHook.getAll(numbers);
    const count = myTypes.length; // this will always be 0
    // ...
  };
}

我怎样才能完成这项工作？我尝试了多个带有 promise 链和 async/await 的版本，但无济于事。

Answer 1

由于 api.get return 是一个承诺，getAll 也需要 return 一个承诺。它不能 return 一个 MyType[]，因为 assemble 该数组需要时间。我会使用 Promise.all 创建一个新的承诺，它将等待各个承诺，然后用一些代码来组合结果。

与async/await:

function async getAll(arr: number[]): Promise<MyType[]> {
  const promises: Promise<MyType[]>[] = [];
  for (const u of arr) {
    promises.push(api.get(u));
  }
  const results = await Promise.all(promises);
  // results is an array of arrays, so we need to flatten it
  return [...new Set(results.flat())];
}

// used like: 
const use = async () => {
  // ...
  const numbers = [1, 2, 3];
  const myTypes = await myHook.getAll(numbers);
  const count = myTypes.length;
  // ...
};

或者，如果您更喜欢使用 .then：

function getAll(arr: number[]): Promise<MyType[]> {
  const promises: Promise<MyType[]>[] = [];
  for (const u of arr) {
    promises.push(api.get(u));
  }
  return Promise.all(promises).then(results => {
    // results is an array of arrays, so we need to flatten it
    return [...new Set(results.flat())];
  });
}

// used like: 
const use = () => {
  // ...
  const numbers = [1, 2, 3];
  myHook.getAll(numbers).then(myTypes => {
    const count = myTypes.length;
    // ...
  });
};

在 React Hook 中汇总来自多个 Promise 的结果

Aggregate results from multiple Promises in React Hook

javascript

reactjs

es6-promise

react-hooks