最近练习项目时,遇到第三方提供的API是一个异步函数(如小程序云开发),导致同步任务先执行,造成了参数没有正常的提交。最后用Promise解决~
1.出现问题
大家应该都知道,js属于单线程机制,所有任务都需要排队,前一个任务结束,才会执行后一个任务。同步任务console.log(arr)先执行了,因此返回[],等同步执行完毕后再执行异步任务setTimeout()。
function onPublic() {
let arr = [];
for (let i = 0; i < 3; i++) {
//当第三方api提供的是异步方法时 这里用setTimeout模拟
setTimeout(() => {
console.log(i)
arr.push(i)
}, 0)
}
//arr就会先执行 返回[] 0 1 2
console.log(arr)
}
2.解决问题
那如何正常的返回arr里面的数据呢?同理,把console.log(arr)改成异步方法即可。这里使用Promise.all方法,等待上面所有的Promise任务执行完毕后再执行。
function onPublic() {
let arr = [];
let promiseArr = [];
for (let i = 0; i < 3; i++) {
let p = new Promise((resolve, reject) => {
//当第三方api提供的是异步方法时 这里用setTimeout模拟
setTimeout(() => {
console.log(i)
arr.push(i);
resolve()
}, 0)
})
promiseArr.push(p)
}
//等所有promise任务执行完毕后再执行 返回0 1 2 [0,1,2]
Promise.all(promiseArr).then(res => {
console.log(arr)
})
}