共计 5672 个字符，预计需要花费 15 分钟才能阅读完成。
从零手写 Promise
- 在这个前端疾速倒退的时代，明天不致力，今天变垃圾，尽管这是一个表情包上看到的，置信大家肯定都看过，说切实的，这话是粗，然而事实就是如此。
- 言归正传咱们看看明天的内容把。
- 上次咱们看了 js 的重点也是难点“异步”，趁热打铁，明天看看从零手写 Promise
咱们先看看代码
首先咱们先来回顾一下 Promise 的用法
new Promise((resolve,reject)=>{resolve('正确的')
}).then(value =>{console.log(value);
})- 能够看的到在浏览器打印出了 “ 正确的 ”
Promise的用法并不难，咱们只有晓得new Promise给Promise传入function(resolve，reject), 接着在函数内做须要做的事件即可，等到须要的时候，对这个构造函数.then(res=>{})即可获取对应的值
上面咱们就来剖析一下 Promise 应该如何实现
- 首先咱们应该定义一个 Promise 的构造
- 本文认为 es5 的形式
(function (window) {function MyPromise(executor) { // 1 定义 MyPromise 构造函数
function resolve(value) {// 定义 resolve}
function reject(reason) {// 定义 reject}
MyPromise.prototype.then = function (onResolved,onRejected) {// 定义 then}
MyPromise.prototype.catch = function (error) {// 定义 catch}
// 定义执行器的执行
executor(resolve,reject);
}
window.MyPromise = MyPromise; // 2 导出
})(window)- 接着能够看看上面的执行
(function (window) {
// Promise
function Mypromise(executor) {
const self = this; // 须要定义一下 this 指向
self.status = 'pennding'; // 初始化状态
self.data = undefined; // promise 对象指定一个用于存储后果数据
self.callbacks = []; // 每个元素的构造 { onResolved(){}，onRejected(){}}
function resolve(value) { // resolve
if (self.status !== 'pennding') { // 因为 promise 状态只能批改一次
return;
}
self.status = 'resolve'; // 扭转为 resolve
self.data = value; // 保留 value 的值
if (self.callbacks.length > 0) { // 如果有待执行的 callback 函数，立刻执行回调函数 onResolved
setTimeout(() => { // 以后计划是为了将工作挂在队列中，制作异步
self.callbacks.forEach(callbacksObj => {callbacksObj.onResolved(value)
})
},0)
}
}
function reject(reason) { //reject
if (self.status !== 'pennding') { // 因为 promise 状态只能批改一次
return;
}
self.status = 'reject'; // 扭转为 reject
self.data = reason; // 保留 reason 的值
if (self.callbacks.length > 0) { // 如果有待执行的 callback 函数，立刻执行回调函数 onRejected
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {callbacksObj.onRejected(reason)
})
},0)
}
}
try { // 如果执行器抛出异样
executor(resolve, reject);
} catch (error) {reject(error)
}
}
// Promise.then()
Mypromise.prototype.then = function (onResolved, onRejected) {
// 假如以后状态还是 pennding
const self = this;
self.callbacks.push({
onResolved,
onRejected
})
}
// Promise.catch()
Mypromise.prototype.carch = function (error) { }
window.Mypromise = Mypromise;
})(window);<body>
<script src="./promise.js"></script>
<script>
const p = new Mypromise((resolve, reject) => {setTimeout(() => { // 因为拆分 then 还未解决，须要 p.then 先执行
resolve(1)
console.log("我先")
}, 100)
})
p.then(value => {console.log("onResolve()1", value)
}, reason => {console.l("onReject()1", reason)
})
p.then(value => {console.log("onResolve()2", value)
}, reason => {console.l("onReject()2", reason)
})
</script>
</body>
- 能够看的到执行构造是异步的，第一步胜利了。
下面的代码咱们来解说一下，
- 1、首先是通过 es5 写的，所以须要导出咱们应用了 闭包
- 2、创立 Promise 构造函数 并导出
- 3、咱们应用 promise 时都晓得往里面传入一个函数，这个函数带有 resolve，reject 并且在函数外面执行须要执行的操作，
所以这个承受的参数叫做执行器（executor）
- 4、执行器里执行的是两个函数
- 5、咱们都晓得 promise 有三个状态其中初始化时 pendding
- 6、依据
resolve，reject扭转状态，扭转值
- 7、咱们都晓得 promise 构造函数还有 then 办法和 catch 办法
- 8、别忘了 promise 也能够 throw Error，所以执行器 (executor) 须要批改一下
- 9、最初调用并执行看看后果
<body>
<script src="./promise1.js"></script>
<script>
const p = new MyPromise((resolve, reject) => {setTimeout(() => { // 因为拆分起因 then 还未做对应解决，此时不能扭转状态
resolve(1)
console.log("我先")
}, 100)
})
p.then(value => {console.log("onResolve()1", value)
}, reason => {console.l("onReject()1", reason)
})
p.then(value => {console.log("onResolve()2", value)
}, reason => {console.l("onReject()2", reason)
})
</script>
</body>
- 怎么后果不对呢
- 再来看看 因为间接执行的回调是同步执行的，须要将工作放入队列中
- 此时后果正确了。
- 最初别忘了 promise 状态只容许批改一次
- 好的下面是简易版的 Promise 并不包含 then 的实现。
接下来咱们在下面的根底对 then 以及整体进行了一个降级
- 代码如下
(function (window) {
const PENDDING = 'pendding';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
function MyPromise(executor) { // 定义 MyPromises 构造函数
const self = this;
self.status = PENDDING;
self.data = undefined;
self.callbacks = [];
function resolve(value) {if (self.status === PENDDING) {
self.status = FULFILLED; // 扭转 MyPromise 状态
self.data = value; // MyPromise 的值对应变动
setTimeout(() => { // 异步执行
self.callbacks.forEach(callbacksObj => { // 如果有待执行的 callback 函数，立刻执行回调
callbacksObj.onResolved(value)
})
})
}
}
function reject(reason) {if (self.status === PENDDING) {
self.status = REJECTED;
self.data = reason;
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {callbacksObj.onRejected(reason);
});
})
}
}
try { // MyPromise 能够抛出异样
executor(resolve, reject);
} catch (error) {reject(error)
}
}
/*
MyPromise 原型对象的 then()
指定胜利和失败回调
返回一个新的回调函数
// 返回的 MyPromise 后果由 onResolved/onRejected 的后果决定
*/
MyPromise.prototype.then = function (onResolved, onRejected) { // 定义 then
const self = this;
// 指定回调函数的默认值(必须是函数)
onResolved = typeof onResolved==='function' ? onResolved : value => value;
onRejected = typeof onRejected==='function' ? onRejected : reason => {throw reason};
return new MyPromise((resolve,reject)=>{ // 返回一个新的 MyPromise 对象
function handle(callback) {
// 返回的 MyPromise 后果由 onResolved/onRejected 的后果决定
// 1、抛出异样 MyPromise 后果为失败 reason 为后果
// 2、返回的是 MyPromise MyPromise 为以后的后果
// 3、返回的不是 MyPromise value 为后果
// 须要通过捕捉获取能力晓得有没有异样
try{const result = callback(self.data)
// 判断是不是 MyPromise
if (result instanceof MyPromise){
// 只有 then 才晓得后果
result.then(value=>resolve(value),reason=>reject(reason))
}else{resolve(result)
}
}catch(error){reject(error) // 返回的后果为 reject(error) 下面第一点
}
}
// 判断以后的 status
if (self.status === FULFILLED){ // 状态为 fulfilled
setTimeout(()=>{ // 立刻执行异步回调
handle(onResolved);
})
} else if (self.status === REJECTED){ // 状态为 rejected
setTimeout(()=>{ // 立刻执行异步回调
handle(onRejected);
})
}else{ // pendding 将胜利和失败保留到 callbacks 里缓存起来
self.callbacks.push({onResolved(value){ // 函数外面调用回调函数 并且依据回调函数的后果扭转 MyPromise 的后果
handle(onResolved) // 为什么这里没有 setTimeout，因为下面曾经写到过扭转状态后回去 callbacks 里循环待执行的回调函数
},
onRejected(reason){handle(onRejected)
}
})
}
})
}
MyPromise.prototype.catch = function (onRejected) { // 定义 then
return this.then(undefined,onRejected)
}
window.MyPromise = MyPromise; // 导出 MyPromise
})(window)- 置信大家看到这个代码跟我是一样的反馈，我去，怎么跟之前不一样了
- 实际上当我入手去实现了手写 Promise 当前我感觉真的并不难，如果要说难这个 then 的实现，略微比下面难一些。
- 好了接下来我解说一下
- 1、首先是在原来的根底下来定义了一些常量方便使用
- 2、要晓得 Promise.then 返回的是什么
- 3、接着判断一下状态
- 4、好的接下来咱们对相应的状态进行操作
- 5、能够看到 pendding 状态是没有增加定时器的，为什么不是异步呢，因为是往 callbacks 存储，而后下面执行到对应地位会进行循环判断，且在循环操作时是异步的，，欠缺 pendding
- 6、后面的代码能够看得出有四个地位代码类似度很高, 所以定义一个函数，进行封装(留神要在 new Promise 里)
- 7、再设置一下默认值
- 8、再来欠缺一下 catch
接下来咱们进行测试
- 看来没为什么问题
- 再来试试
catch
- 老手第一次写的还是不怎么样，然而每一步都是通过本人是如何学，实实在在的敲进去的，心愿可能帮忙到和我一样想学好 promise 的敌人。从开始的很难到前面能间接写进去，其实破费的工夫还是不少的，然而收货颇丰啊。
正文完