Question

我已经参加了很长时间，请帮助。我正在尝试对API链接进行调用，但我有一个数据数组可作为调用的参数进行调用。然后，在进行调用之后，我想将组件状态设置为得到的结果。

let animals = ['cats','goats'] ;
async.each(animals, function(item, cb){
  axios.get(`http://api.com?keyword=${item}`)
    .then(res=> {
        apiData.push(res.data)
        this.setState({
          stateData: apiData 
        });
     });
   })

Answer 1

async.each仅在您要一个接一个地执行请求时才有意义，然后您必须调用cb()以便链继续进行：

 async.each(array, (item, cb) => { // <- arrow func!
   axios.get(`/http://api.com?keyword=${item}`)
   .then(res => {
     apiData.push(res.data);
     this.setState({ stateData: apiData });
     cb(); // <---
   });
});

或者并行执行所有命令（可能更快）：

 const promises = array.map(item => axios.get(`/http://api.com?keyword=${item}`).then(res => res.data));

 Promise.all(promises).then(stateData => {
   this.setState({ stateData });
 });

PS：您应始终处理承诺中的错误，因此只需将.catch(/*..*/)附加到链上...，

Answer 2

对forEach和api请求回调都使用箭头功能，这样可以防止JavaScript在回调链中重新分配this的值。

有关ES6中箭头功能的更多信息，请阅读：https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

反应：这未在异步回调函数中定义

2 个答案: