.push() 在 throw 下不起作用，使用 async await 方法在循环中获取数据 javascript

Question

我正在尝试使用异步等待一个一个地获取数据并将 response.json 推送到一个数组。但是，我在下面使用的代码不会在 console.log(b); 中显示结果。有谁知道是什么问题吗？

提前致谢！

async function fetch_data(){

    let b = [];
    
    for (let i = 1; i < 10; i++) {

        let response = await fetch('https://SOME_URL/' + i, {
          method: "GET",
          headers: {"Key": "123456"}})


        if (!response.ok) {
        var error_detail = `An error has occured: ${response.status}`;
        throw new Error(error_detail);
        }

        var data = await response.json();

        // await b.push(data);
        b.push(data);
    }

    // await Promise.all(b).then(function (b) {
    //         console.log(b)})

    console.log(b);
    return b;

}

当我运行脚本时，它 return 控制台中没有任何内容

fetch_data().catch(error => {
  error.error_detail;
});

更新：似乎使用我下面的回答解决了。不知道为什么。

console.log(b); 不显示输出的问题是因为例如 'https://SOME_URL/' + i 随着 i 的增加，如果 i = 5 和它 returns错误，那么 console.log(b); 将不会 return 任何东西。如果我设置 i < 5，那么 console.log(b); 将 return 输出 b。所以这意味着如果循环中的任何提取 returns 错误在 i 的限制内，那么推送将不起作用（b 将为空）因此 console.log(b); 不会 return任何东西。

有人知道如何解决这个问题吗？

Answer 1

您需要重命名您的函数。您得到的错误是 Maximum call stack size exceeded，因为当您在循环内调用 fetch 时，您实际上调用了外部函数，而不是您想要的函数。

Answer 2

这是一个可用的版本（至少对我有用）：基本上我只是删除了 header 并缩进了一点，所以你的例子应该也能工作。也许您在后端遇到了一些问题？

async function fetch_data() {
  let b = [];

  for (let i = 1; i < 10; i++) {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/' + i, {
      method: "GET",
    });

    if (!response.ok) {
      var error_detail = `An error has occured: ${response.status}`;
      throw new Error(error_detail);
    }

    var data = await response.json();
    // await b.push(data);
    b.push(data);
  }

  console.log(b);
  return b;
}

fetch_data()
  .then(data => console.log(data.length))
  .catch(err => console.error(err));

Answer 3

将 throw new Error(error_detail); 更改为 break 似乎解决了问题并能够显示结果。

Answer 4

我更新了几个地方问题之一是函数名称：“fetch”与默认的 fetch 函数名称相同。

const fetchData = async(symbol) => {
  try {
    let promiseGroup = [];

    const subFetch = async(i) => {
      const BASE_URL = `https://reqres.in/api/products`
      return fetch(`${BASE_URL}/${i}`, {
        method: "GET",
        headers: {
          "Key": "123456"
        }
      }).then(res => res.json())
    }

    for (let i = 1; i < 10; i++) {
      promiseGroup.push(i);
    }   
    const results = await Promise.all(promiseGroup.map(subFetch))
    console.log(results)
    return result;

  } catch (error) {
    const error_detail = `An error has occured: ${error}`;
    throw new Error(error_detail);
  }
}
console.log(fetchData())

.push() 在 throw 下不起作用，使用 async await 方法在循环中获取数据 javascript

.push() does not work under throw, using async await method to fetch data in a loop in javascript

javascript

loops

fetch

async-await

fetch-api