React Native - 运行并行 Axios / 获取请求答案

【问题标题】：React Native - Running Parallel Axios / fetch requestReact Native - 运行并行 Axios / 获取请求
【发布时间】：2021-08-04 03:45:40
【问题描述】：

背景：

我有一个必须同时调用多个 API（但在不同屏幕上）的 React Native 项目。这是简化的代码。

callAPI(method, address, data, callback) {
    console.log("Calling... ", address)

    axios({
      method: method,
      url: address,
      headers: {
        Accept: "text/html",
        "Content-Type": "multipart/form-data"
      },
      data: data
    })
      .then(resp => {
        console.log("Done... ", address)  

        callback(resp.data)
      })
      .catch(err => {
        callback({
          statusCode: 500,
          errCode: "axios error",
          errmsg: err.message
        })
      })
}


this.callAPI('GET', firstURL, null, callback) // Say, this takes 10 seconds to finish
this.callAPI('GET', secondURL, null, callback) // This takes 1 second

理想情况下，无论 firstURL API 是否完成，secondURL API 都应该返回结果。然而，这种情况并非如此。它将等待 firstURL API 完成，然后返回 secondURL 的结果。

我尝试使用 Axios 或 fetch，但它们都在等待另一个 API 调用完成。

我很困惑，因为我认为 Axios 和 fetch 都是基于 Promise 的？

问题：
如何在 React Native 中并行运行两个或多个 API 调用？

注意：
我不能使用 Promise.all，因为我不需要一起调用这些 API。

更新：

我还发现如果 API 的基本 url 不同，它将按预期工作。 （例如，一个是https://www.test.com，另一个是https://test.com）
我很确定这是 React Native 的问题，如果我在 jsfiddle.net 上尝试相同的代码，它会按预期工作

【问题讨论】：

如果你一个接一个地调用它们，并且你没有等待任何东西，它们应该并行运行。如果不是这样，您必须共享更多代码。
@Evert 我已经用 callAPI 方法更新了我的问题
通常您共享的代码不会相互等待。问题必须与您共享的代码无关。
@Evert 事情是，当我同时调用这两个 API 时， Calling... 行同时执行。但是，Done.. 行将相互等待。我很确定这些都是有问题的代码。我没有在代码上使用 Async Await。
这两个请求是否都会立即显示在您的浏览器网络选项卡中？

标签： react-native axios fetch

【解决方案1】：

正如 Evert 所指出的，这是服务器的问题。服务器正在阻止其他 API 并发执行。

【讨论】：

【解决方案2】：

尝试查看createAsyncThunk 并使用 Redux 处理您的网络请求。这是一个有点复杂的主题，所以我会自己研究 Redux，但通常，策略是调度与您的 callAPI 函数对应的操作，然后将它们的结果存储在您的应用程序状态中。 AsyncThunks 的部分优点在于您可以访问异步调用的生命周期方法（待处理、已完成、已拒绝）。

【讨论】：