深入理解 JavaScript Promise

最新推荐文章于 2024-09-14 19:44:09 发布

卓卓没头发

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量1.1k

点赞数 37

分类专栏： JavaScript心得文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/a3098448071/article/details/139936394

版权

JavaScript心得专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言

在当今的 JavaScript 开发中，异步编程已经成为了标准实践。随着我们的应用程序变得越来越复杂，管理异步操作和回调变得尤为关键。在过去，开发者们常常发现自己陷入所谓的“回调地狱”，这是一种由于深层嵌套的回调函数导致的难以维护的代码结构。为了解决这一问题，Promise 应运而生，并迅速成为了现代 JavaScript 编程中不可或缺的一部分。

Promise 在异步编程中扮演着至关重要的角色。它提供了一种更加清晰和可控的方式来处理异步操作，使得代码更加模块化和易于理解。通过 Promise，我们可以将异步操作的结果和处理逻辑分离，避免回调地狱，并实现更加优雅的代码流控制。

本文的目的是帮助读者深入理解 Promise 的工作原理，掌握其核心方法和特性，并探讨最佳实践。无论您是初学者还是有一定经验的开发者，理解 Promise 都将对您的 JavaScript 编程技能提升大有裨益。我们将从 Promise 的基本概念开始，逐步深入到更高级的应用，让您能够自信地使用 Promise 来构建稳健和高效的异步应用程序。

Promise 基础

Promise 的定义和基本概念

Promise 是一个表示异步操作最终完成或失败的对象。
它代表了某个未来才会知道结果的事件（通常是一个异步操作）。
Promise 是一个包含三种状态的对象：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

Promise 的三种状态

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

Promise 的语法结构

Promise 是一个构造函数，接受一个执行器函数（executor function）作为参数。
执行器函数接受两个参数：resolve 和 reject，它们分别是用来解决和拒绝 Promise 的函数。

创建一个 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  const success = true; // 假设这是异步操作的结果
  if (success) {
    resolve('Operation succeeded');
  } else {
    reject('Operation failed');
  }
});

Promise 的链式调用

Promise 对象的 then 方法返回一个新的 Promise，可以链式调用。
then 方法接受两个可选参数：onFulfilled 和 onRejected。
catch 方法是 then(null, onRejected) 的语法糖。

myPromise
  .then((value) => {
    console.log(value); // 'Operation succeeded'
    return value; // 返回值将传给下一个 then
  })
  .then((value) => {
    console.log(`Chain continues with ${value}`);
  })
  .catch((error) => {
    console.log(error); // 'Operation failed'
  });

Promise 的错误处理：catch 方法

catch 方法用于处理 Promise 中的错误。
如果在链式调用的任何阶段发生错误，都会被 catch 捕获。

myPromise
  .then((value) => {
    console.log(value);
    throw new Error('An error occurred'); // 模拟错误
  })
  .catch((error) => {
    console.log(error.message); // 'An error occurred'
  });

Promise 方法详解

then 方法

then 方法用于注册当 Promise 解决时应调用的回调函数。
它可以接受两个参数：onFulfilled 和 onRejected。
then 返回一个新的 Promise，允许链式调用。

promise.then(onFulfilled, onRejected);

catch 方法

catch 方法用于注册当 Promise 被拒绝时应调用的回调函数。
它是 then(null, onRejected) 的语法糖。
catch 也可以返回一个新的 Promise，继续链式调用。

promise.catch(onRejected);

finally 方法

finally 方法用于注册一个不管 Promise 最终状态如何都会执行的回调函数。
它不接受任何参数，表示不关心 Promise 的结果。
finally 不会改变 Promise 的状态。

promise.finally(onFinally);

Promise.resolve

Promise.resolve 方法返回一个被解决的 Promise。
如果传入的参数是一个 Promise，它会直接返回该 Promise。
如果传入的是非 Promise 值，它会返回一个以该值为解决的 Promise。

Promise.resolve(value);

Promise.reject

Promise.reject 方法返回一个被拒绝的 Promise。
它的行为与 Promise.resolve 类似，但是返回的是被拒绝的 Promise。

Promise.reject(reason);

Promise.all

Promise.all 方法用于并行执行多个 Promise。
它接受一个 Promise 数组作为输入。
只有当所有的 Promise 都解决时，返回的 Promise 才会解决。
如果有一个 Promise 被拒绝，返回的 Promise 会立即被拒绝。

Promise.all([promise1, promise2, promise3]);

Promise.race

Promise.race 方法同样接受一个 Promise 数组作为输入。
它返回一个 Promise，它在任意一个输入的 Promise 解决或拒绝后立即解决或拒绝。

Promise.race([promise1, promise2, promise3]);

Promise.allSettled

Promise.allSettled 方法用于等待所有传入的 Promise 被解决或拒绝。
它返回一个 Promise，当所有输入的 Promise 都被解决或拒绝时，这个 Promise 会解决。
返回的每个结果都是一个对象，包含状态（fulfilled 或 rejected）和相应的值或原因。

Promise.allSettled([promise1, promise2, promise3]);

易混淆点

Promise.all 和 Promise.allSettled 都是JavaScript中用于处理多个Promise对象的函数，但它们的行为和返回结果有所不同。

Promise.all

Promise.all 接受一个Promise对象的数组作为参数。当调用这个函数时，它将等待数组中的所有Promise都解决（fulfilled）或至少有一个被拒绝（rejected）。以下是Promise.all的一些特点：

如果数组中的所有Promise都成功解决，Promise.all 返回一个新的Promise，该Promise解决时的值是一个数组，包含所有输入Promise解决时的值，按照它们在数组中的顺序排列。
如果数组中的任何一个Promise被拒绝，Promise.all 返回的Promise将立即被拒绝，其拒绝的原因与第一个被拒绝的Promise的原因相同。这意味着，一旦有一个Promise失败，Promise.all 将忽略其他Promise的结果。

示例代码：

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 100, 'error'));

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // 输出：[3, 42, 'error']，因为promise3被拒绝
  })
  .catch(error => {
    console.error(error); // 输出：'error'
  });

Promise.allSettled

Promise.allSettled 也接受一个Promise对象的数组作为参数，但它的行为与Promise.all有所不同：

无论数组中的Promise是解决还是被拒绝，Promise.allSettled 都会等待所有Promise都完成（settled），然后解决。
Promise.allSettled 返回的Promise解决时的值是一个数组，其中每个元素是一个对象，描述了每个Promise的结果。每个对象包含两个属性：status 和 value 或 reason。如果Promise解决，status 是 'fulfilled'，value 是解决的值；如果Promise被拒绝，status 是 'rejected'，reason 是拒绝的原因。

示例代码：

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 100, 'error'));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // 输出：
    // [
    //   { status: 'fulfilled', value: 3 },
    //   { status: 'fulfilled', value: 42 },
    //   { status: 'rejected', reason: 'error' }
    // ]
  });

总结：

Promise.all 适合于你需要所有Promise都成功完成的场景，并且任何一个Promise的失败都会中断整个操作。
Promise.allSettled 适合于你需要知道所有Promise的结果，无论它们是成功还是失败的场景。

下面是完整的代码实现：

// then 方法示例：处理 Promise 解决后的结果
const promiseThen = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success'); // 异步操作成功，解决 Promise
  }, 1000);
});

promiseThen
  .then(value => {
    console.log(value); // 'Success'，输出解决后的值
    return value + ' with then'; // 返回修改后的值，链式调用
  })
  .then(value => {
    console.log(value); // 'Success with then'，输出上一步返回的值
  })
  .catch(error => {
    console.log(error); // 如果有任何一步出错，这里会捕获错误
  });

// catch 方法示例：捕获 Promise 被拒绝时的错误
const promiseCatch = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Error'); // 异步操作失败，拒绝 Promise
  }, 1000);
});

promiseCatch
  .then(value => {
    console.log(value);
  })
  .catch(error => {
    console.log(error); // 'Error'，输出拒绝的原因
  });

// finally 方法示例：无论 Promise 成功或失败都会执行
const promiseFinally = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Resolved'); // 异步操作成功，解决 Promise
  }, 1000);
});

promiseFinally
  .then(value => {
    console.log(value); // 'Resolved'，输出解决后的值
  })
  .finally(() => {
    console.log('Finally called'); // 无论成功或失败，这里都会执行
  });

// Promise.resolve 示例：快速创建一个已解决的 Promise
const promiseResolve = Promise.resolve('Resolved immediately');
promiseResolve.then(value => {
  console.log(value); // 'Resolved immediately'，直接输出已解决的值
});

// Promise.reject 示例：快速创建一个已拒绝的 Promise
const promiseReject = Promise.reject('Rejected immediately');
promiseReject.catch(reason => {
  console.log(reason); // 'Rejected immediately'，输出拒绝的原因
});

// Promise.all 示例：并行执行多个 Promise，所有成功后返回结果数组
const promiseAll1 = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise 1'); // 第一个异步操作成功
  }, 1000);
});
const promiseAll2 = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise 2'); // 第二个异步操作成功
  }, 2000);
});

Promise.all([promiseAll1, promiseAll2])
  .then(values => {
    console.log(values); // ['Promise 1', 'Promise 2']，输出所有 Promise 解决后的值
  })
  .catch(error => {
    console.log(error); // 如果有任何 Promise 被拒绝，这里会捕获错误
  });

// Promise.race 示例：多个 Promise 竞争，返回第一个解决或拒绝的 Promise
const promiseRace1 = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise 1'); // 第一个异步操作成功
  }, 1000);
});
const promiseRace2 = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise 2'); // 第二个异步操作成功
  }, 500);
});

Promise.race([promiseRace1, promiseRace2])
  .then(value => {
    console.log(value); // 'Promise 2'，因为它是第一个解决的
  })
  .catch(error => {
    console.log(error); // 如果有任何 Promise 被拒绝，这里会捕获错误
  });

// Promise.allSettled 示例：等待所有 Promise 解决或拒绝，返回每个 Promise 的结果
const promiseAllSettled1 = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise 1'); // 第一个异步操作成功
  }, 1000);
});
const promiseAllSettled2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2'); // 第二个异步操作失败
  }, 500);
});

Promise.allSettled([promiseAllSettled1, promiseAllSettled2])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value); // 'Promise 1'，输出解决后的值
      } else {
        console.log(result.reason); // 'Promise 2'，输出拒绝的原因
      }
    });
  });

Promise 的异步行为

Promise 的异步特性

Promise 是异步编程的一种解决方案，它允许我们在异步操作完成时获取其结果。
Promise 本身并不会立即执行，而是会在当前的同步代码执行完毕后，在下一个事件循环周期中执行。

微任务（microtask）和宏任务（macrotask）

JavaScript 运行时环境将任务分为微任务和宏任务。
宏任务包括脚本执行、定时器回调（如 setTimeout 和 setInterval）、IO 操作等。
微任务包括 Promise 的回调、异步 DOM 操作的回调、process.nextTick（Node.js 环境）等。
微任务的执行时机早于宏任务，且在同一个事件循环周期中，微任务队列会优先清空。

Promise 在事件循环中的执行顺序

当一个 Promise 被解决或拒绝时，其回调函数（then、catch、finally）会被添加到微任务队列中。
如果当前执行栈为空，微任务队列会在下一个事件循环的开始被清空。
这意味着 Promise 的回调函数会在所有同步代码执行完毕后，但在任何新的宏任务开始之前执行。

下面是一个代码示例，展示了 Promise 在事件循环中的执行顺序：

console.log('Script start');

// 微任务示例
Promise.resolve().then(() => {
  console.log('Microtask 1');
});

// 宏任务示例
setTimeout(() => {
  console.log('Macrotask 1');
}, 0);

console.log('Script end');

// 执行顺序：
// Script start
// Script end
// Microtask 1
// Macrotask 1

在这个示例中，尽管 setTimeout 回调被注册在 Promise.resolve().then() 之前，但由于 Promise 回调是微任务，而 setTimeout 回调是宏任务，所以 Promise 的回调会先于 setTimeout 的回调执行。