Promise和异步编程：以电商为例，全方位了解Promise
2023-11-16 13:26:14
Promise 简介
Promise 是 ES6 中引入的一个新的引用数据类型，用于处理异步操作。它提供了一种将异步操作的结果和回调函数相关联的方法，从而可以更轻松地编写异步代码。
Promise 的用法
Promise 的用法非常简单，一般来说，我们会先创建一个 Promise 对象，然后在其中定义一个回调函数。这个回调函数有两个参数，分别是 resolve 和 reject。resolve 用于表示异步操作成功完成，reject 用于表示异步操作失败。
Promise 源码分析
为了更好地理解 Promise 的工作原理，我们来看看它的源码。Promise 源码的开头定义了一个 Promise 构造函数，该函数接收一个回调函数作为参数。这个回调函数的两个参数 resolve 和 reject 是Promise用来通知外部世界异步操作结果的两个方法，在下面对这两个方法进行了进一步的封装。
// Promise 源码
function Promise(executor) {
this.status = 'pending'; // 初始状态为pending
this.value = undefined; // 存储异步操作的结果
this.reason = undefined; // 存储异步操作失败的原因
// resolve 方法，用于表示异步操作成功完成
this.resolve = function(value) {
if (this.status === 'pending') {
this.status = 'fulfilled'; // 将状态改为fulfilled
this.value = value; // 保存异步操作的结果
// 调用成功回调函数
this.onFulfilledCallbacks.forEach(callback => callback(value));
}
};
// reject 方法，用于表示异步操作失败
this.reject = function(reason) {
if (this.status === 'pending') {
this.status = 'rejected'; // 将状态改为rejected
this.reason = reason; // 保存异步操作失败的原因
// 调用失败回调函数
this.onRejectedCallbacks.forEach(callback => callback(reason));
}
};
// onFulfilledCallbacks 存储成功的回调函数
this.onFulfilledCallbacks = [];
// onRejectedCallbacks 存储失败的回调函数
this.onRejectedCallbacks = [];
// 立即执行executor函数，executor函数中会调用resolve或reject方法
executor(this.resolve, this.reject);
}
Promise 的应用
Promise 的应用场景非常广泛，比如：
- AJAX 请求
- DOM 事件处理
- 文件读取
- 定时器
Promise 的优缺点
Promise 的优点：
- 使得异步编程更加清晰和可控
- 可以使用链式调用，让代码更加简洁
- 可以同时处理多个异步操作
Promise 的缺点：
- 增加代码的复杂度
- 可能导致回调地狱
电商购物实例
为了更好地理解 Promise 的用法，我们来看一个电商购物的例子。假设我们有一个电商网站，用户可以浏览商品并将其添加到购物车。当用户点击“结算”按钮时，网站会向服务器发送一个请求，服务器会处理订单并返回结果。
// 购物车页面
const cart = ['商品1', '商品2', '商品3'];
// 点击“结算”按钮
document.getElementById('checkout-button').addEventListener('click', () => {
// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
// 模拟向服务器发送请求
setTimeout(() => {
if (Math.random() > 0.5) {
// 服务器处理订单成功
resolve('订单已成功处理');
} else {
// 服务器处理订单失败
reject('订单处理失败');
}
}, 1000);
});
// 处理 Promise 的结果
promise.then(result => {
// 订单处理成功，显示成功信息
alert(result);
}).catch(error => {
// 订单处理失败，显示失败信息
alert(error);
});
});
在这个例子中，我们使用 Promise 对象来处理向服务器发送请求的操作。当用户点击“结算”按钮时，我们会创建一个 Promise 对象，然后在其中定义一个回调函数。这个回调函数的两个参数 resolve 和 reject 是Promise用来通知外部世界异步操作结果的两个方法。
我们使用 setTimeout 模拟向服务器发送请求，并根据随机数来模拟服务器处理订单成功或失败。如果服务器处理订单成功，我们会调用 resolve 方法，并将结果传递给 then 方法的回调函数。如果服务器处理订单失败，我们会调用 reject 方法，并将错误原因传递给 catch 方法的回调函数。
通过这个例子，我们可以看到 Promise 可以让异步编程变得更加清晰和可控。我们可以使用 Promise 对象来将异步操作和回调函数相关联，从而可以更轻松地编写异步代码。
总结
Promise 是 ES6 中引入的一个新的引用数据类型，用于处理异步操作。它提供了一种将异步操作的结果和回调函数相关联的方法，从而可以更轻松地编写异步代码。Promise 的用法非常简单，我们只需要创建一个 Promise 对象，然后在其中定义一个回调函数。这个回调函数的两个参数 resolve 和 reject 是Promise用来通知外部世界异步操作结果的两个方法。Promise 的应用场景非常广泛，比如：AJAX 请求、DOM 事件处理、文件读取、定时器等。
