作用: Promise 对象,可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
基本结构
Promise对象内部存在三种状态
- Pending (等待态)
- Resolved (成功态)
- Rejected (失败态)
Promise 必须接收一个执行函数(executor)带有两个函数参数(resolved,rejected)
resolve:包裹成功执行成功数据,改变 Promise 状态
reject:失败状态
解决思路_
由于异步代码的结果需要通过回调函数获取,基于结果的其他业务逻辑
就需要卸载回调函数中,所以产生的回调地狱,如果异步代码的执行结果
可以在外部拿到,此时基于结果的其他业务逻辑代码就不需要写在业务逻辑
中了,所以promise所做的事情就是通过语法的方式,让异步代码的结果可以在
外部拿到,此时基于结果的其他业务逻辑就不需要写在回调函数中了,
就避免了回调函数嵌套的问题
_
基本实现
class Promise {
constructor(executor) {
// 参数检验
if (typeof executor !== 'function') {
throw new TypeError(`Promise resolver ${executor} is a not funtion`);
}
this.value = null; //终值
this.reason = null; //拒因
this.state = 'pending'; //状态
// 定义resolve函数
function resolve(value) {
// 成功后的一系列操作(状态的改变,成功回调的执行)
if (this.status === 'pending') {
this.status = 'fulfilled';
this.value = value;
}
}
// 定义reject函数
function reject(reason) {
// 失败后的一系列操作(状态改变,失败回调的执行)
if (this.status === 'pending') {
this.status = 'rejected';
this.reason = reason; //拒因
}
}
// 使用 try...catch... 捕捉代码执行过程中可能抛出的异常
try {
// 执行器默认会立即执行
executor(resolve, reject);
} catch (e) {
// 如果执行时发生错误(包括手动抛出的异常),等同于执行失败
reject(e);
}
}
}
Promise.prototype.then = function (onFufiled, onRejected) {
let self = this;
if (self.status === 'resolved') {
onFufiled(self.value);
}
if (self.status === 'rejected') {
onRejected(self.reason);
}
};
Promise.all和Promise.race
Promise.all
需要同时返回多个请求的数据时