从 Promise 到 async/await——JavaScript 异步编程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网技术的发展，JavaScript 作为一门前端开发的必备语言，已经成为了最受欢迎的编程语言之一。然而，JavaScript 作为一门单线程的语言，其异步编程模型却一直是开发者面临的难点之一。在过去，我们使用回调函数来解决异步编程问题，但是回调函数的嵌套会使得代码变得难以维护和阅读，而 Promise 和 async/await 则是解决异步编程的更好的方法。

Promise

Promise 是一种异步编程的解决方案，它是 ES6 中新增加的特性。Promise 对象代表一个异步操作的最终完成或失败，并且可以支持链式调用，使得异步操作更加清晰和易于维护。

Promise 的基本使用

Promise 的基本使用非常简单，我们只需要使用 new Promise() 创建一个 Promise 对象，然后在 Promise 对象中使用 resolve() 或 reject() 方法来标识异步操作的成功或失败。例如：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const num = Math.random();
    if (num > 0.5) {
      resolve(num);
    } else {
      reject('error');
    }
  }, 1000);
});

promise.then(
  (result) => {
    console.log('成功：' + result);
  },
  (error) => {
    console.log('失败：' + error);
  }
);

在上面的代码中，我们使用 new Promise() 创建了一个 Promise 对象，并且在 Promise 对象中使用 setTimeout() 模拟了一个异步操作。如果异步操作成功，我们调用了 resolve() 方法，将异步操作的结果传递给了 then() 方法中的第一个回调函数；如果异步操作失败，我们调用了 reject() 方法，将错误信息传递给了 then() 方法中的第二个回调函数。

Promise 的链式调用

Promise 的链式调用是 Promise 最重要的特点之一，它可以让异步操作更加清晰和易于维护。我们可以在一个 Promise 对象中使用 then() 方法返回一个新的 Promise 对象，并且在新的 Promise 对象中继续使用 then() 方法。例如：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const num = Math.random();
    if (num > 0.5) {
      resolve(num);
    } else {
      reject('error');
    }
  }, 1000);
});

promise
  .then((result) => {
    console.log('第一次成功：' + result);
    return result * 2;
  })
  .then((result) => {
    console.log('第二次成功：' + result);
  })
  .catch((error) => {
    console.log('失败：' + error);
  });

在上面的代码中，我们在第一个 then() 方法中返回了一个新的 Promise 对象，并且在新的 Promise 对象中继续使用 then() 方法。这样的链式调用可以让我们更加清晰地表达异步操作的逻辑，避免了回调函数的嵌套。

async/await

async/await 是 ES8 中新增加的特性，它是一种基于 Promise 的异步编程解决方案。async/await 可以让异步操作的代码看起来像是同步的，使得异步编程更加简单和易于维护。

async/await 的基本使用

async/await 的基本使用非常简单，我们只需要在异步函数前面加上 async 关键字，然后在异步操作前面加上 await 关键字。例如：

// javascriptcn.com 代码示例
async function asyncFunc() {
  try {
    // 异步操作
    const result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        const num = Math.random();
        if (num > 0.5) {
          resolve(num);
        } else {
          reject('error');
        }
      }, 1000);
    });
    console.log('成功：' + result);
  } catch (error) {
    console.log('失败：' + error);
  }
}

asyncFunc();

在上面的代码中，我们定义了一个异步函数 asyncFunc()，在函数体中使用了 await 关键字等待一个 Promise 对象的返回结果。当 Promise 对象返回结果时，我们将结果赋值给了 result 变量，并且打印了成功的信息。如果 Promise 对象抛出了一个错误，我们就会进入到 catch 块中，并且打印错误信息。

async/await 的错误处理

async/await 的错误处理非常简单，我们只需要在异步函数中使用 try...catch 块来捕获错误即可。例如：

// javascriptcn.com 代码示例
async function asyncFunc() {
  try {
    // 异步操作
    const result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        const num = Math.random();
        if (num > 0.5) {
          resolve(num);
        } else {
          reject('error');
        }
      }, 1000);
    });
    console.log('成功：' + result);
  } catch (error) {
    console.log('失败：' + error);
  }
}

asyncFunc();

在上面的代码中，我们在异步函数中使用了 try...catch 块来捕获错误。如果异步操作成功，我们就会打印成功的信息；如果异步操作失败，我们就会打印失败的信息。

总结

JavaScript 异步编程已经成为了前端开发不可避免的难点之一。Promise 和 async/await 是解决异步编程的更好的方法，它们可以让我们更加清晰地表达异步操作的逻辑，避免了回调函数的嵌套。在实际开发中，我们应该根据实际情况选择合适的异步编程方案，并且遵循异步编程的最佳实践，使得我们的代码更加易于维护和扩展。

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