js async和await使用详解

文篇文章讲一讲js 中 async 和 await 使用，围绕 “如何使用” 、“异常处理”、 ”什么情况下使用“ 3个重点给予说明。

async和await如何使用

function p(){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve({
                code:1,
                data:[1,2,3]
            });
        },100);
    })
}

async function ajax(){
    // 等待 promise 回调
    let res = await p();
    console.log(res);
}
// 调用 ajax 方法
ajax();

从以上示例代码总结知识点如下：

1. 使用 await 语句 的函数必须使用 async 定义；
2. await 等待的是 Promise 对象的回调；

清楚以上2个关键知识点后，基本已经掌握 async和await 的用法。

async和await 异常处理

通常在开发中，Promise 用于数据的请求，请求就会有失败的情况，那么如何解决 await 使用时的异常问题，看下面代码示例

function p(){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject("错误的回调");
        },100);
    })
}

async function ajax1(){
    // 等待 promise 回调
    let res = await p().catch(err=>err);
    console.log(res);
}
// 调用 ajax 方法
ajax1();

async function ajax2(){
    try {
        // 等待 promise 回调
        let res = await p();
        console.log(res);
    } catch (error) {
        // 错误和处理代码
        console.log("ERROR");
    }
    
}
// 调用 ajax 方法
ajax2();

从以上示例代码总结知识点如下：

1. ajax1 使用 Promise 对象的 catch 回调函数 【小编推荐写法】；
2. ajax2 使用 try catch 语句捕获异常  【网上大多数教程的写法】；

小编推荐 ajax1 示例方式，代码量和美观性上都要优于 ajax2；

什么情况下应当使用 async 和 await

下面是小编个人的总结：

async 和 await 在有多个异步任务需要控制的时候使用，如果只是2及以下的异步任务，使用 callback 方式也是完全没有问题的。

比如现在有 A B C D E 5个业务数据获取的函数
你的业务逻辑的调用 比如是A 调用B，B调用C，B又可能调用D，可能C有调用E
在这种情况下，你要在每一个获取请求的方法中去做判断。。这个判断和callback 不同的方法，你是没法集中管理的，而且在耦合性上数据的获取和业务逻辑是没有分开的
如果用 await 可以在一个方法中统一处理，原来的5个方法获取是完全不用变的。从原来的业务变动改5个方法，变成只要改一个方法。

作者：黄河爱浪

本文原创，著作权归作者所有，转载请注明原链接及出处