JavaScript中的Promise与异步编程

描述
Promise是JavaScript中处理异步操作的核心机制，用于解决回调地狱问题。它代表一个异步操作的最终完成（或失败）及其结果值。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），状态一旦改变就不会再变。

循序渐进讲解

1. 为什么需要Promise？

   • 传统回调函数存在嵌套层级过深的问题（回调地狱），例如多个异步操作依赖前一个结果时，代码会变得难以维护。
   • Promise通过链式调用（.then()）将异步操作扁平化，提高可读性。

2. Promise的基本结构

   const promise = new Promise((resolve, reject) => {
     // 异步操作（如请求数据、定时器）
     if (操作成功) {
       resolve(value); // 将状态改为fulfilled，传递结果
     } else {
       reject(error);  // 将状态改为rejected，传递错误原因
     }
   });
   

   • resolve和reject是函数，由JavaScript引擎自动传入。

3. 使用.then()处理成功和失败

   promise.then(
     (value) => { console.log("成功:", value); }, // 状态为fulfilled时执行
     (error) => { console.log("失败:", error); }   // 状态为rejected时执行
   );
   

   • .then()接受两个可选参数（成功回调和失败回调），返回一个新的Promise。

4. 链式调用的原理

   • 每个.then()返回新Promise，其状态由回调函数决定：
     • 若回调返回普通值（如数字、字符串），新Promise直接成功。
     • 若回调返回另一个Promise，则新Promise会"跟随"这个Promise的状态。

   fetchData()
     .then(data => process(data))  // process返回新值或Promise
     .then(result => console.log(result))
     .catch(error => console.error(error)); // 统一捕获链中任何错误
   

5. 错误处理：.catch()与.finally()

   • .catch()捕获链中任意步骤的rejected状态，相当于.then(null, errorCallback)。
   • .finally()无论成功失败都会执行，常用于清理操作（如关闭加载动画）。

6. 静态方法

   • Promise.all([p1, p2, p3])：所有Promise成功时返回结果数组，任一失败立即终止。
   • Promise.race([p1, p2])：取最先改变状态的Promise的结果。
   • Promise.resolve()/Promise.reject()：快速创建成功/失败的Promise。

7. async/await语法糖

   • async函数隐式返回Promise，await可暂停代码执行，直到Promise完成。

   async function fetchData() {
     try {
       const data = await apiCall(); // 等待Promise解决
       return data;
     } catch (error) {
       console.error(error);
     }
   }
   

关键点

• Promise状态不可逆：pending → fulfilled 或 pending → rejected。
• 微任务队列：Promise回调属于微任务，会在当前同步代码执行完毕后立即执行，优先于宏任务（如setTimeout）。