如何处理异步axios api调用

时间:2018-02-26 09:47:52

标签: javascript arrays reactjs axios

我试图通过tgram数组/ axios api调用向allIco的所有对象添加属性。当我使用.map添加属性时,其值是未定义的。我知道这是因为我的api电话是异步的,但我无法弄清楚如何添加axios.all ......任何帮助都会受到赞赏:)

  var allIcos = Object.assign(ico.results);
  let tgram = [];
  var result = [];

  for (let i = 0; i < allIcos.length; i++) {
    axios.get(`url=@${tgramUrl[allIcos[i].name]}`).then(response => {
        tgram.push(response.data.result);
    }).catch(err => console.log(err));
  }

  var result = allIcos.map((obj,i) => Object.assign({telegram:"test"}, obj));
  this.setState({data: allIcos});
  console.log(allIcos);

2 个答案:

答案 0 :(得分:1)

尝试promise.all怎么样?

const promises = [];

for (let i = 0; i < allIcos.length; i++) {
    promises.push(axios.get(`url=@${tgramUrl[allIcos[i].name]}`));
}

Promise.all(promises).then(function(values) {
  console.log(values);
});

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

答案 1 :(得分:0)

我看到的唯一方法是每次有来自axios调用的响应时执行map和setState(在&#39;然后&#39;子句内。除非你可以为所有人做一个axios调用(然后, setState和map也应该在&#39;然后&#39;里面,但你知道吗。