Method 1: Generally speaking, we can set a flag variable, and then maintain the number of variables in the respective ajax success callbacks. When the conditions are met, we will trigger subsequent functions
let flag = 0;
// ajax为异步操作，结合Promise使⽤可以轻松实现异步操作队列
function ajax1(num) {
return new Promise(resolve => {
setTimeout(() => {
flag++;
console.log('第1个异步请求'+flag); // 输出处理结果
if (flag === 3) {
donefn();
}
resolve();
}, 3000);
});
}
function ajax2() {
return new Promise(resolve => {
setTimeout(() => {
flag++
console.log('第2个异步请求'+flag); // 输出处理结果
if (flag === 3) {
donefn();
}
resolve();
}, 2000);
});
}
function ajax3() {
return new Promise(resolve => {
setTimeout(() => {
flag++
console.log('第3个异步请求'+flag); // 输出处理结果
if (flag === 3) {
donefn();
}
resolve();
}, 1000);
});
}
function donefn() {
console.log('执行完成！');
}
ajax1();
ajax2();
ajax3();
Method 2: Promise.all([promise1,promise2]).then(function(){})
// ajax为异步操作，结合Promise使⽤可以轻松实现异步操作队列
function ajax1(num) {
return new Promise(resolve => {
setTimeout(() => {
console.log('第1个异步请求'); // 输出处理结果
resolve();
}, 3000);
});
}
function ajax2() {
return new Promise(resolve => {
setTimeout(() => {
console.log('第2个异步请求'); // 输出处理结果
resolve();
}, 2000);
});
}
function ajax3() {
return new Promise(resolve => {
setTimeout(() => {
console.log('第3个异步请求'); // 输出处理结果
resolve();
}, 1000);
});
}
function donefn() {
console.log('执行完成！');
}
Promise.all([ajax1(),ajax2(),ajax3()]).then(function(){
console.log('执行完成！')})
Method 3: Use Generator
// 使⽤Generator顺序执⾏三次异步操作
function* r(num) {
yield ajax1(num);
yield ajax2();
yield ajax3();
}
// ajax为异步操作，结合Promise使⽤可以轻松实现异步操作队列
function ajax1(num) {
return new Promise(resolve => {
setTimeout(() => {
console.log('第1个异步请求'); // 输出处理结果
resolve()
}, 1000);
});
}
function ajax2() {
return new Promise(resolve => {
setTimeout(() => {
console.log('第2个异步请求'); // 输出处理结果
resolve(); // 操作成功
}, 1000);
});
}
function ajax3() {
return new Promise(resolve => {
setTimeout(() => {
console.log('第3个异步请求'); // 输出处理结果
resolve(); // 操作成功
}, 1000);
});
}
// 不使⽤递归函数调⽤
let it = r();
// 修改为可处理Promise的next
function next(data) {
let {
value, done } = it.next(data); // 启动
if (!done) {
value.then(() => {
next();
});
} else {
console.log('执行完毕！');
}
}
next();