关键词

JS async和await关键字的用法(非常详细)

JavaScript 中的 async/await 是继 Promise 之后在 ES2017 中新定义的关键字。

async 用于定义异步函数,await 用于获取异步函数的执行结果,它们在语法形式上对 Promise 进行了修改,使代码编写起来更像是同步式的,阅读起来更加直观,但是底层还是基于 Promise 实现的。

定义异步函数

异步函数是使用 async 关键字定义的函数,除了函数名前边需要加上 async 之外,在定义上与普通的函数没有什么区别,不过它的返回值会包装成 Promise 对象。

例如定义一个异步函数,代码如下:
async function getTitle(){
    return "标题"
}
如果直接调用这个函数并打印返回值,则会输出:

Promise{<fulfilled >: "标题"}

如果想要访问返回值,则需要像 Promise 一样使用 then(),代码如下:
getTitle().then(title=>console.log(title));
除此之外,在异步函数中可以使用 await 关键字获取其他 Promise 或异步函数的执行结果。

使用 await

JS await 关键字的作用相当于 then(),Promise 完成之后的值会作为 await 关键字的返回值,可以把它保存到变量中再进行后续操作,代码如下:
const promise=new Promise(resolve=>setTimeout(resolve,3*1000,"done"));
async function logResult(){
    const result=await promise;
    console.log(result);
}
logResult();
代码中定义了一个 promise,在 3s 后打印出"done"字符串,之后在一个 async 函数 logResult() 中,使用了 await 等待 promise 的执行结果,并打印出来,代码的最后直接调用了 logResult() 这个 async 函数,它没有返回值,所以不需要在后边使用 then()。 运行代码并等待 3s 后,控制台就会打印出"done"。

这里的 await 和后边的代码相当于 then() 中的回调函数,类似下例,代码如下:
promise.then(result=>console.log(result));
只不过使用 await 这种方式更符合同步代码的风格。

需要注意的是,await 只能在异步函数中使用,类似于必须先有 Promise 才能有 then(),如果忘记写 async,则程序会抛出异常。

再来看一个例子,之前使用 fetch() 获取博客文章列表的代码,如果使用 async/await 则可以使用下方示例的形式,代码如下:
async function getPosts(){
    const res=await fetch("/api/posts");
    const posts=await res.json();
    return posts;
}
getPosts().then(posts=>console.log(posts));
代码最后同样会打印出获取的文章列表数组,不过这里可以看到,之前使用了两个 then() 分别获取 res 对象和 posts 数组,而这里使用 await 则更像是同步的代码,且两个 await 是按顺序执行的。

也就是说第1个 await 会等待 fetch() 的返回结果,在得到结果之后,第2个 await 才会执行,如果后边有更多的 await 关键字,则它们都会等待前一个执行完毕之后才会执行。

再看《JS Promise用法详解》一文中(靠后的一部分内容)顺序执行 Promise 的例子,这里同样使用之前定义的3个 promise,改成使用 await 的形式顺序执行,代码如下:
async function execPromises(){
    await promise1;
    await promise2;
    const value3=await promise3;
    return value3;
}
execPromises().then(value=>console.log(value));
这里最后打印出的结果同样也是 promise3 的返回值:1。

这种方式就比使用 then() 的方式清晰了很多。

不过,要想使 await 同时开始执行所有的 promise 或 async函数,可以借助 Promise.all() 实现,例如使用代码:
await Promise.all([promise, asyncFunc1(), asyncFunc2()])

处理异常

使用 async/await 处理异常的方式也相当直观,可以使用 try...catch 语句块包裹 await 语句,任何一条 await 抛出异常,都能够被 try 捕获,并在 catch 语句块中处理。

例如使用 fetch() 处理网络和请求错误,可以使用下方示例的形式,代码如下:
async function getPosts(){
    try{
        const res=await fetch("/api/posts");
        if(res.status>=400){
            throw res.status;
        }
        const posts=await res.json();
        return posts;
    }catch(error){
        if(error===404){
            return[];
        }else{
            console.log(error);
        }
    }
}
getPosts().then(posts=>console.log(posts));
如果响应状态码是 404,则 getPosts() 会返回空数组,其他状态码则直接使用 console.log() 打印了出来。

如果想分别捕获 fetch() 和 res.json() 的异常,则可以把它们分别放到两个 try...catch() 语句块中。同样地,也可以使用 finally() 执行一些收尾操作。

本文链接:http://task.lmcjl.com/news/4665.html

展开阅读全文