vue 循环调用接口赋值问题

Question

循环调接口的时候，里面赋值的数组tableData在外面拿不到,然后想修改成等待所有接口都返回200 的时候再赋值，应该如何修改，感谢各位

if (this.checkHelpData.length > 1) {
          var str = ''
          var totalAmout = ''
          this.checkHelpData.forEach(async (item) => {
            let res = await getOrderInfo(item.id)
            if (res.status === 200 && item.orderStatusName === '已完成') {       
                res.data.salesOrderItemsList.forEach((row) => {
                  this.tableData.push(row)
                })
              }
}

Answer 1

forEach、map等是不支持异步函数的，但是for循环支持，所以可以改成for循环，改动最小。整体返回的话可以使用Promise.all

Promise.all(this.checkHelpData.map(item => getOrderInfo(item.id))).then(datas => {
    console.log(datas)
})

Answer 2

.forEach() 本身不支持异步按顺序执行。在不关心顺序的情况下，原来的代码没有问题，只是要等所有异步完成。可以把 forEach() 改成 map() 拿到每一个异步的 promise，然后用 Promise.all() 来等待全部完成。

const promises = this.checkHelpData.map(async (item) => {
    let res = await getOrderInfo(item.id)
    if (res.status === 200 && item.orderStatusName === '已完成') {
        res.data.salesOrderItemsList.forEach((row) => {
            this.tableData.push(row)
        })
    }
});

await Promise.all(promises);

如果关心顺序，那就不应该每拿到一个结果就立即时间处理（因为拿到结果的顺序不确定），而是应该把这个结果放到外面 Promise.all 结束之后再来处理

const promises = this.checkHelpData.map(item => getOrderInfo(item.id));

const allResults = await Promise.all(promises);
this.tableData = allResults
    .filter(res.status === 200 && item.orderStatusName === '已完成')
    .map(res.data.salesOrderItemsList.flat());
// 上面，如果不是要刷新 tableData，就应该用 tableData.push(...allResult.filter(..).map(...))

如果不希望有一个不成功就中断，Promise.all 就要改用 Promise.allSettled。

如果为了减少服务器压力，不希望一次性把所有请求发出去，而是一次一次的发，就用 for 或者 for .. of

for (const item of this.checkHelpData) {
    const res = await getOrderInfo(item.id);
    if (res.status === 200 && item.orderStatusName === '已完成') {
        this.tableData.push(...res.data.salesOrderItemsList);
    }
}