es6新增-async函数(异步编程的最终解决方案)
目录
async异步函数
1.含义
2.用async+await来简化Generator函数
3.async函数特点+好处 (!重点)
a. 内置执行器
b. 更好的语义
c. 更广的适用性
注意：await命令后面接失败态的Promise对象会终端报错
注意：async内部函数是按照同步的方式进行执行的
d. 返回值是Promise对象
4.async函数的错误捕获(借助js的try-catch语句块)
5.async函数的应用
注：async函数对内同步，对外异步
async异步函数
1.含义
es2017标准引入async函数，使异步操作变得更方便。
async函数是Gentertor函数的语法糖。
2.用async+await来简化Generator函数
需求：每间隔1s按照需求输出1，2，3，4，5
Genderator函数：
//Promise封装延迟函数
const delay = n =>new Promise(resolve =>{
setTimeout(()=>{
resolve(n)
},1000)
})
//生成器函数
function * g(){
for(let i = 1;i<=5;i++){
const x = yield delay(i)
console.log(x)
}
}
//Genderator函数的执行必须依靠执行器，因此需要封装co模块
function co(g){
const o = g()
next()
function next(a){
const {value,done} = o.next(a)
if(done) return
value.then(data=>{
next(data)
})
}
}
co(g)
async+await函数：
//Promise封装延迟函数
const delay = n =>new Promise(resolve =>{
setTimeout(()=>{
resolve(n)
},1000)
})
//async异步函数
async function g(){
for(let i = 1;i<=5;i++){
const x = await delay(i) //await异步等待
console.log(x)
}
}
//调用异步函数
g()
3.async函数特点+好处 (!重点)
a. 内置执行器
async函数的执行，与普通函数一样(用同步的方式编写异步代码，可读性强)
async内置执行器,Genderator需要手动写co执行器函数
b. 更好的语义
async和await，比起*和yiled，语义更清楚
async表示函数里面有异步操作，
await表示紧跟在后面的表达式需要等待结果
c. 更广的适用性
co模块约定，yield命令后面只能是Promise对象
而async函数的await命令后面，可以是Promise对象和原始类型的值
(数值、字符串和布尔值，成功态的Promise对象)
注意：await命令后面接失败态的Promise对象会终端报错
成功态
const fn = async() => {
const n = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("success")
},2000)
})
console.log(n)
}
2s后输出：success
失败态
const fn = async() => {
const n = await new Promise((resolve,reject)=>{
setTimeout(()=>{
reject("fail")
},2000)
})
console.log(n)
}
中断报错
注意：async内部函数是按照同步的方式进行执行的
const fn = async() => {
console.log("111")
const n = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("success")
},2000)
})
console.log(n)
console.log("222")
}
输出：111=>2s后输出 success 222
d. 返回值是Promise对象
async函数完全可以看作多个异步操作，包装成的一个Promise对象，
而await命令就是内部then命令简化的语法糖。
const f = () =>{ }
console.log(f())
输出：undefined
const f =async () =>{ }
console.log(f())
输出：Promise对象
const f =async () =>{
return “冰墩墩”
}
f().then(resolve=>{
console.log(resolve)
})
输出：冰墩墩
4.async函数的错误捕获(借助js的try-catch语句块)
注：await不能提取reject的结果,需要进行手动捕获
await后面跟的是成功态的Promise实例时，await会自动提取到resolve中结果返回
如果await后面的Promise是失败态的，那么代码执行就会中断,要杜绝这种操作
即：await不能提取reject的结果，这时我们就需要手动捕获错误，借助js的try-catch语句块
成功态：
const fn = async() =>{
console.log(111);
try{const n = await new Promise((resolve,reject)=>{
setTimeout(()=>{resolve("success")
},2000)
})
console.log(n);
console.log(222)
}catch(e){
console.log("catch",e)
}
}
fn()
输出：111=>2s后 success 222
失败态：
const fn = async() =>{
console.log(111);
try{const n = await new Promise((resolve,reject)=>{
setTimeout(()=>{resolve("fail")
},2000)
})
console.log(n);
console.log(222)
}catch(e){
console.log("catch",e)
}
console.log(333)
}
fn()
输出：111=>2s后 catch fail 和 333
5.async函数的应用
async函数 + await关键字 + Promise 三者配合使用
需求：完成做菜过程，每个环节的时间不等
function doDish(step){
return new Promis((resolve)=>{
setTimeout(()=>{
resolve(step)
},2000*Math.random()) // Math.random()是一个0~1的随机数
})
}
async function f(){
await step1 = doDish("买菜")
console.log(step1)
await step1 = doDish("洗菜")
console.log(step1)
await step1 = doDish("切菜")
console.log(step1)
await step1 = doDish("炒菜")
console.log(step1)
console.log(“结束”)
}
console.log(111)
f()
console.log(222)
输出：111=>222=>{买菜，洗菜，切菜，炒菜，结束}