前段面试|JS async & await & 串行并行 vue.js|html5|经验分享|javascript

含义
使用
串行 & 并行

含义 【前段面试|JS async & await & 串行并行】async

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

await

await只能作用在async修饰的方法中
await命令后面是一个 Promise 对象，返回该对象成功的结果。如果不是 Promise 对象，就直接返回对应的值。
await命令后面的 Promise 对象如果变为reject状态，则会被catch方法的回调函数接收到。
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秒，再log111 var num2 = await timer2() // 再走2秒 returnnum3 + num2 // 总 5秒后return3 + 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秒 returnnum2 + num3// 总3秒 } f().then(res=>console.log(res))// 3秒后return 5