Promise 和 async/await 的用法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是很常见的，比如通过 AJAX 请求数据、读取本地文件等。为了解决异步操作的回调地狱问题，ES6 引入了 Promise 和 async/await 两种解决方案。

Promise

Promise 是一种异步编程的解决方案，它可以让我们更加优雅地处理异步操作。Promise 的基本用法如下：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(data); // 将成功的结果传递给 resolve 函数
  } else {
    reject(error); // 将错误信息传递给 reject 函数
  }
});

promise.then((data) => {
  // 成功的回调函数
}).catch((error) => {
  // 失败的回调函数
});

Promise 构造函数接收一个函数作为参数，这个函数会在 Promise 对象初始化时立即执行。这个函数有两个参数，resolve 和 reject，分别表示异步操作成功和失败的回调函数。当异步操作成功时，我们调用 resolve 函数，并把成功的结果传递给它；当异步操作失败时，我们调用 reject 函数，并把错误信息传递给它。

then 方法用来注册成功的回调函数，catch 方法用来注册失败的回调函数。

// javascriptcn.com 代码示例
const getData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, Promise!');
    }, 1000);
  });
};

getData().then((data) => {
  console.log(data); // 输出 'Hello, Promise!'
}).catch((error) => {
  console.error(error);
});

上面的代码中，我们定义了一个名为 getData 的函数，它返回一个 Promise 对象。在 resolve 函数中，我们模拟了一个异步操作，1 秒后返回了一个字符串。在 then 方法中，我们注册了成功的回调函数，它会在异步操作成功后被调用，并输出字符串。如果异步操作失败，catch 方法中的回调函数会被调用。

async/await

async/await 是 ES7 中的一个新特性，它基于 Promise，并提供了更加简洁的语法和更加直观的代码结构。async/await 的基本用法如下：

const getData = async () => {
  try {
    const result = await promise; // 等待异步操作完成
    // 处理成功的结果
  } catch (error) {
    // 处理错误信息
  }
};

async 函数返回一个 Promise 对象，我们可以用 then 和 catch 方法来处理异步操作的结果。在 async 函数中，我们可以使用 await 关键字来等待异步操作完成。如果异步操作成功，await 表达式返回成功的结果；如果异步操作失败，await 表达式会抛出一个错误。

// javascriptcn.com 代码示例
const getData = async () => {
  try {
    const result = await fetch('/api/data'); // 发送 AJAX 请求
    const data = await result.json(); // 解析 JSON 数据
    console.log(data); // 输出解析后的数据
  } catch (error) {
    console.error(error);
  }
};

getData();

上面的代码中，我们定义了一个名为 getData 的 async 函数，它发送了一个 AJAX 请求，并解析了返回的 JSON 数据。在 try 块中，我们使用 await 关键字来等待异步操作完成。如果异步操作成功，我们会得到一个 Response 对象，我们可以调用它的 json 方法来解析 JSON 数据。如果异步操作失败，catch 块中的代码会被执行。

总结

Promise 和 async/await 都是用来解决异步操作的问题，它们可以让我们更加优雅地处理异步操作。Promise 是 ES6 中引入的，它提供了基于回调函数的解决方案；async/await 是 ES7 中引入的，它基于 Promise，并提供了更加简洁的语法和更加直观的代码结构。

在实际开发中，我们可以根据具体情况选择使用 Promise 或 async/await。如果我们需要处理多个异步操作，或者需要对异步操作进行复杂的控制，那么 Promise 可能更加适合；如果我们只需要处理一个异步操作，或者需要让代码更加简洁易读，那么 async/await 可能更加适合。

希望本文对你理解 Promise 和 async/await 的用法有所帮助。

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