Promise 与 async/await 语法的转换技巧

前言

在前端开发中，异步操作是非常常见的。JavaScript 对异步操作的支持有诸多方式，Promise 和 async/await 也是其中较为重要的两种方案。Promise 是 ES6 标准添加的实现异步编程的机制，是一种比较简单的方式，但是当遇到复杂的异步编程时，可能会变得混乱。而 async/await 基于 Promise 和 Generator，提供了一种更加简单的方式，使代码更易读、更易维护。本文将介绍 Promise 和 async/await 的原理及它们的转换技巧。

Promise

Promise 的实现原理

Promise 的本质是一个状态机，可以理解为我们在调用一个异步操作时，返回了一个代表这个操作的 Promise 对象，这个对象会在异步操作完成时转变成 Pending 状态，当异步操作成功时，则变成 Resolve 状态，反之则变成 Reject 状态。Promise 对象的状态变化只能由 Pending 转变成 Resolve 或 Reject 状态，状态一旦变化就无法再次改变。

用法

Promise 的用法较为简单，使用时只需调用它的 then 和 catch 方法即可。

// javascriptcn.com 代码示例
function fetchUser() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'http://localhost:3000/user',
      success: resolve,
      error: reject
    });
  });
}

fetchUser().then(user => console.log(user)).catch(err => console.log(err));

转换技巧

当使用 Promise 进行异步编程时，可能会出现一些嵌套的情况，造成代码可读性较差的问题。如果要将 Promise 转换成 async/await，只需在函数前面添加 async 关键字即可。

// javascriptcn.com 代码示例
async function fetchUser() {
  try {
    const user = await $.ajax('http://localhost:3000/user');
    console.log(user);
  } catch(err) {
    console.log(err);
  }
}

fetchUser();

async/await

async/await 的实现原理

async/await 是基于 Promise 和 Generator 的语法糖。async 函数返回的是一个 Promise 对象，而 await 表达式会等待 Promise 对象 resolve，如果 Promise resolve 则 resolve await 表达式，否则会 reject Promise 对象，并抛出异常。

用法

使用 async/await 时，可以将一些 Promise 处理链合并，让代码更加易读。

// javascriptcn.com 代码示例
function fetchUser() {
  return $.ajax('http://localhost:3000/user');
}

function fetchOrders(userId) {
  return $.ajax(`http://localhost:3000/orders/${userId}`);
}

function fetchGoods(orderId) {
  return $.ajax(`http://localhost:3000/goods/${orderId}`);
}

async function fetchAll() {
  const user = await fetchUser();
  const orders = await fetchOrders(user.id);
  const goods = await fetchGoods(orders[0].id);
  console.log(user, orders, goods);
}

fetchAll();

转换技巧

Promise 转换成 async/await 时，只需在函数定义前面添加 async 关键字，在需要等待 Promise 的地方添加 await 关键字即可。

// javascriptcn.com 代码示例
function fetchUser() {
  return $.ajax('http://localhost:3000/user');
}

function fetchOrders(userId) {
  return $.ajax(`http://localhost:3000/orders/${userId}`);
}

function fetchGoods(orderId) {
  return $.ajax(`http://localhost:3000/goods/${orderId}`);
}

async function fetchAll() {
  try {
    const user = await fetchUser();
    const orders = await fetchOrders(user.id);
    const goods = await fetchGoods(orders[0].id);
    console.log(user, orders, goods);
  } catch(err) {
    console.log(err);
  }
}

fetchAll();

总结

本文介绍了 Promise 和 async/await 的原理及应用场景，同时提供了从 Promise 转换到 async/await 的技巧。通过使用 async/await，我们可以写出更加清晰、易读的异步代码，提高代码的可维护性及代码效率。

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