摘月亮的小船儿

切换模式

Promise 的基本用法 ​

Promise 是 ES6（ECMAScript 2015）引入的一个新特性，用于处理异步操作。它代表了一个异步操作的最终完成（或失败）及其结果值的概念。Promise 提供了一种更优雅的方式来处理异步操作，避免了传统方式中常见的回调地狱（Callback Hell）问题。

创建 Promise ​

使用 new Promise() 构造函数来创建一个新的 Promise 对象。构造函数接受一个函数作为参数，这个函数接收两个参数：resolve 和 reject，分别用于表示异步操作成功时的回调和失败时的回调。

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

使用 .then() 和 .catch() 处理结果 ​

使用 .then() 方法来处理 Promise 成功后的结果，使用 .catch() 方法来处理 Promise 失败后的原因。这两个方法都返回一个新的 Promise 对象，因此可以进行链式调用。

javascript
promise  
  .then(result => {  
    console.log(result); // 输出：成功的结果  
  })  
  .catch(reason => {  
    console.log(reason); // 输出：失败的原因  
  });
promise  
  .then(result => {  
    console.log(result); // 输出：成功的结果  
  })  
  .catch(reason => {  
    console.log(reason); // 输出：失败的原因  
  });

Promise 的状态 ​

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当异步操作完成时，Promise 对象的状态将从 pending 变为 fulfilled 或 rejected。.then() 方法用于处理 fulfilled 状态，.catch() 方法用于处理 rejected 状态。

Promise 链式调用 ​

Promise 支持链式调用，即可以在 .then() 方法中返回一个新的 Promise 对象，并继续处理这个新的 Promise 对象。这样可以将多个异步操作串联起来，形成一个异步流程。

javascript
promise1  
  .then(result1 => {  
    // 处理 result1  
    return promise2; // 返回一个新的 Promise  
  })  
  .then(result2 => {  
    // 处理 result2  
    return promise3; // 返回一个新的 Promise  
  })  
  .catch(reason => {  
    // 处理任何一个 Promise 失败的情况  
  });
promise1  
  .then(result1 => {  
    // 处理 result1  
    return promise2; // 返回一个新的 Promise  
  })  
  .then(result2 => {  
    // 处理 result2  
    return promise3; // 返回一个新的 Promise  
  })  
  .catch(reason => {  
    // 处理任何一个 Promise 失败的情况  
  });

Promise.all() ​

Promise.all() 方法接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。当数组中的所有 Promise 对象都变为 fulfilled 状态时，新的 Promise 对象才会变为 fulfilled 状态，并返回一个包含所有结果的数组。当数组中任何一个 Promise 对象变为 rejected 状态时，新的 Promise 对象就会变为 rejected 状态，并返回失败的原因。

javascript
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'result1');  // 1秒后变为成功状态，并返回 'result1'
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'result2');  // 2秒后变为成功状态，并返回 'result2'
})

Promise.all([promise1, promise2])  // 返回一个新的 Promise 对象
  .then(results => {  // 当所有 Promise 都变为成功状态时，新的 Promise 变为成功状态，并返回一个包含所有结果的数组
    console.log(results);  // ['result1', 'result2']  // 注意顺序可能与传入的数组不同，取决于哪个 Promise 先变为成功状态
  })
  .catch(reason => {  // 当任何一个 Promise 变为失败状态时，新的 Promise 变为失败状态，并返回失败的原因
    console.error(reason);  // 失败的原因
  });
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'result1');  // 1秒后变为成功状态，并返回 'result1'
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'result2');  // 2秒后变为成功状态，并返回 'result2'
})

Promise.all([promise1, promise2])  // 返回一个新的 Promise 对象
  .then(results => {  // 当所有 Promise 都变为成功状态时，新的 Promise 变为成功状态，并返回一个包含所有结果的数组
    console.log(results);  // ['result1', 'result2']  // 注意顺序可能与传入的数组不同，取决于哪个 Promise 先变为成功状态
  })
  .catch(reason => {  // 当任何一个 Promise 变为失败状态时，新的 Promise 变为失败状态，并返回失败的原因
    console.error(reason);  // 失败的原因
  });

Promise.allSettled() ​

Promise.allSettled() 方法接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。当数组中的所有 Promise 对象都变为 fulfilled 或 rejected 状态时，新的 Promise 对象才会变为 fulfilled 状态，并返回一个包含所有结果的数组。每个结果都是一个对象，包含 status 和 value（或 reason）两个属性，分别表示 Promise 的状态和结果值。
当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个 promise 的结果时，通常使用它

javascript
let promises = [  
  Promise.resolve(1),  
  new Promise((resolve, reject) => {  
    setTimeout(() => reject(new Error('Failed')), 1000);  
  }),  
  Promise.resolve(3)  
];  
  
Promise.allSettled(promises)  
  .then((results) => {  
    results.forEach((result, index) => {  
      if (result.status === 'fulfilled') {  
        console.log(`Promise ${index} succeeded with value:`, result.value);  
      } else if (result.status === 'rejected') {  
        console.log(`Promise ${index} failed with reason:`, result.reason);  
      }  
    });  
  })  
  .catch((error) => {  
    // 这个 catch 只会在 Promise.allSettled() 本身出问题时触发  
    console.error('An error occurred with Promise.allSettled:', error);  
  });  
  
// 输出将会是：  
// Promise 0 succeeded with value: 1  
// Promise 1 failed with reason: Error: Failed  
// Promise 2 succeeded with value: 3
let promises = [  
  Promise.resolve(1),  
  new Promise((resolve, reject) => {  
    setTimeout(() => reject(new Error('Failed')), 1000);  
  }),  
  Promise.resolve(3)  
];  
  
Promise.allSettled(promises)  
  .then((results) => {  
    results.forEach((result, index) => {  
      if (result.status === 'fulfilled') {  
        console.log(`Promise ${index} succeeded with value:`, result.value);  
      } else if (result.status === 'rejected') {  
        console.log(`Promise ${index} failed with reason:`, result.reason);  
      }  
    });  
  })  
  .catch((error) => {  
    // 这个 catch 只会在 Promise.allSettled() 本身出问题时触发  
    console.error('An error occurred with Promise.allSettled:', error);  
  });  
  
// 输出将会是：  
// Promise 0 succeeded with value: 1  
// Promise 1 failed with reason: Error: Failed  
// Promise 2 succeeded with value: 3