async await的理解

初识

async 函数表示这个函数内部有异步请求,如果这个 async 函数没有返回值,那么这个 async 仅仅只是一个标识而已.

await 需要结合 async 函数一起使用,它通常用于等待一个 Promise 函数或 async 函数的执行(你当然可以写个await 123,但这不会有任何作用)

先看代码

console.log(1); (async function () {     console.log(2);     const res = await req(); // 随意定义一个返回值是Promise的函数     console.log(3);     if (res[0]) {         throw new Error(res[0]);     } else {         console.log("请求成功");     } })(); console.log(4); 

如果对 Promise 很了解的话,应该很快能看出控制台的输出顺序是 1 2 4 3 "请求成功",如果你判断错误了也没关系,实际开发中多用用就熟悉了.笔者也经常会判断失误.

进阶

上面说到 async 函数如果没有返回值则这仅仅只是一个标识,那么如果有返回值呢?

async function get() {     return 123; } const f = get(); // Promise { 123 } 

上面代码可以看出 async 函数返回了一个 Promise 对象.

作用就是你可以不用再在一个函数里手写return new Promise((resolve, reject)=>{})了,可以直接返回一个 async 函数

要注意的是在 Promise 中是使用resolve()返回正常值,reject()返回异常值

在 async函数 中使用return返回正常值,使用抛出错误throw new Error()返回异常值

function (a,b) {   return async function () {     const res = await getSomething({a,b});     if (res.code === 200) {       return [res.data.rows];     } else {       throw new Error(res.msg);     }   }; } 

处理异常

抛出错误那势必就要处理错误.而处理错误的方式也是有好几种的,我只在这里写我推荐的 Error First 思想, 另一个方法是传统的 try catch

async function sendReq() {     const res = await getSomething().then((res) => [null, res]).catch((error) => [error, null]);     if (res[0] !== null) {         // 错误逻辑         console.error(error);         return;     }     // 正确逻辑     console.log(res[1]); } 

上面的代码,在 await 函数后面加上.then().catch(),在学习Promise的时候,我们知道Promise的then方法是处理resolve,then后的catch方法是处理reject,并且这两个也都会返回一个Promise,因此再使用await接收then或catch返回的Promise即可.

返回的值为一个数组,发生错误的时候把错误放到数组的第一位,这种思想称之为Error First思想.很方便判断是否出错.