javascript - for循环中的插值(axios请求)

Question

是否可以在 for 循环内插入值？我正在使用 axios，我希望当它完成一个循环时，它会到达下一个 json 文件，并获取数组的下一个值；这些是我的尝试(不起作用)

我的第一次尝试是:

const axios = require('axios')
const array = [foo, bar, baz];
(async()=>{
    for(i=0;i<array.length;i++){
        const res = await axios.get(`https://blabla/${array[i]}.json`)
        // actions
    }
})()

但通过这种方式，axios 使请求仅插入数组的最后一个元素(在本例中为“baz”)，而我希望它使用“foo”发出第一个请求，然后当它完成所有操作时，它向“bar”发出第二个请求，依此类推，直到“baz”

我的第二次尝试是:

const axios = require('axios')
const array = [foo, bar, baz];

array.forEach(async function(item){
    const res = await axios.get(`https://blabla/${item}.json`)
    //actions
})

但使用此代码时，我收到错误“TypeError: Cannot set property 'res' of undefined”

我能做什么？

Answer 1

你的代码可以工作。您当然应该将 for (i = 0) 更改为 for (let i = 0)，但这不会影响输出。在 api 数据数组中查找错误.请参阅我使用 jsonplaceholder 的示例

const axios = require('axios')
const f = async () => {
  const array = ['1', '2', '3']
  for (let i = 0; i < array.length; i++) {
    const res = await axios.get(`https://jsonplaceholder.typicode.com/users/${array[i]}`)
    console.log(res.data.name)
  }
}
f()

第一个示例和第二个示例之间的区别在于，第一个示例将顺序运行请求，而第二个示例将并行运行它们。更惯用的方法是使用 Promise.all

const axios = require('axios')
const f = async () => {
  const array = ['1', '2', '3']
  const response = await Promise.all(array.map(i => axios.get(`https://jsonplaceholder.typicode.com/users/${i}`)))
  const data = response.map(item => item.data)
  console.log(data)
}
f()