目录
1.通过promise的链式调用将异步方法变为同步执行
2.使用async及await
3.回调函数方式
4.三种方式对比
5.async及await使用的注意点
1.通过promise的链式调用将异步方法变为同步执行
function get1(){return new Promise((resolve,reject) =>{console.log('执行get1接口逻辑')setTimeout(() =>{if(flag.value){resolve('get1接口执行完成')}else{reject('get1接口执行失败')}},3000)})}function get2(){return new Promise((resolve,reject) =>{console.log('执行get2接口逻辑')setTimeout(() =>{if(flag.value){resolve('get2接口执行完成')}else{reject('get2接口执行失败')}},2000)})}
function get3(){return new Promise((resolve,reject) =>{console.log('执行get3接口逻辑')setTimeout(() =>{if(flag.value){resolve('get3接口执行完成')}else{reject('get3接口执行失败')}},2000)})}
function get4(){return new Promise((resolve,reject) =>{console.log('执行get4接口逻辑')setTimeout(() =>{if(flag.value){resolve('get4接口执行完成')}else{reject('get4接口执行失败')}},2000)})}
// 进行get1-get4方法的顺序执行
get1()
.then(res=>{console.log(res);return get2()
})
.then(res=>{console.log(res);return get3()
})
.then(res=>{console.log(res);return get4()
})
.then(res=>{console.log(res);
})执行结果：
2.使用async及await
function get1(){return new Promise((resolve,reject) =>{console.log('执行get1接口逻辑')setTimeout(() =>{if(flag.value){resolve('get1接口执行完成')}else{reject('get1接口执行失败')}},3000)})}function get2(){return new Promise((resolve,reject) =>{console.log('执行get2接口逻辑')setTimeout(() =>{if(flag.value){resolve('get2接口执行完成')}else{reject('get2接口执行失败')}},2000)})}
function get3(){return new Promise((resolve,reject) =>{console.log('执行get3接口逻辑')setTimeout(() =>{if(flag.value){resolve('get3接口执行完成')}else{reject('get3接口执行失败')}},2000)})}
function get4(){return new Promise((resolve,reject) =>{console.log('执行get4接口逻辑')setTimeout(() =>{if(flag.value){resolve('get4接口执行完成')}else{reject('get4接口执行失败')}},2000)})}async function get(){//使用await可以让异步操作进行同步执行const result1 = await get1();console.log(result1)const result2 = await get2();console.log(result2)const result3 = await get3();console.log(result3)const result4 = await get4();console.log(result4)
}
get()执行结果：
await只能在async修改的异步函数中进行使用。
3.回调函数方式
使用较少，多级回调导致函数难以理解。
4.三种方式对比
5.async及await使用的注意点
①下面的示例中第一个任务执行完成之后才能执行第二个任务。
更高效的做法是将所有的Promise用Promise.all组合起来，然后再去await，这样会提高运行效率，如下：
②在循环中执行异步操作，不能直接调用forEach及map方法，尽管在回调函数中写了await，这里的forEach会立即返回，不会暂停等到所有的异步操作都执行完成。如下:
如果希望循环中的异步操作都一一执行完成之后才继续执行 ，可以使用传统的for循环，如下:
如果想要循环中的所有操作都并发执行，这里的for循环会等到所有的异步函数执行完成之后才执行后面的处理
