async是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象。因此对async函数可以直接then,返回值就是函数最后返回的参数。
await 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。
await 修饰的如果是Promise对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行;
如果不是Promise对象:把这个非promise的东西当做await表达式的结果。
自己的理解:
用async修饰的函数返回,不管在函数体内 return
了什么值,都是一个promise对象,所以这个函数也可以用then方法
而await是可以获取一个promise的返回值的方法,只能再async中使用,这种方法比用then会方便一些,尤其是在需要链式调用的时候
下面看一段代码:
//定义一个网络请求函数
function request(num){
return new Promise((resolve,reject)=>{
//模拟网络请求
console.log('访问url获取数据',num)
setTimeout(()=>{
//拿到结果通过resolve返回
resolve(num*2)
},2000)
})
}
//用async修饰一个函数,表示这个函数是异步函数
let func = async function(){
const res1 = await request(5) //使用await,方便获取这个网络请求函数的返回值
console.log(res1);//10
const res2 = await request(res1)
console.log(res2);//20
return res2
//相当于 return new Promise((resolve) =>{resolve(20)})
}
func().then(res =>{
console.log(res * 2); //40
})
结果:
宏任务和微任务.js:27访问url获取数据 5
宏任务和微任务.js:52 10
宏任务和微任务.js:27 访问url获取数据 10
宏任务和微任务.js:54 20
宏任务和微任务.js:59 40
最后引用大佬文章的一段话:
async/await 的优势在于处理 then 链
单一的 Promise 链并不能发现 async/await 的优势,但是,如果需要处理由多个 Promise 组成的 then 链的时候,优势就能体现出来了(很有意思,Promise 通过 then 链来解决多层回调的问题,现在又用 async/await 来进一步优化它)。
感兴趣可以看看他的文章:
[https://segmentfault.com/a/1190000007535316]: