Promise ：从基础原理到高级实践

Promise 是 JavaScript 中处理异步操作的核心机制，它解决了传统回调函数（Callback）带来的"回调地狱"（Callback Hell）问题，使异步代码更清晰、可读、可维护。自 ES6（ECMAScript 2015）正式引入以来，Promise 已成为现代前端开发的基石，并为 async/await 语法提供了底层支持。

---

一、为什么需要 Promise？

1.1 回调函数的局限性

在 Promise 出现之前，异步操作主要通过回调函数实现：

// 嵌套回调（回调地狱）
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log(c);
    });
  });
});

问题：

• 代码横向扩展，难以阅读和维护
• 错误处理分散，需在每个回调中重复写 try/catch
• 无法使用 return 或 throw 控制流程
• 多个异步操作的组合（如并行、竞态）实现复杂

1.2 Promise 的优势

• 链式调用 ：通过 .then() 实现线性流程
• 统一错误处理 ：通过 .catch() 捕获整个链中的错误
• 组合能力 ：支持 Promise.all、Promise.race 等高级模式
• 与 async/await 无缝集成

---

二、Promise 基础概念

2.1 什么是 Promise？

Promise 是一个表示异步操作最终完成或失败的对象。

它有三种状态（State）：

• pending（待定） ：初始状态，既不是成功也不是失败
• fulfilled（已成功） ：操作成功完成
• rejected（已失败） ：操作失败

⚠️ 状态不可逆 ：

一旦 Promise 从 pending 变为 fulfilled 或 rejected，状态将永久固定，不能再改变。

2.2 创建 Promise

使用 new Promise(executor) 构造函数：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      resolve('操作成功！'); // 将状态变为 fulfilled
    } else {
      reject(new Error('操作失败！')); // 将状态变为 rejected
    }
  }, 1000);
});

• resolve(value)：标记 Promise 成功，传递结果值
• reject(reason)：标记 Promise 失败，传递错误原因（通常为 Error 对象）

---

三、Promise 的基本用法

3.1 链式调用（Chaining）

通过 .then(onFulfilled, onRejected) 处理结果：

promise
  .then(
    result => {
      console.log('成功:', result); // '操作成功！'
      return result.toUpperCase(); // 返回新值，传递给下一个 then
    },
    error => {
      console.error('失败:', error); // 不会执行（除非上一步 reject）
    }
  )
  .then(transformedResult => {
    console.log('转换后:', transformedResult); // '操作成功！'
  })
  .catch(error => {
    // 捕获链中任何未处理的 reject
    console.error('捕获错误:', error);
  });

✅ 关键规则：

• .then() 总是返回一个新的 Promise
• 若 onFulfilled 返回普通值 → 新 Promise 状态为 fulfilled
• 若 onFulfilled 抛出异常 → 新 Promise 状态为 rejected
• 若 onFulfilled 返回另一个 Promise → 新 Promise 跟随该 Promise 的状态

3.2 错误处理：.catch()

.catch(onRejected) 是 .then(null, onRejected) 的语法糖：

fetchUserData()
  .then(user => processUser(user))
  .then(data => saveToCache(data))
  .catch(error => {
    // 捕获 fetchUserData、processUser 或 saveToCache 中的任何错误
    console.error('操作失败:', error.message);
    showErrorMessage();
  });

📌 最佳实践 ：

在链的末尾使用 .catch() 统一处理错误，避免在每个 .then() 中写错误回调。

---

四、Promise 的高级特性

4.1 静态方法

Promise.resolve(value)

将值转为已成功的 Promise：

Promise.resolve(42).then(v => console.log(v)); // 42
Promise.resolve(Promise.resolve('hello')).then(v => console.log(v)); // 'hello'

Promise.reject(reason)

创建一个已失败的 Promise：

Promise.reject(new Error('Oops!')).catch(e => console.error(e.message));

Promise.all(iterable)

并行执行多个 Promise，全部成功才成功：

const promises = [
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
];

Promise.all(promises)
  .then(results => {
    const [users, posts, comments] = results;
    renderPage(users, posts, comments);
  })
  .catch(error => {
    // 任一请求失败，立即 reject
    console.error('加载失败:', error);
  });

⚠️ 注意 ：若任一 Promise reject，all 立即 reject，其余 Promise 仍会执行但结果被忽略。

Promise.allSettled(iterable)

等待所有 Promise 完成（无论成功或失败）：

Promise.allSettled(promises)
  .then(results => {
    results.forEach((result, i) => {
      if (result.status === 'fulfilled') {
        console.log(`请求 ${i} 成功:`, result.value);
      } else {
        console.error(`请求 ${i} 失败:`, result.reason);
      }
    });
  });

Promise.race(iterable)

返回第一个完成的 Promise（无论成功或失败） ：

const timeout = new Promise((_, reject) =>
  setTimeout(() => reject(new Error('超时')), 5000)
);

Promise.race([fetch('/api/data'), timeout])
  .then(data => console.log('数据:', data))
  .catch(error => console.error('失败或超时:', error));

Promise.any(iterable)（ES2021）

返回第一个成功的 Promise（忽略失败）：

Promise.any([
  Promise.reject('A 失败'),
  Promise.resolve('B 成功'),
  Promise.reject('C 失败')
]).then(value => console.log(value)); // 'B 成功'

❗ 若全部失败，则 reject 一个 AggregateError。

---

五、Promise 与 async/await

async/await 是 Promise 的语法糖，使异步代码看起来像同步代码。

5.1 基本用法

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('错误:', error);
    throw error; // 可选择重新抛出
  }
}

// 调用
fetchData().then(data => console.log(data));

5.2 关键规则

• async 函数总是返回 Promise
• await 只能在 async 函数内使用
• await 后可跟 Promise 或普通值
• 错误可通过 try/catch 捕获

5.3 并行 vs 串行

// ❌ 串行（慢）
async function slow() {
  const a = await fetch('/a');
  const b = await fetch('/b');
  const c = await fetch('/c');
}

// ✅ 并行（快）
async function fast() {
  const [a, b, c] = await Promise.all([
    fetch('/a'),
    fetch('/b'),
    fetch('/c')
  ]);
}

---

六、常见陷阱与最佳实践

6.1 陷阱 1：忘记返回 Promise

// ❌ 错误：第二个 then 无法获取数据
fetch('/api')
  .then(res => res.json())
  .then(data => {
    processData(data); // 忘记 return
  })
  .then(result => {
    console.log(result); // undefined!
  });

// ✅ 正确
fetch('/api')
  .then(res => res.json())
  .then(data => {
    return processData(data); // 显式 return
  });

6.2 陷阱 2：未处理拒绝（Uncaught Rejection）

// ❌ 危险：可能被忽略，导致静默失败
somePromise.then(result => {
  // ...
});

// ✅ 安全：始终处理错误
somePromise
  .then(result => { /* ... */ })
  .catch(error => { /* 处理错误 */ });

🔔 Node.js 提示：未处理的 Promise rejection 会导致进程警告（未来可能终止进程）。

6.3 陷阱 3：在循环中使用 await（串行而非并行）

// ❌ 串行执行（总耗时 = 所有请求时间之和）
for (const url of urls) {
  const data = await fetch(url);
  results.push(data);
}

// ✅ 并行执行（总耗时 ≈ 最长请求时间）
const promises = urls.map(url => fetch(url));
const results = await Promise.all(promises);

6.4 最佳实践

1. 始终处理错误 ：使用 .catch() 或 try/catch
2. 避免嵌套 Promise：使用链式调用或 async/await
3. 明确返回值 ：在 .then() 中显式 return
4. 合理使用组合方法 ：all、race、allSettled
5. 不要混合回调与 Promise：统一异步风格

---

七、Promise 的内部原理（简要）

虽然开发者通常无需实现 Promise，但理解其机制有助于调试：

// 极简 Promise 实现（仅演示思路）
class SimplePromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.callbacks = [];

    const resolve = value => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = value;
      this.callbacks.forEach(cb => cb());
    };

    const reject = reason => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = reason;
      this.callbacks.forEach(cb => cb());
    };

    executor(resolve, reject);
  }

  then(onFulfilled) {
    return new SimplePromise((resolve) => {
      const callback = () => {
        if (this.state === 'fulfilled') {
          const result = onFulfilled(this.value);
          resolve(result);
        }
      };
      if (this.state === 'pending') {
        this.callbacks.push(callback);
      } else {
        callback();
      }
    });
  }
}

📚 真实 Promise 更复杂：需处理微任务队列（Microtask Queue）、thenable 对象、递归解析等。

---

八、在 Vue 3 中的实践

Vue 3 的组合式 API 与 Promise 天然契合：

// composables/useApi.js
import { ref } from 'vue';

export function useApi(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const execute = async () => {
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(res.statusText);
      data.value = await res.json();
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, execute };
}

<script setup>
import { useApi } from '@/composables/useApi';

const { data, loading, error, execute } = useApi('/api/users');
execute();
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">错误: {{ error.message }}</div>
  <ul v-else>
    <li v-for="user in data" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

✅ 优势：逻辑复用、状态管理、错误处理一体化。

---

结语

Promise 是 JavaScript 异步编程的里程碑，它不仅解决了回调地狱问题，还为现代异步语法（async/await）奠定了基础。掌握 Promise 的核心概念、链式调用、错误处理和组合方法，是成为高效前端开发者的必经之路。

记住：

• Promise 是状态机：pending → fulfilled/rejected
• 链式调用是核心 ：每个 .then() 返回新 Promise
• 错误必须处理：避免静默失败
• 组合优于嵌套 ：善用 Promise.all 等静态方法

随着 Web 应用日益复杂，异步操作无处不在。