ECMAScript 2019 中的 async 和 await 如何优化代码，避免嵌套回调地狱？

什么是 async 和 await

async 和 await 是 ECMAScript 2019 中引入的两个新关键字，用于处理异步代码，其目的是为了优化代码，避免嵌套回调地狱。

async 定义的函数会返回一个 Promise 对象，而 async 函数内部的异步操作可以通过 await 暂停后续代码的执行，等待异步操作返回结果后再继续执行。

为什么要使用 async 和 await

传统的异步代码通常使用回调函数进行处理，但嵌套多层回调会导致代码难以阅读、维护。而使用 async 和 await 可以避免这种情况，使得异步操作可以像同步操作一样，更加清晰明了。

async 和 await 的用法

声明 async 函数

async function foo() {
  // async 函数内部可以包含异步操作
  const result = await somePromise();
  return result; // async 函数返回 Promise 对象
}

等待 Promise 结果

async function foo() {
  const result = await somePromise();
  console.log(result); // 输出 Promise 结果
}

处理异常

async function foo() {
  try {
    const result = await somePromise();
    console.log(result);
  } catch (error) {
    console.error(error); // 异常处理
  }
}

async 和 await 的优化代码示例

传统回调函数

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

使用 Promise 重构

function foo() {
  return someAsyncOperation()
    .then(result1 => someOtherAsyncOperation(result1))
}

使用 async 和 await 重构

async function foo() {
  const result1 = await someAsyncOperation();
  const result2 = await someOtherAsyncOperation(result1);
  return result2;
}

显然，使用 async 和 await 可以避免回调地狱，使得代码变得更加清晰可读可维护。

总结

异步操作在前端开发中是非常常见的，使用 async 和 await 可以避免嵌套回调地狱，极大地提高了代码的可读性和可维护性，值得我们在实际开发中加以应用。

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