ES8 的异步操作

在现代 Web 开发中,异步操作是极其常见的一种情况,异步操作中包含了很多种情形,比如 AJAX 请求,定时器,事件监听等等。而在 ES8 中,我们可以通过一些新特性来更好地解决异步操作所带来的问题。

async/await

在 ES6 中,我们引入了 Promise,它可以解决 Callback Hell 的问题,可是它本身还是一个异步操作,仍然会使得代码看起来不够简洁。所以在 ES8 中,我们引入了 async/await,来更好地解决这个问题。

async/await 是一种更加直观,更加简洁的异步模式,它将异步操作转换成同步操作的语法,即使你不熟悉 Promise 或者 Callback 的基本用法,也可以很快上手使用。

async,意思是异步,用于修饰函数定义,声明这个函数是异步函数,await 表达式则是等待一个 Promise,在等待 Promise 的过程中,async 函数会挂起执行,直到 Promise 状态发生改变。

代码示例:

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

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

上面的代码中,我们有一个异步函数 foo,它的参数 bar 会被 Promise.resolve 转换成 Promise,而 await 则等待这个 Promise,直到 Promise 的状态变成 resolved,其中 await 返回了 Promise 的返回值。

Promise.finally

在 Promise 中,我们有 then 和 catch 这两种方法可以处理 Promise 的状态变更。而 ES8 的 Promise.finally 则是为了处理一些我们希望无论如何都要运行的代码块,无论 Promise 的状态如何都要执行。

代码示例:

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

上面的代码中,我们用 Promise.resolve 创建了一个 Promise,然后通过 then 和 catch 处理 Promise 的状态变更,在最后调用了 Promise.finally,输出 'finally'。

Promise.allSettled

在 Promise 中,我们有 Promise.all 方法可以将一组 Promise 执行完毕后返回结果,然而这个方法只有当所有 Promise 都变成 resolved 才会返回,如果其中有一个 Promise 变成了 rejected,整个 Promise 链就会中断。在 ES8 中,我们可以使用 Promise.allSettled 来解决这个问题。

代码示例:

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

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

上面的代码中,我们创建了三个 Promise,只有一个 Promise 是变成了 rejected,然后我们使用 Promise.allSettled 方法来执行这三个 Promise 并检查它们的状态。最后输出的结果是一个包含了三个 Promise 状态的数组,即使其中有一个 Promise 失败了,我们也可以获得每个 Promise 的错误原因。

结论

ES8 的异步操作让我们在处理异步模式时更加容易,而 async/await 使得代码更加简洁易懂,Promise.finally 和 Promise.allSettled 则可以更好地控制异步操作中的状态变更。这些新特性都是在原有基础上的进一步优化,为开发者提供了更好的异步操作解决方案。

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