ES8 Async/Await 和 Promise 的详细使用方法及异同点-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，异步操作是非常常见的一种情况，例如通过 Ajax 发送请求、读取文件等都需要进行异步操作。在 JavaScript 中，异步编程通常使用回调函数和 Promise 进行处理。而 ES8 中新增了 Async 和 Await 关键字，使得异步编程更加方便和可读。

Promise 的基本用法

Promise 是一个异步编程的解决方案，它通过对象的形式，将异步操作的成功或失败状态以及返回值传递给使用者。

Promise 有以下三种状态：

Pending：初始状态，等待执行。
Fulfilled：异步操作成功完成。
Rejected：异步操作失败。

Promise 的基本用法如下：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作，可以是 Ajax 请求或读取文件等
  if (/* 异步操作成功 */) {
    resolve(/* 返回值 */);
  } else {
    reject(/* 错误信息 */);
  }
});

promise.then((value) => {
  // promise 异步操作成功时执行的代码
  console.log(value);
}).catch((error) => {
  // promise 异步操作失败时执行的代码
  console.log(error);
});

Async 和 Await 的优点

Promise 在解决了回调地狱的问题之后，使得异步编程变得更加可读。而 Async 和 Await 的出现进一步对异步编程进行了简化，使得异步操作的代码结构更加清晰和易于维护。

Async 是一个关键字，用于修饰函数。被 Async 修饰的函数会自动返回一个 Promise 对象，该对象的状态取决于异步操作的执行结果。如果异步操作成功，Promise 对象的状态为 Fulfilled，反之为 Rejected。

Await 也是一个关键字，用于等待一个异步操作的完成，并返回结果。在被 Async 修饰的函数中使用 Await 时，JavaScript 引擎会暂停执行该函数，等待异步操作完成后再继续执行下面的代码。如果异步操作失败，会抛出一个异常，可以通过 try…catch 捕获。

Async 和 Await 的基本用法如下：

// javascriptcn.com 代码示例
async function foo() {
  try {
    const result = await promise;
    // 异步操作成功时执行的代码
    console.log(result);
  } catch (error) {
    // 异步操作失败时执行的代码
    console.log(error);
  }
}

foo();

Promise 和 Async/Await 的异同点

虽然 Promise 和 Async/Await 都是异步编程的解决方案，但是它们之间还是存在一些区别。

代码可读性

使用 Promise 的代码结构相对于回调函数，已经变得更加清晰，但是还是存在一些嵌套的问题。而使用 Async/Await，则可以让异步代码更加类似于同步代码，降低复杂度，提高代码可读性。

错误处理

Promise 的错误处理通常在 then 和 catch 方法中进行，而在 Async/Await 中则可以使用 try…catch 语句进行错误处理。

并发处理

在使用 Promise 时，可以通过 Promise.all 方法实现多个异步操作并发执行，而在 Async/Await 中，则需要通过 Promise.all 方法和 async/await 结合的形式实现。

// javascriptcn.com 代码示例
async function foo() {
  try {
    const [result1, result2, result3] = await Promise.all([promise1, promise2, promise3]);
    // 异步操作并发执行完成后执行的代码
    console.log(result1, result2, result3);
  } catch (error) {
    // 异步操作失败时执行的代码
    console.log(error);
  }
}

foo();

示例代码

下面是一个使用 ES6 Promise 和 ES8 Async/Await 实现异步操作的示例代码：

// javascriptcn.com 代码示例
// 延时函数
function delay(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`我已经等待了 ${time} 毫秒`);
    }, time);
  });
}

// ES6 Promise 示例代码
const promise1 = delay(1000);
const promise2 = delay(2000);
const promise3 = delay(3000);

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    console.log(result1, result2, result3);
  })
  .catch((error) => {
    console.log(error);
  });

// ES8 Async/Await 示例代码
async function foo() {
  try {
    const [result1, result2, result3] = await Promise.all([promise1, promise2, promise3]);
    console.log(result1, result2, result3);
  } catch (error) {
    console.log(error);
  }
}

foo();

总结

ES8 Async/Await 和 Promise 是 JavaScript 异步编程的两种解决方案，都可以有效地解决异步编程代码复杂度和可读性的问题。Promise 的基本用法是通过 then 和 catch 方法完成异步操作结果的处理，而 Async/Await 的基本用法则是在被 Async 修饰的函数中使用 Await，让异步代码更加类似于同步代码。在实际的开发中，可以根据实际情况来选择使用哪种解决方案，或者结合使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653efc287d4982a6eb869820