JavaScript中的Promise使用详解

什么是Promise？

Promise是一种用来处理异步请求的解决方案，它可以使得异步代码更加易于阅读和编写。Promise可以将异步请求进行封装，让代码具有更好的可读性和可维护性。

如何使用Promise？

在JavaScript中，Promise是构造函数，通过new来创建一个Promise对象。

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

Promise构造函数接受一个函数作为参数，该函数接受两个参数resolve和reject，分别表示异步操作成功和失败后的回调函数。在异步操作结束后，通过调用resolve或reject来触发回调函数。

Promise的三种状态

Pending：Promise对象创建后未触发resolve或reject，处于等待状态。
Fulfilled：异步操作成功后调用resolve，Promise对象处于成功状态。
Rejected：异步操作失败后调用reject，Promise对象处于失败状态。

Promise的then和catch方法

Promise对象通常采用then和catch方法来处理异步请求的结果。

then方法：用来注册异步请求成功回调函数。如果当前Promise对象处于Fulfilled状态，则直接执行回调函数；如果处于Pending状态，则等到Promise对象状态变更后再执行回调函数。

promise.then(
  /* 成功回调函数 */,
  /* 失败回调函数 */
);

catch方法：用来注册异步请求失败回调函数。如果当前Promise对象处于Rejected状态，则直接执行回调函数；如果处于Pending状态，则等到Promise对象状态变更后再执行回调函数。

promise.catch(
  /* 失败回调函数 */
);

示例1

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = [1, 2, 3, 4, 5];
      if (data.length > 0) {
        resolve(data);
      } else {
        reject('No data received');
      }
    }, 1000);
  });
}

getData()
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  })

在上面的示例中，我们通过封装一个异步请求，使用Promise将结果返回。然后通过then方法注册异步请求成功的回调函数，通过catch方法注册异步请求失败的回调函数。当异步请求结果返回后，根据Promise的状态，执行相应的回调函数。

示例2

function getUser(userId) {
  return new Promise((resolve, reject) => {
    if (typeof userId !== 'number') {
      reject('Invalid user ID');
    } else {
      const user = {
        id: userId,
        name: 'Alice',
        age: 20
      };
      resolve(user);
    }
  });
}

getUser(1)
  .then(user => {
    console.log('User found:', user);
    return user;
  })
  .then(user => {
    user.age = 22;
    return user;
  })
  .then(user => {
    console.log('User updated:', user);
  })
  .catch(error => {
    console.log('Error:', error);
  });

在上面的示例中，我们使用Promise封装了一个getUser的异步请求，获取用户信息。我们使用then方法通过链式调用，修改用户信息，并接着返回修改后的用户信息。在最后一个then方法中打印修改后的用户信息。