ES9 的异步操作,让你更优雅的处理异步链式操作

在前端开发中,我们经常需要处理异步操作。之前的写法往往比较啰嗦,容易出错,而且代码可读性不高。ES9(即 ECAMScript 2018)引入了 Async/Await 和 Promise.allSettled 等新特性,让我们能更优雅和高效地处理异步链式操作。

Async/Await

Async/Await 是一种基于 Promise 的语法糖,可以让异步操作代码看起来像同步操作。它本质上是一种特殊的函数,函数声明时加上 async 关键字,函数体内部的异步操作前面加上 await 关键字。

Async

声明一个 async 函数:

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

Await

在 async 函数中使用 await 来等待 Promise 的返回结果:

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

在上面的示例中,fetch('/api/data') 返回的是 Promise 对象,await 会等待 promise 树 resolved 后再执行 console.log。需要注意的是,await 只能在 async 函数内部使用,否则会导致语法错误。

当 Promise 树 rejected 时,会抛出异常。使用 try/catch 来捕获异常:

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

让异步操作更优雅

使用 Async/Await 可以让异步操作更加优雅,比如下面的代码:

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

可以改写为:

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

---------

这样,我们的代码看起来更简洁明了,可读性更高。同时,Async/Await 也使得处理异步链式操作变得更加容易。

Promise.allSettled

Promise.allSettled 用于处理多个 Promise,返回所有 Promise 的结果,不管是否 resolved,都会返回一个状态为 settled 的 Promise 对象。resolved 的 Promise 对象的返回值会包含在数组里,rejected 的 Promise 对象的异常信息也会包含在数组里。

使用 Promise.allSettled 可以同时处理多个异步操作,这样就不需要写大量的嵌套代码了。

下面是一个示例,假设我们需要从两个 URL 获取数据:

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

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

当所有的 Promise 树 settled 后,results 才会被执行。在执行 results 时,我们可以通过检查 result.status 的值来判断对应的 Promise 是否 resolved。如果 resolved,我们可以通过 result.value 获取返回值;如果 rejected,我们可以通过 result.reason 获取异常信息。

示例代码

下面是一个示例代码,展示了如何使用 Async/Await 和 Promise.allSettled 来处理异步操作:

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

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

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

---------

在上面的代码中,我们先定义了一个 fetchData 函数,用来获取数据。然后定义了一个 logData 函数,在该函数中使用 Promise.allSettled 同时获取两个 URL 的数据,并使用 Async/Await 来处理 Promise 对象的返回值。

如果 Promise 正常 resolved,我们就可以通过 data.status === 'fulfilled' 来获取返回值;如果 Promise 异常,我们就可以通过 data.reason 获取异常信息。通过这种方式,我们就可以更加优雅地处理异步链式操作了。

结论

ES9 的 Async/Await 和 Promise.allSettled 等新特性,让我们能更优雅和高效地处理异步操作。使用 Async/Await 可以让异步操作更加优雅,而使用 Promise.allSettled 则可以同时处理多个异步操作。在实际开发中,我们可以结合使用这两个特性,让我们的代码变得更加优雅和高效。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672428532e7021665e127a73