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

在前端开发中，异步操作非常常见，例如请求后端接口获取数据、读取文件、动画效果等等。在 ES6 中，Promise 对象和 async 和 await 关键字的出现改变了异步编程的方式，让异步操作更加简单、直观和可维护。

Promise 对象

Promise 是一种异步编程的解决方案，可以将异步操作以同步的方式来写，避免了嵌套回调函数的问题。Promise 对象有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。当异步操作完成时，Promise 对象会从 Pending 状态变为 Resolved 或 Rejected 状态。

Promise 对象的基本用法

Promise 对象接收一个函数作为参数，该函数接收两个参数：resolve 和 reject，分别表示异步操作成功和失败时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(成功的结果);
  } else {
    reject(失败的原因);
  }
});

Promise 对象的链式调用

Promise 对象的链式调用可以让多个异步操作按照顺序执行，并且可以在其中任意一个异步操作出现错误时，跳过后续的操作并立即执行 catch 方法。

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作1
  resolve(结果1);
}).then((result1) => {
  // 异步操作2
  return 异步操作2的结果;
}).then((result2) => {
  // 异步操作3
  return 异步操作3的结果;
}).catch((error) => {
  // 异步操作出错时的处理
});

async 和 await

async 和 await 是 ES7 中的新特性，可以让异步操作看起来像同步操作，让代码更加简洁易懂。

async

async 关键字可以将一个函数变为异步函数，该函数返回一个 Promise 对象。

async function func() {
  // 异步操作
  return 结果;
}

await

await 关键字只能在异步函数中使用，可以等待一个 Promise 对象的结果，并将其赋值给一个变量。如果 Promise 对象返回的是 Resolved 状态，await 会返回 Promise 对象的结果；如果 Promise 对象返回的是 Rejected 状态，await 会抛出一个错误。

async function func() {
  const result = await 异步操作的 Promise 对象;
  // 后续操作
}

async 和 await 的错误处理

在 async 函数中，可以使用 try...catch 语句来处理异步操作的错误。

async function func() {
  try {
    const result = await 异步操作的 Promise 对象;
    // 后续操作
  } catch (error) {
    // 错误处理
  }
}

示例代码

下面是一个使用 Promise 对象和 async 和 await 的示例代码，用于获取 Github 用户的信息。

// javascriptcn.com 代码示例
// 使用 Promise 对象获取 Github 用户的信息
const getUserInfo = (username) => {
  return new Promise((resolve, reject) => {
    fetch(`https://api.github.com/users/${username}`)
      .then((response) => response.json())
      .then((data) => {
        if (data.message) {
          reject(data.message);
        } else {
          resolve(data);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
};

// 使用 async 和 await 获取 Github 用户的信息
const showUserInfo = async (username) => {
  try {
    const userInfo = await getUserInfo(username);
    console.log(userInfo);
  } catch (error) {
    console.error(error);
  }
};

showUserInfo('octocat');

总结

ES6 的 Promise 对象和 ES7 的 async 和 await 关键字让异步编程更加简单、直观和可维护。在实际开发中，我们可以根据具体情况选择使用 Promise 对象或 async 和 await，以提高代码的可读性和可维护性。

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