async和await是promise的一种语法糖,也就是更简单易懂的写法。
在很多项目中,你会经常看到async和await的配合使用,看到原始的promise写法反而不多,就是因为async-await这种写法是用同步的语法去实现异步的逻辑。
基础使用
原生promise写法
javascript
let value = null
let proFn = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('成功的值')
},2000)
})
proFn.then(res=>{
value = res
console.log(value,'异步返回值')
//...value获取到了值,可以处理后续的业务逻辑
})
async和await的写法
javascript
let proFn = ()=>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功的值')
}, 2000)
})
}
async function getVal(){
let value = await proFn() //这条语句执行完毕,后续的代码都需要等value获取到了promise返回的值,才会开始去执行
console.log(value,'获取到了值')
//...可以执行后续的业务
}
getVal()
两者执行结果都是一样的
async
作用
async需要在函数上使用,本质是Generator 函数的语法糖。
一旦某个函数使用了async,那么这个函数的返回值就会被包装成一个promise函数
javascript
let fn = async function(){
return '函数返回值'
}
console.log(fn(),'调用fn函数')
fn().then(res=>{
console.log(res,'获取值')
})
语法
async写在函数定义的时候,可以有如下写法
javascript
let fn1 = async function(){
return '普通函数1'
}
async function fn2(){
return '普通函数2'
}
async ()=> '箭头函数'
class Fn{
constructor(){
}
async fn(){
return '类中的方法'
}
}
await
使用条件
await是不可以单独去使用的,是需要和async函数去配合使用的
javascript
let pro = function(){
return new Promise(res=>{
res('成功的值')
})
}
let value = await pro()
参数类型
await命令后面可以绑定两种类型的参数,一种是常规类型,一种是promise类型
javascript
let pro = async function(){
let value = await '常规值'
console.log(value,'await返回常规值')
}
pro()
javascript
let pro = async function(){
let value = await new Promise(res=>{
setTimeout(()=>{
res('promise执行成功的值')
},3000)
})
console.log(value,'await绑定promise实例')
}
pro()
处理错误
async-await在处理错误时,可以使用try catch语法配合
javascript
async function pro(){
try{
let value = await new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve('成功')
reject('失败')
},3000)
})
return value
}catch(error){
console.log(error,'进入catch')
return error
}
}
pro().then(res=>{
console.log(res,'执行完毕')
}).catch(error=>{
console.log(error,'报错回调')
})