JavaScript 教程：Promise 基础详解

JavaScript 教程：Promise 基础详解

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是 Promise？

Promise 是 JavaScript 中处理异步操作的核心概念之一。想象你是一位歌手，粉丝们不断询问你新单曲何时发布。为了避免被持续打扰，你承诺在单曲发布时会通知所有订阅的粉丝。这个场景完美类比了 Promise 的工作机制：

• 生产者代码（歌手）：执行耗时操作（如创作歌曲）
• 消费者代码（粉丝）：等待结果
• Promise（订阅列表）：连接两者的媒介

Promise 基本结构

创建 Promise 的语法：

let promise = new Promise(function(resolve, reject) {
  // 执行器函数（executor）
});

执行器函数会立即执行，它包含异步操作代码，并根据结果调用：

• resolve(value) - 操作成功时调用
• reject(error) - 操作失败时调用

Promise 状态机制

每个 Promise 都有内部状态：

1. pending（等待中）：初始状态
2. fulfilled（已兑现）：调用 resolve 后
3. rejected（已拒绝）：调用 reject 后

状态一旦改变就不可逆转：

let promise = new Promise((resolve, reject) => {
  resolve("成功"); // 状态变为 fulfilled
  reject(new Error("失败")); // 被忽略
});

使用 Promise

then 方法

处理 Promise 结果的主要方式：

promise.then(
  result => { /* 处理成功结果 */ },
  error => { /* 处理错误 */ }
);

示例：

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("完成！"), 1000);
});

promise.then(
  result => alert(result), // 1秒后显示"完成！"
  error => alert(error) // 不会执行
);

catch 方法

专门处理错误的简便写法：

promise.catch(error => {
  // 处理错误
});

等同于：

promise.then(null, error => { /* 处理错误 */ });

finally 方法

无论成功失败都会执行的清理逻辑：

promise
  .finally(() => {
    // 清理工作（如隐藏加载指示器）
  })
  .then(result => { /* 处理结果 */ })
  .catch(error => { /* 处理错误 */ });

实际应用示例

脚本加载函数改造

传统回调方式：

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`加载失败: ${src}`));
  document.head.append(script);
}

Promise 改造后：

function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`加载失败: ${src}`));
    document.head.append(script);
  });
}

使用方式：

loadScript("path/to/script.js")
  .then(script => console.log(`${script.src} 已加载`))
  .catch(error => console.error(error));

Promise 的优势

1. 自然顺序：先启动异步操作，再定义处理逻辑
2. 链式调用：可以添加多个处理程序
3. 错误传播：错误可以沿链式调用传递
4. 代码清晰：避免回调地狱（callback hell）

注意事项

1. 执行器函数会立即执行
2. resolve/reject 只能调用一次
3. 建议 reject 时使用 Error 对象
4. 状态改变后添加的处理程序会立即执行

Promise 是现代 JavaScript 异步编程的基石，理解其工作原理对于掌握异步操作至关重要。在后续学习中，我们还会探讨更高级的 Promise 特性如链式调用和组合方法。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info