javascript - 如何同时异步触发多个 API 调用？

Question

基本上，我有一个在 componentDidMount 处调用多个 API 的屏幕，每个 API 都会触发网络请求和回调，如下所示

componentDidMount() {
    new APIManager.fetchBooks(this.handleBooks);
    new APIManager.fetchAuthor(this.handleAuthor);
    new APIManager.fetchShops(this.handleShops);
}

...

handleBooks = (result) => {
  this.setState({ books: result });
}
...

基本上所有fetch方法的工作原理都非常相似，它接受一个参数，该参数是来自组件的回调，伪代码如下

export async function fetchBooks(callback) {
  const result = await callNetworkAPI();

  callback(result);
}

这在 React-native v0.53 上在 Android 和 iOS 上运行良好，但在 iOS 上的 v0.59.10 上不再工作。

现在发生的情况是，fetchBooks、fetchAuthor 和 fetchShops 仍将被触发，但 this.handleBooks >, this.handleAuthor 将不再被触发。就像他们失去了光标一样。

我已经让它工作，所有 API 调用都必须使用 await，如下所示

async componentDidMount() {
  const books = await APIManager.fetchBooks();
  const authors = await APIManager.fetchAuthor();
  const shops = await APIManager.fetchShops();


  this.handleBooks(books);
  this.handleAuthors(authors);
  this.handleShops(shops);
}

当然还有对我的 APIManager 的更新，如下所示:

export async function fetchBooks() {
  const result = await callNetworkAPI();

  return result;
}

它工作正常，但所有 3 个 API 调用不能再异步，因为我让它在继续之前等待上一个 API 调用。我想知道是否有更好的方法来处理我的问题？或者我完全走在正确的轨道上？

Answer 1

您可以使用Promise.all并行等待多个请求:

async componentDidMount() {
  const [books, authors, shops] = await Promise.all([
    APIManager.fetchBooks(),
    APIManager.fetchAuthor(),
    APIManager.fetchShops(),
  ]);

  this.handleBooks(books);
  this.handleAuthors(authors);
  this.handleShops(shops);
}

但是，这会在调用 handleBooks/handleAuthors/handleShops 之前等待所有 3 个请求完成。

如果您希望它们在完成后直接调用其句柄方法，您可以在各个获取调用上使用 .then():

async componentDidMount() {
  await Promise.all([
    APIManager.fetchBooks().then(this.handleBooks),
    APIManager.fetchAuthor().then(this.handleAuthors),
    APIManager.fetchShops().then(this.handleShops),
  ]);
  // All fetch calls are done now
  console.log(this.state);
}

(这是有效的，因为async函数总是返回一个promise)

关于 fetch 调用的问题，您可能会受到此 react-native bug 的影响:
Multiple fetch request starts to not resolve or reject promise
根据github问题页面，它应该被修复在 version 1.2.1 react-native。