如何处理异步 axios api 调用答案

【问题标题】：How to handle asynchronous axios api call如何处理异步 axios api 调用
【发布时间】：2018-08-05 17:34:28
【问题描述】：

我正在尝试从 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);

【问题讨论】：

您在 for 循环中进行了多个 AJAX 调用，它们本质上是异步的。你不能打一个电话把所有的元素放在一起吗？

标签： javascript arrays reactjs axios

【解决方案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

【讨论】：

【解决方案2】：

我看到的唯一方法是每次有来自 axios 调用的响应时执行 map 和 setState（在 'then' 子句内。除非你可以对所有人进行一次 axios 调用（然后，setState 和 map 应该也在“then”之内，但你知道）。

【讨论】：