vue3中forEach循环中使用async函数获取不到数据

在forEach循环中使用async函数时，循环不会等待异步操作完成就继续执行下去。这意味着，在获取异步回调数据时，很可能这些异步操作还没有完成，因此获取的数据是空的。

checkValues.value.forEach(async (ele) => {
			console.log('ele', ele);
			const res = await createOrder({
				phone
			})
			if (res.data.data.code == 1) {
				orderId.value.push(res.data.orderid)
			}
		})
		console.log('订单orderId.value', orderId.value);

例如这样，orderId.value获取不到数据

解决方法：

使用for...of循环代替forEach循环,因为for...of支持异步操作的等待
 

for (const ele of checkValues.value) {
    const res = await createOrder({
        phone
    });
    if (res.data.data.code == 1) {
        orderId.value.push(res.data.orderid);
    }
}
console.log('订单orderId.value', orderId.value);

这样就可以获取到了，但是这种方法会按顺序执行每个订单的创建操作，可能会导致性能问题，如果数据很多的话。可以考虑使用Promise.all或者Promise.allSettled:

const promises = checkValues.value.map(ele => createOrder({
    phone
}));

const results = await Promise.allSettled(promises);

results.forEach(result => {
    if (result.status === 'fulfilled' && result.value.data.data.code == 1) {
        orderId.value.push(result.value.data.orderid);
    }
});
console.log('订单orderId.value', orderId.value);