场景 - 模块2数据的渲染需要依赖模块1的请求数据结果。
类比例子:葫芦娃救爷爷,一个一个送。
有兴趣看动画片的可复制链接:https://www.bilibili.com/video/BV1v54y1m7fz?from=search&seid=10570786521673693427
方法一:回调函数
function dawa() {
setTimeout(() => {
console.log("大娃送完了");
erwa();
}, Math.floor(Math.random() * 5 + 1) * 1000);
}
function erwa() {
setTimeout(() => {
console.log("二娃送完了");
sanwa();
}, Math.floor(Math.random() * 5 + 1) * 1000);
}
function sanwa() {
setTimeout(() => {
console.log("三娃送完了");
}, Math.floor(Math.random() * 5 + 1) * 1000);
}
dawa();
// 结果:
// 15:37:33.930 大娃送完了
// 15:37:33.932 二娃送完了
// 15:37:34.933 三娃送完了
方法二:promise
function dawa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("大娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function erwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("二娃送完了");
resolve()
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function sanwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("三娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
// promise
dawa().then(() => {
erwa().then(() => {
sanwa();
})
})
// 结果:
// 15:42:38.711 大娃送完了
// 15:42:38.713 二娃送完了
// 15:42:40.714 三娃送完了
方法三:async await
function dawa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("大娃送完了");
resolve(123);
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function erwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("二娃送完了");
resolve()
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function sanwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("三娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function sinwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("四娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function wunwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("五娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
function liunwa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("六娃送完了");
resolve();
}, Math.floor(Math.random() * 5 + 1) * 1000);
})
}
// async await
async function jiuyeye() {
// wait后面接的一般是promise,返回值是promise的resolve的参数。
let data = await dawa();
console.log(data); //123
await erwa();
await sanwa();
// 四娃和五娃同时在送, Promise.all表示两个promise在同时执行,
// 比如等到两个promise都执行完毕之后才执行后面的代码
await Promise.all([sinwa(), wunwa()]);
liunwa();
}
jiuyeye();
// 结果:
// 15:49:10.181 大娃送完了
// 15:49:10.181 123
// 15:49:14.182 二娃送完了
// 15:49:17.183 三娃送完了
// 15:49:21.186 五娃送完了 四娃和五娃的顺序不确定,同时执行
// 15:49:22.184 四娃送完了
// 15:49:24.186 六娃送完了