Promise 进阶一之 async、await

Promise 是 JavaScript 中实现异步编程的一种方式,但是 Promise 的语法比较繁琐,使用起来也有一定的难度。为了解决这个问题,ES2017 引入了 async、await 关键字,让异步编程变得更加简单易懂。本文将详细介绍 async、await 的使用方法以及注意事项。

async、await 简介

async、await 是 ES2017 中的新特性,它们是 Promise 的语法糖,可以让异步编程变得更加简单易懂。async、await 关键字可以让我们像编写同步代码一样编写异步代码,并且可以避免回调地狱的问题。

async 关键字用于定义一个异步函数,它会返回一个 Promise 对象。在异步函数中,我们可以使用 await 关键字来等待一个 Promise 对象的完成,然后获取它的返回值。

async、await 的使用方法

下面是一个简单的例子,演示了 async、await 的使用方法:

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

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

-------

在这个例子中,我们定义了一个 delay 函数,它会返回一个 Promise 对象,并且在一定的时间后返回一个值。然后我们定义了一个 main 函数,使用 async 关键字来定义异步函数。在 main 函数中,我们使用 await 关键字来等待 delay 函数的完成,并且获取它的返回值。

当我们执行 main 函数时,它会依次输出 start、1、end。因为我们在 delay 函数中等待了 1000 毫秒,所以在 main 函数中输出 1 的时候,需要等待 1000 毫秒。

async、await 的注意事项

虽然 async、await 关键字可以让异步编程变得更加简单易懂,但是在使用它们的时候还是需要注意一些问题。

1. async 函数返回一个 Promise 对象

在使用 async 关键字定义异步函数时,函数会返回一个 Promise 对象。这个 Promise 对象的状态和值取决于异步函数的执行结果。

2. await 只能在 async 函数中使用

await 关键字只能在 async 函数中使用,如果在普通函数中使用会导致语法错误。

3. await 等待的是一个 Promise 对象

await 关键字只能等待一个 Promise 对象的完成,并且获取它的返回值。如果我们使用 await 等待一个普通的值,会导致语法错误。

4. await 可以链式调用

我们可以使用 await 关键字链式调用多个 Promise 对象,这样可以让代码更加简洁易懂。下面是一个示例:

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

在这个示例中,我们依次等待了三个 Promise 对象的完成,并且获取它们的返回值。

5. 处理错误需要使用 try...catch

在使用 async、await 时,我们需要使用 try...catch 来捕获 Promise 对象的错误。如果 Promise 对象发生了错误,await 会抛出一个异常,我们需要使用 try...catch 来捕获这个异常。下面是一个示例:

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

在这个示例中,我们使用 Promise.reject 创建了一个 Promise 对象,并且在 main 函数中使用 await 等待它的完成。由于 Promise.reject 会直接返回一个 rejected 状态的 Promise 对象,所以 await 会抛出一个异常。我们使用 try...catch 来捕获这个异常,并且输出错误信息。

总结

async、await 是 JavaScript 中实现异步编程的一种方式,它们可以让异步编程变得更加简单易懂。在使用 async、await 的时候,我们需要注意一些问题,比如 async 函数返回一个 Promise 对象、await 只能在 async 函数中使用、await 等待的是一个 Promise 对象等等。掌握了 async、await 的使用方法和注意事项,我们就可以更加方便地进行异步编程了。

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