ES8 异步执行 - async 与 await

随着单页面应用的流行，Web 开发变得更加注重用户体验。在前端开发中，异步执行是常见的问题。ES8 中的 async 与 await 让我们的异步执行更加简单和直观。

什么是 async 与 await？

async 和 await 是 ES8 引入的两个新关键字，用于简化异步操作。async 用于修饰函数，表示该函数是异步函数。 await 则只能在异步函数中使用，用于等待一个 Promise 对象完成。

async 函数

async 函数用于声明一个异步函数。异步函数是指该函数的返回结果是一个 Promise 对象。在 async 函数中，通过 return 返回的值将作为 Promise 的 resolve 值返回。

以下是一个简单的例子：

async function test() {
  return 1;
}

test().then(value => console.log(value)); // 输出 1

await 关键字

在异步函数中，执行一个异步操作通常是返回一个 Promise 对象。在 ES8 中，我们可以使用 await 关键字，该关键字可以等待一个 Promise 对象完成，并返回 Promise 的 resolve 值。

以下是一个示例：

async function test() {
  const result = await Promise.resolve(1);
  console.log(result); // 输出 1
}

test();

在这个例子中，我们使用 await 等待 Promise 对象返回一个值。注意，await 只能在异步函数中使用。如果在同步函数中使用 await ，则会引起一个 SyntaxError 错误。

错误处理

在使用 async 和 await 的异步函数中，我们可以使用 try-catch 来捕获异步操作过程中的错误。

以下是一个错误处理的例子：

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

-------

代码顺序

在异步操作中，有时候我们需要按照一定顺序执行异步操作。在 ES8 中，我们可以使用 async 与 await 实现代码顺序。下面是一个使用 await 等待多个异步操作的例子：

async function test() {
  const result1 = await Promise.resolve(1);
  const result2 = await Promise.resolve(2);
  console.log(result1, result2); // 输出 1 2
}

test();

在这个例子中，我们首先等待第一个异步操作完成，然后再等待第二个异步操作完成。在整个过程中，异步操作是按照预期的顺序执行的。

总结

ES8 中的 async 与 await 让我们的异步操作更加简单和直观。使用 async 和 await，我们可以更好地处理异步操作中的错误，并且可以实现异步操作的代码顺序。相信这些新特性会让 Web 开发变得更加流畅和舒适。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64676274968c7c53b07c621d