Question

我正在尝试在react-native中进行多个并行提取请求。但是我没有得到预期的响应数据。我错误地集成了什么？

async componentDidMount() {
    try {
        let [res1, res2] = await Promise.all([
            fetch(apiUrl1),
            fetch(apiUrl2),
        ]);

        console.warn(res1);
        console.warn(res2);
    }
    catch(err) {
        console.warn(err);
    };
}

这是我得到的怪异反应。

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "4", "offset": 0, "size": 661}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "", "offset": 0, "size": 661}}, "headers": {"map": {"cache-control": "no-store, no-cache, must-revalidate", "cf-cache-status": "DYNAMIC", "cf-ray": "5", "content-type": "application/json; charset=utf-8", "date": "Thu, 09 Jan 2020 12:15:40 GMT", "expect-ct": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"", "expires": "", "pragma": "no-cache", "server": "cloudflare", "set-cookie": "ci_session=; expires=; Max-Age=7200; path=/; HttpOnly"}}, "ok": true, "status": 200, "statusText": undefined, "type": "default", "url": "apiurl"}

Answer 1

如果您的响应来自json，请使用以下代码

<#list 0..<[sequenceA?size, sequenceB?size]?max as i>
  <tr>
  <td>${sequenceA[i]!""}</td>
  <td>${sequenceB[i]!""}</td>
  </tr>
</#list>

Answer 2

Promise.all（）方法返回一个满足以下条件的Promise：通过迭代的所有诺言都已兑现，或者何时履行可迭代不包含任何承诺。它拒绝的原因首先答应拒绝。 -来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

您刚才所做的就是将Promise解析分配给变量，然后进行console.log记录。这不是您想要的。这样的东西应该可以给您想要的结果？

async componentDidMount() {
    try {
        await Promise.all([
            fetch(apiUrl1),
            fetch(apiUrl2),
        ]).then([res1, res2] => {    
            console.warn(res1);
            console.warn(res2); 
        });
    }
    catch(err) {
        console.warn(err);
    };
}

Answer 3

我有点晚了，但向您展示如何仅使用 Promise.all 和 async/await 执行多个请求并等待它们的解决似乎是个好主意。

下面的代码还展示了如何正确处理多个 HTTP 请求的错误。我提到这一点是因为由于 fetch() 的工作方式，当 HTTP 错误发生时，您的代码的 catch 块将不会被执行：

<块引用>

fetch() 承诺仅在遇到网络错误时拒绝（这通常是在存在权限问题或类似问题时）。一种 fetch() promise 不会拒绝 HTTP 错误（404 等）。相反，一个 then() 处理程序必须检查 Response.ok 和/或 Response.status 特性。 – 取自 MDN

(async () => {
  try {
    const urls = [
      "https://api.chucknorris.io/jokes/random",
      "https://api.chucknorris.io/jokes/random",
      "https://api.chucknorris.io/jokes/random",
      "https://api.chucknorris.io/jokes/random",
    ];

    const requests = urls.map((url) => fetch(url));
    const responses = await Promise.all(requests);
    const errors = responses.filter((response) => !response.ok);

    if (errors.length > 0) {
      throw errors.map((response) => Error(response.statusText));
    }

    const json = responses.map((response) => response.json());
    const data = await Promise.all(json);

    data.forEach((datum) => console.log(datum));
  }
  catch (errors) {
    errors.forEach((error) => console.error(error));
  }
})();

为了清楚起见，我还使用 then() 为您保留了一个等效方法：

(() => {
  const urls = [
    "https://api.chucknorris.io/jokes/random",
    "https://api.chucknorris.io/jokes/random",
    "https://api.chucknorris.io/jokes/random",
    "https://api.chucknorris.io/jokes/random",
  ];
  const requests = urls.map((url) => fetch(url));

  Promise.all(requests)
    .then((responses) => {
      const errors = responses.filter((response) => !response.ok);

      if (errors.length > 0) {
        throw errors.map((response) => Error(response.statusText));
      }

      const json = responses.map((response) => response.json());
      return Promise.all(json);
    })
    .then((data) => {
      data.forEach((datum) => console.log(datum));
    })
    .catch((errors) => {
      errors.forEach((error) => console.error(error));
    });
})();

并行解决多个获取请求

3 个答案: