路由侠怎么做网站映射,app与网站的区别功能,飞鸟加速器,wordpress插件如何使用为了向那道光亮奔过去#xff0c;他敢往深渊里跳#xff1b;
于是今天朝着Promise的实现前进吧#xff0c;写了四个小时#xff0c;终于完结撒花#xff1b; 我知道大家没有耐心#xff0c;当然我也坐的腰疼#xff0c;直接上代码#xff0c;跟着我的注释一行行看过去…为了向那道光亮奔过去他敢往深渊里跳
于是今天朝着Promise的实现前进吧写了四个小时终于完结撒花 我知道大家没有耐心当然我也坐的腰疼直接上代码跟着我的注释一行行看过去保证门清
const PENDING pending
const FULFILLED fulfilled
const REJECTED rejected
// 提前封装好一个判断promise的 这里不用instanceof 因为有可能在我们的then的参数中有可能是别人或者自己的promise
const isPromise value {return (!!value (typeof value object || typeof value function) typeof value.then function)
}
class MyPromise {#state PENDING // 当前执行状态#result undefined // 当前结果值#handler [] // 记录成功与失败回调的数组constructor(executor) {const resolve value {// resolve之后去改变当前状态为成功 与当前成功的值this.#changeState(value, FULFILLED)}const reject reason {// reject之后去改变当前状态为失败 与当前错误的值this.#changeState(reason, REJECTED)}try {// 这里直接执行参数中的函数executor(resolve, reject)} catch (error) {console.error(error)// 这里try catch 错误就走rejectreject(error)}}// 将传入的函数放到微队列中去执行#runMicroTask(runTask) {// 如果不兼容promiseif (typeof Promise function) {return Promise.resolve().then(runTask)}// MutationObserver兼容性更好if (typeof MutationObserver function) {const ob new MutationObserver(runTask)const node document.createTextNode()ob.observe(node, { characterData: true })node.data 1return}// 如果是node环境if (process.nextTick typeof process.nextTick function) {process.nextTick(runTask)}} // 改变状态 保存此次的值 并且执行回调#changeState(result, state) {if (this.#state ! PENDING) returnthis.#state statethis.#result resultthis.#run()}// 这里跑每次then后的回调#runOne(callback, resolve, reject) {// 这里主要是为了模拟微任务 都是伪代码this.#runMicroTask(() {// 如果为函数if (typeof callback function) {try {// 拿到函数的返回值const data callback(this.#result)// 如果是promise包括别人封装的promiseif (isPromise(data)) {console.log(data, data)// 如果是promise那就直接去执行.then 函数// 这里需要注意 这个resolve 是给下一个 所以这里这个resolve函数里带有上一次then返回来的值的/* 可以看这里的注释来理解p.then(testMap.promiseTask, err {console.log(第一次err err, err)throw 不好意思}).then(res {return new MyPromise(mySuc {console.log(第二次, res)mySuc(MyPromise的值 res)})},err {console.log(第二次err err, err)})*/data.then(resolve, reject)} else {// 否则就自行resolve 把then(sucreturn 结果值) 就把这个data结果值给下一次调用的then传递过去resolve(data)}} catch (error) {// 不用解释了吧console.error(error)reject(error)}} else {// 如果不是函数 就直接执行resolveconst settled this.#state FULFILLED ? resolve : rejectsettled(this.#result)}})}#run() {if (this.#state PENDING) return/*
把下面的注释拿上来 主要为了能一次看懂不来回跳动
这里做push主要是
const p new MyPromise之后
p.then(resfn1(res))
p.then(resfn2(res))
记录两次 fn1 与fn2
当然如果不是链式调用其实两次的拿到的回调值都是一样的
*/while (this.#handler.length) {// 这里需要注意的是resolve 与reject用的是实际then函数中传递的resolve与reject 不是当前类中的resolveconst { onFulfilled, onRejected, resolve, reject } this.#handler.shift()// 这里主要是为了简化代码 传递了此次this.#runOne(this.#state FULFILLED ? onFulfilled : onRejected,resolve,reject)}}then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) {/*
这里做push主要是
const p new MyPromise之后
p.then(resfn1(res))
p.then(resfn2(res))
记录两次 fn1 与fn2
当然如果不是链式调用其实两次的拿到的回调值都是一样的
*/this.#handler.push({onFulfilled,onRejected,resolve,reject,})this.#run()})}//catch方法的封装 catch 的话直接让它执行错误代码就好了 // 可不要以为有这样的代码比如Promise.catch 没有哈 都是new Promise的回调函数reject执行后的所以这里只要让它有这个 reject方法就行了catch(onRejected) {return this.then(undefined, onRejected)}//resolve方法的封装,凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用//不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.static resolve(value) {//返回结果为Promise对象// 这里呢需要判断他是不是promise resolve中可能是个promise return new MyPromise((resolve, reject) {if (isPromise(value)) {value.then(v {resolve(v)},r {reject(r)})} else {resolve(value)}})}//reject方法的封装 reject都是出错这种明确值所以这里不需要判断 你给啥我给下一个error给啥static reject(value) {return new MyPromise((resolve, reject) {reject(value)})}//all方法的封装static all(promises) {const self thisreturn new MyPromise((resolve, reject) {let length promises.length // 缓存一下有多少个promiselet count 0 // 用于记录resolve的数量let values new Array(length) // 用于存储resolve返回的值for (let i 0; i length; i) {let promise promises[i]// 判断数组的每一项如果是promise就进入then不是就直接放进values数组中返回if (isPromise(promise)) {promise.then(res {// 记录promise完成的数量count// values存储每一个promise的resvalues[i] res// 由于异步代码在最后执行我们需要在then里面判断promise的完成数量全部完成就resolve// 在for外面判断是防止它全部都不是promise实例if (count length) {resolve(values)}}).catch(err {// 当有一个promise实例reject我们就直接rejectreject(err)})} else {// 针对不是promise实例countvalues[i] promise}}// 当数据的所有项都不是promise实例我们就在这判断多一次然后resolveif (count length) {resolve(values)}})}//race方法的封装static race(promises) {return new MyPromise((resolve, reject) {const len promises.lengthfor (let i 0; i len; i 1) {const promise promises[i]// 只要有一条成功则全部成功promise.then(res {resolve(res)},error {resolve(error)})}})}
}
window.MyPromise MyPromiseconst test1 new MyPromise(suc {setTimeout(() suc(成功 p), 1001)
})
const test2 new MyPromise((resolve, reject) {setTimeout(() {reject(3)}, 1000)
})
const test3 new MyPromise(suc {setTimeout(() suc(成功 test3), 1019)
})
MyPromise.all([test2, test1, test3]).then(res {console.log(res all, res)}).catch(res {console.log(error, res)})
MyPromise.race([test2, test1, test3]).then(res {console.log(res race, res)}).catch(res {console.log(error, res)})const catchTest new MyPromise((resolve, reject) {setTimeout(() {reject(catch 测试)}, 1000)
}).catch(error {console.error(error)
})const p new MyPromise((resolve, reject) {setTimeout(() {resolve(3)}, 1000)
})const testMap {promiseTask: res {console.log(第一次 , res)return new Promise(suc {suc(promise方式的res, res)})},funcTask: res {console.log(第一次 , res)return res},// 直接穿透第一次resolve 或者reject 值到下一条then函数中otherTask: 其他,
}p.then(testMap.promiseTask, err {console.log(第一次err err, err)throw 不好意思
}).then(res {return new MyPromise(mySuc {console.log(第二次, res)mySuc(MyPromise的值 res)})},err {console.log(第二次err err, err)}).then(res {console.log(第三次, res)return 第三次的值 res},err {console.log(第三次err err, err)}).then(res {console.log(第四次, res)},err {console.log(第四次err err, err)})
