Promise的多任务结合与实用技巧

2023-09-04 02:05:53

Promise的多任务结合与实用技巧

1. 任务链

Promise支持任务链，即一个Promise的then方法可以返回另一个Promise，以此类推。这使得我们可以将多个异步任务串联起来，形成一个任务链。任务链可以简化异步编程，使代码更加清晰易读。

2. then方法

then方法用于处理Promise的状态。当Promise的状态变为resolved或rejected时，then方法的回调函数就会被调用。then方法可以接收两个参数，第一个参数是resolved状态时的回调函数，第二个参数是rejected状态时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 做一些异步操作
  if (成功) {
    resolve('成功');
  } else {
    reject('失败');
  }
});

promise.then((result) => {
  // 处理成功的回调函数
  console.log(result);
}, (error) => {
  // 处理失败的回调函数
  console.log(error);
});

3. catch方法

catch方法用于处理Promise的rejected状态。当Promise的状态变为rejected时，catch方法的回调函数就会被调用。catch方法可以接收一个参数，是rejected状态时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 做一些异步操作
  if (成功) {
    resolve('成功');
  } else {
    reject('失败');
  }
});

promise.catch((error) => {
  // 处理失败的回调函数
  console.log(error);
});

4. finally方法

finally方法无论Promise的状态是resolved还是rejected，都会被调用。finally方法可以接收一个参数，是finally状态时的回调函数。

const promise = new Promise((resolve, reject) => {
  // 做一些异步操作
  if (成功) {
    resolve('成功');
  } else {
    reject('失败');
  }
});

promise.finally(() => {
  // 无论成功或失败都会执行的回调函数
  console.log('无论成功或失败都会执行');
});

5. race方法

race方法用于获取多个Promise中第一个完成的Promise的结果。race方法可以接收一个参数，是多个Promise的数组。

const promise1 = new Promise((resolve, reject) => {
  // 做一些异步操作
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 做一些异步操作
  setTimeout(() => {
    resolve('成功2');
  }, 2000);
});

Promise.race([promise1, promise2]).then((result) => {
  // 获取第一个完成的Promise的结果
  console.log(result);
});

6. allSettled方法

allSettled方法用于获取多个Promise的状态，无论这些Promise是resolved还是rejected。allSettled方法可以接收一个参数，是多个Promise的数组。

const promise1 = new Promise((resolve, reject) => {
  // 做一些异步操作
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 做一些异步操作
  setTimeout(() => {
    reject('失败2');
  }, 2000);
});

Promise.allSettled([promise1, promise2]).then((results) => {
  // 获取所有Promise的状态
  console.log(results);
});