(ES6语法 用于异步编程 处理异步操作 常用于 ajax 网络请求等封装。。。)
只包含了 then catch finally
//类Promise构造函数Promis
function Promis(fun) {
//保存传入的参数
// this.saveResolve //resolve 保存参数
// this.saveReject //rejiect 保存参数
// this.haveSaveResolve //有保存resolve值 执行then catch 时判断是 resolve 还是 reject
// this.haveSaveReject //有保存rejiect值 设置两个避免 参数未定义等影响判断
// then 方法
this.then = (resolveFun, rejectFun) => {
//如果是 reject 则不执行 resolveFun 否则有无 resolve 与 reject 都执行 resolveFun
if (!this.haveSaveResolve && this.haveSaveReject) {
//rejectFun存在才执行,与catch 执行步奏一样
if (rejectFun) {
this.haveSaveReject = false;//允许进行存值 相当于重置
let a = rejectFun(this.saveReject)//传入之前的参数
Promis.resolve(a);
}
} else {
//如果还是存在有 resolve 则将参数传入
if (resolveFun) {
this.haveSaveResolve = false; //同样重置
let b = resolveFun(this.saveResolve)
Promis.resolve(b);
}
}
return this //执行完返回 this 继续promis
}
// catch 方法
this.catch = (rejectFun) => {
//如果是reject 才执行 可继续 promis
if (!this.haveSaveResolve && this.haveSaveReject) {
if (rejectFun) {
this.haveSaveReject = false;//允许进行存值 相当于重置
let c = rejectFun(this.saveReject)//传入之前的参数
Promis.resolve(c);
}
}
return this //执行完返回 this 继续promis
}
// finally方法
this.finally = (finallyFun) => {
if (finallyFun) {
finallyFun();
}//没有任何参数,执行完结束不返回 this
return null; //不再 promise
}
// 两个参数都没保存,则能保存一个参数
Promis.resolve = (a) => {
if (!(this.haveSaveResolve || this.haveSaveReject)) {
this.saveResolve = a;
this.saveReject = undefined;
this.haveSaveResolve = true
}
return a;
}
Promis.reject = (a) => {
if (!(this.haveSaveResolve || this.haveSaveReject)) {
this.saveResolve = undefined;
this.saveReject = a;
this.haveSaveReject = true
}
return a;
}
if (fun) {
fun(Promis.resolve, Promis.reject);
}
return this
}
测试
const p1 = new Promis(function (resolve, reject) {
resolve('1 resolve');
console.log('A');
})
p1.then(function (a) {
console.log(a)
return Promis.reject('2 reject');
return 'xxxxxxx'
},
function (a) {
console.log(a)
}).then(
function (a) {
console.log(a);
}).catch(a => {
console.log('err')
return Promis.resolve('3 resolve')
console.log(a);
}).then(function (a) {
console.log(a)
}).finally(function (a) {
console.log(a)
console.log('end');
})
//输出结果:
// A
// 1 resolve
// err
// 3 resolve
// undefined
// end
然后将 Promis 改回 Promise 结果一致
const p2 = new Promise(function (resolve, reject) {
resolve('1 resolve');
console.log('A');
})
p2.then(function (a) {
console.log(a)
return Promise.reject('2 reject');
return 'xxxxxxx'
},
function (a) {
console.log(a)
}).then(
function (a) {
console.log(a);
}).catch(a => {
console.log('err')
return Promise.resolve('3 resolve')
console.log(a);
}).then(function (a) {
console.log(a)
}).finally(function (a) {
console.log(a)
console.log('end');
})
//输出结果:
// A
// 1 resolve
// err
// 3 resolve
// undefined
// end
实际上Promise 需要将 下一步的执行代码加入微任务队列 (queueMicroTask);