vue遍历数组执行异步请求
时间: 2023-11-05 13:53:35 浏览: 123
在Vue中遍历数组并执行异步请求的方法有多种。根据提供的引用,有三种方法可以实现这个目标。
第一种方法是给forEach函数添加async关键字,并在forEach函数内部使用await关键字。但是这种方法会导致forEach外部无法获取到返回的值,因为forEach本身不支持async和await。
第二种方法是使用map函数,将每次异步请求包装成一个Promise,并将这些Promise保存在一个数组中。然后使用for...of循环等待每个Promise执行完毕,最后可以在循环之外获取到返回的值。
第三种方法是使用async/await结合for...of循环。在for...of循环中使用await等待每次异步请求执行完毕,并将结果存入数组中。最后可以在循环之外获取到返回的值。
以下是三种方法的具体实现示例:
方法一:
async fetchDescription(data) {
var arr = [];
var prop = null;
data.forEach(async (item) => {
prop = await Description.fetch(item);
arr.push(prop.data);
});
console.log(arr); // => []
}
方法二:
async fetchDescription(data) {
var arr = [];
var prop = null;
let promises = data.map(async (item) => {
prop = await Description.fetch(item);
arr.push(prop.data);
});
for (const promise of promises) {
await promise;
}
console.log(arr); // => [e, e]
}
方法三:
async fetchDescription(data) {
var arr = [];
var prop = null;
for (const item of data) {
prop = await Description.fetch(item);
arr.push(prop.data);
}
console.log(arr); // => [e, e]
}
根据具体情况选择适合的方法来遍历数组并执行异步请求。
阅读全文