Promise

Promise 是「未来才能拿到的结果」的容器，彻底解决回调嵌套地狱。它有三种状态：pending（进行中）→ fulfilled（成功）或 rejected（失败），状态一旦改变就不可逆。

创建：new Promise((resolve, reject) => {...})，任务成功调 resolve(值)，失败调 reject(原因)。消费：链式的 .then() 处理成功、.catch() 统一捕获链上任何一环的错误、.finally() 无论成败都执行（常用于关闭 loading）。上一个 then 的返回值会传给下一个 then，因此可以把多个异步操作串成一条直线。

组合工具：Promise.all 全部成功才成功（一个失败整体失败），适合并行发多个请求；Promise.race 谁快用谁，常做超时控制。

本节要点Promise 三状态不可逆；then 链式传递返回值；catch 捕获整条链的错误；Promise.all 并行多个任务。

JavaScript

// 封装一个返回 Promise 的延时函数
function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(() => resolve('等了 ' + ms + ' 毫秒'), ms);
  });
}

// 链式调用：上一个 then 的返回值传给下一个
wait(300)
  .then((msg) => {
    console.log(msg);
    return wait(200);        // 返回新 Promise，继续链
  })
  .then((msg) => console.log('第二段：' + msg))
  .catch((err) => console.log('链上任何一环出错都会到这里：', err))
  .finally(() => console.log('无论成败都执行（比如关闭 loading）'));

// 失败示例
Promise.reject('网络超时').catch((err) => console.log('捕获：' + err));

// 并行：Promise.all 全部完成才回调
Promise.all([wait(100), wait(150)])
  .then(() => console.log('两个任务都完成了'));

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读