Promise 在前端中的应用实战

Promise 是 ES6 中新增的异步编程解决方案，它可以避免回调函数的回调地狱，并提供了一种更加优雅的代码风格。在前端开发中 Promise 的应用越来越广泛，本文将详细介绍 Promise 的使用方法及示例代码，并给出实战指导意义。

Promise 的基本用法

Promise 构造函数接受一个参数，该参数为一个函数，该函数又接受 2 个参数：resolve 和 reject 。分别表示异步操作成功和失败时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 这里是异步操作
  // 如果操作成功，调用 resolve 函数并传入返回值
  // 如果操作失败，调用 reject 函数并传入错误信息
});

resolve 和 reject 函数都是内置函数，调用 resolve 函数会将 Promise 对象的状态从 "未完成" 变为 "成功"，调用 reject 函数则将状态从 "未完成" 变为 "失败"。另外，Promise 一旦被 resolve 或 reject ，就会立即将结果通知给 then 方法中注册的回调函数。

promise.then(onFulfilled, onRejected);

then 方法接受两个函数参数，第一个参数是 resolve 的回调函数，第二个参数是 reject 的回调函数。通常我们只需要传递第一个参数，即 resolve 的回调函数。如果 Promise 的状态变为 "成功"，就会执行该回调函数。如果状态变为 "失败"，则不会执行该回调函数，而是执行 catch 方法中注册的回调函数或 then 方法的第二个参数。

Promise 串行调用

Promise 是一种可以让代码更加分离的异步解决方案，因为它能够让我们把一个异步操作分成两部分：发起请求（即创建 Promise 对象）和处理请求（即根据 Promise 对象的状态执行回调函数）。这种分离的等待使得调试和维护代码变得更加容易。

在实际开发中，经常会遇到需要按照顺序执行多个异步操作的情况，比如需要先登录，再获取用户信息，最后渲染页面。如果使用回调函数，代码可能会变得很复杂，也容易出错。而使用 Promise，则可以通过链式调用（即 Promise 串行）来解决这个问题。

login()
  .then(getUserInfo)
  .then(renderPage)
  .catch((error) => {
    console.log(error);
  });

在上面的例子中，login 函数返回一个 Promise 对象，getUerInfo 和 renderPage 函数也分别返回 Promise 对象。使用 then 方法可以将它们串联起来，从而保证执行顺序。

Promise 并行调用

除了串行调用以外，Promise 也可以并行调用多个异步操作，从而提高代码的执行效率。Promise.all 方法接受一个数组参数，数组中的每个元素都是一个 Promise 对象。Promise.all 方法会等待数组中所有的 Promise 对象都变为 "成功" 状态，然后执行回调函数。如果任意一个 Promise 对象变为 "失败" 状态，Promise.all 方法会立即跳到 catch 方法中进行错误处理。

// www.javascriptcn.com code example
Promise.all([
  fetch('/api/user1'),
  fetch('/api/user2'),
  fetch('/api/user3'),
]).then(([user1, user2, user3]) => {
  console.log(user1, user2, user3);
}).catch((error) => {
  console.log(error);
});

在上面的例子中，三个 fetch 函数返回的是 Promise 对象，Promise.all 方法将它们组成一个数组，等到所有的 Promise 都完成之后，执行回调函数。注意，回调函数的参数是一个数组，数组中的元素对应着传入的 Promise 数组中每个 Promise 对象的返回值。

Promise 的指导意义

Promise 是一种异步编程解决方案，可以避免回调函数的回调地狱，并提供了一种更加优雅的代码风格。在前端开发中，异步操作是非常常见的，因此 Promise 的应用越来越广泛。使用 Promise 可以使代码逻辑更加清晰，易于维护，提高代码的可读性和可复用性。因此，我们强烈建议在前端开发中使用 Promise 进行异步编程。

示例代码

// www.javascriptcn.com code example
function login() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({name: 'Alice'});
    }, 1000);
  });
}

function getUserInfo(user) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: user.name,
        age: 18,
        location: 'Beijing'
      });
    }, 1000);
  });
}

function renderPage(userInfo) {
  console.log(`name: ${userInfo.name}, age: ${userInfo.age}, location: ${userInfo.location}`);
}

// 串行调用
login()
  .then(getUserInfo)
  .then(renderPage)
  .catch((error) => {
    console.log(error);
  });

// 并行调用
Promise.all([
  fetch('/api/user1'),
  fetch('/api/user2'),
  fetch('/api/user3'),
]).then(([user1, user2, user3]) => {
  console.log(user1, user2, user3);
}).catch((error) => {
  console.log(error);
});

以上就是 Promise 在前端中应用实战的详细介绍及示例代码。希望本文对您有所帮助，感谢阅读！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678072bcce7f4861253c05e0