如何在循环中设置数组的值？

Question

我似乎无法弄清楚如何在循环中设置数组的值...

正如您在下面看到的，我从数据库中检索了一些值并循环遍历这些值。

我在这里尝试做的事情可以概括为以下几点：

request_1(pk)
然后从该客户获取所有预订 ID
然后我得到预订列表
遍历所有预订以获取包含产品 ID 的详细信息
request_2
再次遍历 ID 并获取每个产品的详细信息
request_3

然后我尝试存储我得到的那些值，但它不起作用。]

当我在循环内显示推送到数组的内容时，它似乎有效（即我得到了要检索的值）。然而，当在循环之外时，数组完全是空的...

这里是代码，到目前为止：

const request = async (pk) => {
    try {
      let singleDetail = [];
      const firstResponse = await axios.get(
        `http://localhost:8000/${pk}`
      );

      firstResponse.data.map(async (book, idx) => {
        const booking = JSON.stringify(book.id);

        const secondResponse = await axios.get(
          `http://localhost:8000/${booking}`
        );

        Object.keys(secondResponse.data).map(async (single) => {
          let course = JSON.stringify(secondResponse.data[single].courses);

          const thirdResponse = await axios.get(
            `http://localhost:8000/${course}`
          );

          singleDetail.push(
            JSON.stringify({
              booking: booking,
              single: JSON.stringify(secondResponse.data[single]),
              course: JSON.stringify(thirdResponse.data),
            })
          );
        });
      });
      console.log("SINGLEDETAILS " + JSON.stringify(singleDetail));
      return singleDetail; 
    } catch (error) {
      console.log(error);
    }
  };

Answer 1

从这个例子来看，问题似乎是您没有等待来自地图的异步函数。

无需等待 firstResponse.data.map(async (book, idx) => {...}) 的结果，JS 将跳过等待 promise 的 resolve，从而直接跳转到 return singleDetail;

通过使用 await Promise.all(...)，你告诉 JS 在继续之前等待数组中的所有承诺都成功。

尝试：

const request = async (pk) => {
    try {
      let singleDetail = [];
      const firstResponse = await axios.get(
        `http://localhost:8000/${pk}`
      );

      await Promise.all(firstResponse.data.map(async (book, idx) => {
        const booking = JSON.stringify(book.id);

        const secondResponse = await axios.get(
          `http://localhost:8000/${booking}`
        );

        await Promise.all(Object.keys(secondResponse.data).map(async (single) => {
          let course = JSON.stringify(secondResponse.data[single].courses);

          const thirdResponse = await axios.get(
            `http://localhost:8000/${course}`
          );

          singleDetail.push(
            JSON.stringify({
              booking: booking,
              single: JSON.stringify(secondResponse.data[single]),
              course: JSON.stringify(thirdResponse.data),
            })
          );
        }));
      }));
      console.log("SINGLEDETAILS " + JSON.stringify(singleDetail));
      return singleDetail; 
    } catch (error) {
      console.log(error);
    }
  };

如果单个 API 请求失败，try/catch 将捕获错误并且 none 的成功数据请求将有任何用处。

如果希望使用您可以捕获的任何数据（而循环中的其他请求失败），您可以修改代码以在每次请求后捕获错误。

如果发生大量请求，您可能希望使用 https://www.npmjs.com/package/p-map 而不是 await Promise.all(...) 来限制出站连接数。

如何在循环中设置数组的值？

how to set the value of an array inside a loop?

javascript

reactjs

axios