理解 ECMAScript 2017 中新增的 async 函数的使用方法

阅读时长 4 分钟读完

随着 Web 应用的日益复杂化,JavaScript 作为前端开发语言的重要地位日益突出。为了更好地解决异步编程的问题,ECMAScript 2017 引入了 async 函数,这个函数的出现,大大简化了异步编程的难度。

1. async 函数简介

async 函数是 ECMAScript 2017 中新出现的一种异步编程的解决方案,通常和 await 关键字一起出现。

async 函数是一个返回 Promise 对象的函数。可以使用 async 函数来实现异步操作的链式调用,也可以让异步操作的代码更具有可读性和可维护性。

2. async 函数的使用方法

async 函数的使用方法非常简单,只需要在函数前面加上 async 关键字即可。

在正常情况下,函数内部的运行流程和普通函数是一样的。当 async 函数中有操作需要异步执行的时候,只需要在这些操作前面加上 await 关键字即可。

-- -------------------- ---- -------
----- -------- ----------- -
    --- -
        ----- ---- - ----- --------------
        ----- ----- - ----- ------------
        ----- ---- - ----- --------------
        ----- ----- - ----- ------------
        ------ - ------ ----- --
    - ----- ------- -
        ---------------------
    -
-

我们可以看到,使用 async 函数和 await 关键字,异步操作的代码变得非常清晰。在需要等待异步操作的结果的时候,只需要在数据赋值前面加上 await,代码的执行就会等待这个操作完成后再继续执行下面的代码。

注意:在 async 函数内部使用 await 关键字必须在异步函数中使用。

3. async 函数的 error handling

与 Promise 一样,async 函数也有可能会发生错误,如何处理这些错误呢?

将异步操作放置在 try-catch 中可以捕获错误,这与 Promise 时代的错误处理类似

-- -------------------- ---- -------
----- -------- ----------- -
    --- -
        ----- ---- - ----- --------------
        ----- ----- - ----- ------------
        ----- ---- - ----- --------------
        ----- ----- - ----- ------------
        ------ - ------ ----- --
    - ----- ------- -
        ---------------------
    -
-

4. 案例

一个经典的案例是 async 函数和 fetch 函数结合使用。

-- -------------------- ---- -------
----- -------- ------------------ -
    ----- --- - ---------------------------------------------------
    ----- --- - ----- -----------
    ----- ---- - ----- -----------
    ------ -----
-

-- -- ----- --------
------ -- -- -
    ----- ---- - ----- ------------------
    ------------------
-----

5. 总结

async 函数是 ECMAScript 2017 中新出现的一种异步编程解决方案,可以让异步操作的代码更具有可读性和可维护性。使用 async 函数,可以让异步编程的难度大大降低,提升代码质量,让开发者的工作更加简单。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a2cb8f48841e9894f43b22

纠错
反馈