JS async & await & 串行并行

Posted 2021-10-21 凯特霖

目录

• 含义
• 使用
• 串行 & 并行

含义

async

1. async函数返回一个 Promise 对象
2. async函数是 Generator 函数的语法糖
3. async函数内部return语句返回的值，会成为then方法回调函数的参数。
4. async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

await

1. await只能作用在async修饰的方法中
2. await命令后面是一个 Promise 对象，返回该对象成功的结果。如果不是 Promise 对象，就直接返回对应的值。
3. await命令后面的 Promise 对象如果变为reject状态，则会被catch方法的回调函数接收到。
4. await是会阻塞代码执行

await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中。

---

使用

var timer1 = () => new Promise((resolve, reject) => {
        setTimeout(()=>{
			console.log('2秒后...')
			reject('2秒已过，报错') 
        },2000)
    })

var fn = async () => {
    const a = 123  
    await timer1()    // await阻塞代码执行，2秒后再直接进行报错捕获
    console.log('again')   // 不执行
}
fn().then(res=>{
     console.log(res);    
 }).catch(err=>{  // 在return 前面有报错，catch捕获
     console.log(err);  // 捕获reject --> 2秒已过，报错
 })

---

串行 & 并行

    var timer2 = () => new Promise((resolve, reject) => {
        setTimeout(()=>{
			console.log(2)
            resolve(2)
        },2000)
    })
    var timer3 = () => new Promise((resolve, reject) => {
        setTimeout(()=>{
			console.log(3)
            resolve(3)
        },3000)
    })

// 串行
async function f() {
	var num3 = await timer3()  // 先走3秒
	console.log('3秒走完中途执行log',111)   // 阻塞代码执行了，先走完3秒，再log  111
	var num2 = await timer2() // 再走2秒
	return  num3 + num2 // 总 5秒后return  3 + 2
}
f().then(res=>console.log(res))  // 5

// 并行 (可提高代码加载性能)
// 也可以使用Promise.all() 方法，效果更佳
async function f() {
	var num2 = timer2() // 提前执行
	var num3 = timer3() // 提前执行
	await num2  // 先走2秒
	await num3  // 再走了1秒
	return  num2 + num3  // 总3秒 
}
f().then(res=>console.log(res))  // 3秒后return 5

---