使用场景
- 多个弹窗按先后顺序依次弹出
- 按顺序执行多个请求
以上场景也可以使用Promise.all + 队列实现,但是由于Promise.all会执行所有的请求,并不会再上一个请求执行完成并在相关交互完成之后再执行下一个请求,所以并不是最好的选择
使用generator + yield
配合使用会是更好的选择, 使用yield来恢复或者暂停一个迭代器函数
逻辑实现
此处只实现了简单的执行逻辑,具体的需根据业务补充
// 模拟axios请求或其它异步函数
const a = () => {
return Promise.resolve(1)
}
const b = () => {
return Promise.resolve(2)
}
const c = () => {
return Promise.resolve(3)
}
// 执行函数数组
const funcQueue = [a, b, c]
// 使用yield + generate将需要顺序执行的数据生成一个可手动迭代对象
function* generateQueue() {
let i = 0
while (true) {
yield funcQueue[i]
i++
}
}
// 调用生成器
const queue = generateQueue()
const doFunc = async () => {
// done:是否迭代结束 value: 当前执行函数
const { done, value } = queue.next()
if(!done && value) {
const res = await value()
// 可根据返回值继续执行下一个函数
// doFunc ()
console.log(res)
}
}
// 手动执行
// doFunc ()
// doFunc ()