一、Promise的使用
在开始写promise之前先写出来一个使用的样例
new Promise((resolve, reject) => {
console.log('初始化');
resolve();
})
.then(() => {
console.log('执行「then」');
throw new Error("出错")
})
.catch(() => {
console.log('执行「catch」');
})
.finally(() => {
console.log("finally")
})
二、创建一个简单的promise方法
function myPromise(exector) {
var _this = this
// 设置默认状态为pending,还有“fulfilled(兑现)”、以及rejected(拒绝)两种状态,状态一旦发生改变将不能在更改
_this.status = "pending"
// 存储值
_this.data = undefined
// 存储待执行的事件队列
_this.onResolvedCallback = []
_this.onRejectedCallback = []
// 执行exector更改状态值
try {
exector(resolve, reject)
// console.log(this, "promise实例话")
} catch (e) {
reject(e)
}
// 定义resolve方法
function resolve(value) {
if (_this.status === "pending") {
_this.status = "resolved"
_this.data = value
// 取出待处理的then,将参数传递,此时当前状态已更改,交由下一个promise处理
for (let i = 0; i < _this.onResolvedCallback.length; i++) {
_this.onResolvedCallback[i](value)
}
}
}
// 定义reject方法
function reject(reason) {
if (_this.status === "pending") {
_this.status = "rejected"
_this.data = reason
for (let i = 0; i < _this.onRejectedCallback.length; i++) {
_this.onRejectedCallback[i](reason)
}
}
}
}
三、给Promise添加then方法
// then执行过后返回一个结果,并将这个结果放入新的Promise中传递下去
myPromise.prototype.then = function (onResolved, onRejected) {
console.log(onResolved, onRejected,this.status)
var _this = this
var self = this
// 判断参数是否是方法,不是按照标准需要被忽略
onResolved = typeof onResolved === "function" ? onResolved : function (value) { return value }
onRejected = typeof onRejected === "function" ? onRejected : function (reason) { throw reason }
if (_this.status === "resolved") {
return new myPromise(function (resolve, reject) {
try {
var res = onResolved(_this.data)
// console.log(this, _this, "....")
if (res instanceof myPromise) {
res.then(resolve, reject)
}
// 继续执行resolve,进而传递参数至下一个then的方法
resolve(res)
} catch (e) {
reject(e)
}
})
}
if (_this.status === "rejected") {
return new myPromise(function (resolve, reject) {
try {
// .then((res)=>{}) 完成这个功能
var x = onRejected(_this.data)
// console.log(x,"==============")
// 这步不太懂
// 如果onResolved的返回值是一个Promise对象,直接取它的结果做为promise2的结果
if (x instanceof myPromise) {
x.then(resolve, reject)
}
} catch (e) {
// 出错的话从这里直接抛出
// 相当于传递给下一个promise的直接是rejected状态的promise
reject(e)
}
})
}
if (_this.status === "pending") {
return promise2 = new myPromise(function (resolve, reject) {
_this.onResolvedCallback.push(function (value) {
try {
var x = onResolved(_this.data)
if (x instanceof myPromise) {
x.then(resolve, reject)
}
} catch (e) {
reject(e)
}
})
_this.onRejectedCallback.push(function (reason) {
try {
var x = onRejected(_this.data)
if (x instanceof myPromise) {
x.then(resolve, reject)
}
} catch (e) {
reject(e)
}
})
})
}
}
四、给Promise添加catch方法
因为then方法可以传递(resolveCb、rejectedCb),而catch其实就是需要执行rejectedCb
myPromise.prototype.catch = function (onRejected) {
return this.then(null, onRejected)
}
总结
实现promise的过程就是这样,如果有不懂的地方可以加上打印,观察每次执行then的时候status的状态,以此来学习怎么实现Promise