到目前为止，我们处理的都是同步代码——代码从上到下一行行执行，简单直接。但 JavaScript 的世界中，大量操作都是异步的，比如网络请求（AJAX）、文件读取、定时器等。它们不会阻塞主线程，而是在未来的某个时刻才返回结果。
在 ES6 之前，我们处理异步的唯一方式就是回调函数。当一个异步操作需要依赖另一个的结果时，灾难就降临了。
一、回忆杀：噩梦般的回调地狱 (Callback Hell)
假设我们需要依次请求三个接口：获取用户信息 -> 根据用户信息获取其帖子列表 -> 根据帖子 ID 获取评论。
【过去我们这么写 (ES5 - 以 jQuery Ajax 为例)】
$.ajax({
url: 'api/user/1',
success: function(user) {
console.log('第一步：获取到用户', user.name);
// 成功后，发起第二个请求
$.ajax({
url: 'api/posts/' + user.id,
success: function(posts) {
console.log('第二步：获取到帖子', posts.length, '篇');
// 成功后，发起第三个请求
$.ajax({
url: 'api/comments/' + posts[0].id,
success: function(comments) {
console.log('第三步：获取到评论');
// 如果还有第四步、第五步...
},
error: function(err) {
console.error('获取评论失败', err);
}
});
},
error: function(err) {
console.error('获取帖子失败', err);
}
});
},
error: function(err) {
console.error('获取用户失败', err);
}
});
这种向右无限延伸的“金字塔”结构，就是臭名昭著的“回调地狱”。它有三大罪状：
- 可读性极差：代码逻辑混乱，难以理解。
- 难以维护：修改其中一个环节，可能导致整个逻辑链的崩溃。
- 错误处理分散：每个异步操作都需要单独处理错误，代码冗余。
为了将开发者从地狱中解救出来，ES6 带来了官方的异步解决方案——Promise。
二、进化时刻：Promise 登场
Promise 的中文意思是“承诺”。你可以把它想象成一张“承诺回执单”。
当你执行一个异步操作时，它不会立即给你结果，而是先给你一张“回执单”（即 Promise 对象）。这张单子向你承诺：“我将来一定会给你一个结果，要么是成功的结果，要么是失败的原因。”
一个 Promise 对象有三种状态：
- Pending (进行中)：初始状态，承诺还在兑现中。
- Fulfilled (已成功)：操作成功完成，承诺已兑现。
- Rejected (已失败)：操作失败，承诺被拒绝。
这个状态是单向的，一旦从 pending 变为 fulfilled 或 rejected，就再也不会改变。
三、如何使用 Promise？
现代的异步 API（如 fetch）天生就返回 Promise。我们先来学习如何“消费”一个 Promise。
1. .then() - 接收成功的结果
.then() 方法用于指定当 Promise 状态变为 fulfilled (成功) 时，应该执行什么操作。
2. .catch() - 捕获失败的原因
.catch() 方法用于指定当 Promise 状态变为 rejected (失败) 时，应该执行什么操作。
【现在我们这么写 (ES6+ - 以 fetch 为例)】
fetch 是浏览器内置的、基于 Promise 的网络请求 API。
fetch('api/user/1') // fetch 返回一个 Promise
.then(response => {
// 第一个 .then 处理 HTTP 响应
if (!response.ok) {
throw new Error('网络响应错误');
}
return response.json(); // .json() 也返回一个 Promise
})
.then(user => {
// 第二个 .then 处理 JSON 数据
console.log('成功获取到用户:', user);
})
.catch(error => {
// 统一处理所有错误
console.error('请求过程中发生错误:', error);
});
四、Promise 的真正威力：链式调用
Promise 最强大的地方在于，它将“回调地狱”拉平成了一条直线，形成优雅的链式调用。
.then() 或 .catch() 方法执行后，它自身也会返回一个新的 Promise 对象，这使得我们可以像工厂流水线一样，将一系列异步操作串联起来。
现在，我们用 Promise 来重构开头的那个“地狱”：
(假设我们已经把 $.ajax 封装成返回 Promise 的函数 ajaxPromise)
【现在我们这么写 (ES6+)】
ajaxPromise('api/user/1')
.then(user => {
console.log('第一步：获取到用户', user.name);
// 返回一个新的 Promise，交给下一个 .then 处理
return ajaxPromise('api/posts/' + user.id);
})
.then(posts => {
console.log('第二步：获取到帖子', posts.length, '篇');
return ajaxPromise('api/comments/'' + posts[0].id);
})
.then(comments => {
console.log('第三步：获取到评论');
})
.catch(err => {
// 统一的错误处理！
// 链条中任何一个环节出错，都会被这个 catch 捕获
console.error('链式调用中发生错误:', err);
});
看到了吗？原本横向发展的“金字塔”，现在变成了纵向发展的“流水线”。代码结构清晰，逻辑一目了然，并且错误处理也变得非常简单、集中。
总结
- Promise 是处理异步操作的对象，它代表一个未来的结果。
- 它通过链式调用，完美地解决了回调地狱问题。
- 使用
.then()处理成功，使用.catch()统一处理失败。 .then()中可以返回一个新的 Promise，从而将异步操作串联起来。
Promise 的出现，是 JavaScript 异步编程史上的一座里程碑。但进化并未停止。ES7 带来了 async/await，它能让异步代码看起来就像同步代码一样简洁。
在下一篇，我们将迎来异步编程的终极形态！敬请期待！