如何处理异步 axios api 调用
Posted
技术标签:
【中文标题】如何处理异步 axios api 调用【英文标题】:How to handle asynchronous axios api call 【发布时间】: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 调用,它们本质上是异步的。你不能打一个电话把所有的元素放在一起吗? 【参考方案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”之内,但你知道)。
【讨论】:
以上是关于如何处理异步 axios api 调用的主要内容,如果未能解决你的问题,请参考以下文章