JavaScript 教程：深入理解 Promise 链式调用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00459/article/details/148416526

JavaScript 教程：深入理解 Promise 链式调用

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是 Promise 链式调用？

Promise 链式调用是 JavaScript 中处理异步操作的一种优雅方式。它允许我们将多个异步操作按顺序连接起来，每个操作在前一个操作完成后执行，形成一条清晰的执行链。

基本 Promise 链示例

让我们从一个简单的例子开始：

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // 1秒后解析为1
})
.then(function(result) {
  console.log(result); // 1
  return result * 2; // 返回2
})
.then(function(result) {
  console.log(result); // 2
  return result * 2; // 返回4
})
.then(function(result) {
  console.log(result); // 4
});

这个例子展示了 Promise 链的基本工作原理：

初始 Promise 在1秒后解析为1
第一个 .then() 接收1，返回2
第二个 .then() 接收2，返回4
第三个 .then() 接收4并打印

Promise 链的核心机制

1. 每个 `.then()` 返回一个新的 Promise

Promise 链的关键在于每个 .then() 调用都会返回一个新的 Promise，这使得我们可以继续在它上面调用 .then()。

2. 值的传递

前一个 .then() 处理程序的返回值会作为参数传递给下一个 .then() 的处理程序。

3. 异步操作的顺序执行

Promise 链确保了异步操作按顺序执行，前一个操作完成后才会开始下一个操作。

常见误区

初学者常犯的一个错误是尝试在同一个 Promise 上添加多个 .then() 处理程序：

let promise = new Promise(resolve => {
  setTimeout(() => resolve(1), 1000);
});

promise.then(result => {
  console.log(result); // 1
  return result * 2;
});

promise.then(result => {
  console.log(result); // 1 (不是2)
});

这不是链式调用，而是为同一个 Promise 添加了多个独立的处理程序，它们都会收到相同的初始值1。

高级用法：返回 Promise

.then() 处理程序不仅可以返回普通值，还可以返回另一个 Promise：

new Promise(resolve => {
  setTimeout(() => resolve(1), 1000);
})
.then(result => {
  console.log(result); // 1
  return new Promise(resolve => {
    setTimeout(() => resolve(result * 2), 1000);
  });
})
.then(result => {
  console.log(result); // 2
});

这种模式特别适合需要顺序执行多个异步操作的场景。

实际应用：脚本加载

让我们看一个更实际的例子 - 按顺序加载多个脚本：

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(`Script load error for ${src}`));
    document.head.append(script);
  });
}

loadScript('first.js')
  .then(script => loadScript('second.js'))
  .then(script => loadScript('third.js'))
  .then(script => {
    // 所有脚本加载完成
    firstFunction();
    secondFunction();
  });

这种链式结构比传统的回调嵌套（"回调地狱"）要清晰得多。

Thenable 对象

JavaScript 中的 Promise 系统非常灵活，任何具有 .then() 方法的对象（称为 Thenable）都可以被当作 Promise 处理：

class Thenable {
  constructor(value) {
    this.value = value;
  }
  then(resolve) {
    setTimeout(() => resolve(this.value * 2), 1000);
  }
}

new Promise(resolve => resolve(1))
  .then(result => new Thenable(result))
  .then(console.log); // 2 (1秒后)

这个特性使得我们可以创建与 Promise 兼容的自定义异步对象。

综合示例：用户数据获取

让我们看一个更完整的例子，结合网络请求和数据处理：

// 获取用户JSON数据
fetch('/user.json')
  .then(response => response.json())
  // 获取GitHub用户信息
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  // 显示用户头像
  .then(githubUser => {
    return new Promise(resolve => {
      let img = document.createElement('img');
      img.src = githubUser.avatar_url;
      document.body.append(img);
      
      setTimeout(() => {
        img.remove();
        resolve(githubUser);
      }, 3000);
    });
  })
  // 头像显示完成后执行
  .then(githubUser => {
    console.log(`Finished showing ${githubUser.name}`);
  });

这个例子展示了如何：