对于手写 Promise,想必大家都非常相熟。基本上当初不论是大厂还是小厂,手写 promise 曾经成为了面试必考知识点。据说你还不太会?那么走着,带你从零开始解锁 Promise!
查看残缺代码请戳:github.com/qiruohan/article
常见 Promise 面试题
首先,咱们以常见的 Promise 面试题为切入点,咱们看看面试官们都爱考什么:
- Promise 解决了什么问题?
- Promise 的业界实现都有哪些?
- Promise 罕用的 API 有哪些?
- 能不能手写一个合乎 Promise/A+ 标准的 Promise?
- Promise 在事件循环中的执行过程是怎么的?
- Promise 有什么缺点,能够如何解决?
这几个问题由浅入深,咱们一个一个来看:
Promise 呈现的起因 & 业界实现
在 Promise 呈现以前,在咱们解决多个异步申请嵌套时,代码往往是这样的。。。
let fs = require('fs')
fs.readFile('./name.txt','utf8',function(err,data){fs.readFile(data, 'utf8',function(err,data){fs.readFile(data,'utf8',function(err,data){console.log(data);
})
})
})
为了拿到回调的后果,咱们必须一层一层的嵌套,能够说是相当恶心了。而且基本上咱们还要对每次申请的后果进行一系列的解决,使得代码变的更加难以浏览和难以保护,这就是传说中臭名远扬的 回调天堂~
产生 回调天堂 的起因归纳起来有两点:
- 嵌套调用,第一个函数的输入往往是第二个函数的输出;
- 解决多个异步申请并发,开发时往往须要同步申请最终的后果。
起因剖析进去后,那么问题的解决思路就很清晰了:
- 毁灭嵌套调用:通过 Promise 的链式调用能够解决;
- 合并多个工作的申请后果:应用 Promise.all 获取合并多个工作的错误处理。
Promise 正是用一种更加敌对的代码组织形式,解决了异步嵌套的问题。
咱们来看看下面的例子用 Promise 实现是什么样的:
let fs = require('fs')
function read(filename) {return new Promise((resolve, reject) => {fs.readFile(filename, 'utf8', (err, data) => {if (err) reject(err);
resolve(data);
})
})
}
read('./name.txt').then((data)=>{return read(data)
}).then((data)=>{return read(data)
}).then((data)=>{console.log(data);
},err=>{console.log(err);
})
臃肿的嵌套变得线性多了有木有?没错,他就是咱们的异步神器 Promise!
让咱们再次回归方才的问题,Promise 为咱们解决了什么问题? 在传统的异步编程中,如果异步之间存在依赖关系,就须要通过层层嵌套回调的形式满足这种依赖,如果嵌套层数过多,可读性和能够维护性都会变得很差,产生所谓的“回调天堂”,而 Promise 将嵌套调用改为链式调用,减少了可浏览性和可维护性。也就是说,Promise 解决的是异步编码格调的问题。那 Promise 的业界实现都有哪些呢? 业界比拟驰名的实现 Promise 的类库有 bluebird、Q、ES6-Promise。
从零开始,手写 Promise
Promise/A+
咱们想要手写一个 Promise,就要遵循 Promise/A+ 标准,业界所有 Promise 的类库都遵循这个标准。
其实 Promise/A+ 标准对如何实现一个符合标准的 Promise 类库曾经论述的很具体了。每一行代码在 Promise/A+ 标准中都有迹可循,所以在上面的实现的过程中,我会尽可能的将代码和 Promise/A+ 标准一一对应起来。
上面开始步入正题啦~
根底版 Promise
咱们先来回顾下最简略的 Promise 应用形式:
const p1 = new Promise((resolve, reject) => {console.log('create a promise');
resolve('胜利了');
})
console.log("after new promise");
const p2 = p1.then(data => {console.log(data)
throw new Error('失败了')
})
const p3 = p2.then(data => {console.log('success', data)
}, err => {console.log('faild', err)
})
控制台输入:
"create a promise"
"after new promise"
"胜利了"
"faild Error: 失败了"
- 首先咱们在调用 Promise 时,会返回一个 Promise 对象。
- 构建 Promise 对象时,须要传入一个 executor 函数,Promise 的次要业务流程都在 executor 函数中执行。
- 如果运行在 excutor 函数中的业务执行胜利了,会调用 resolve 函数;如果执行失败了,则调用 reject 函数。
- Promise 的状态不可逆,同时调用 resolve 函数和 reject 函数,默认会采取第一次调用的后果。
以上简略介绍了 Promise 的一些次要的应用办法,联合 Promise/A+ 标准,咱们能够剖析出 Promise 的基本特征:
- promise 有三个状态:
pending
,fulfilled
,orrejected
;「标准 Promise/A+ 2.1」new promise
时,须要传递一个executor()
执行器,执行器立刻执行;executor
承受两个参数,别离是resolve
和reject
;- promise 的默认状态是
pending
;- promise 有一个
value
保留胜利状态的值,能够是undefined/thenable/promise
;「标准 Promise/A+ 1.3」- promise 有一个
reason
保留失败状态的值;「标准 Promise/A+ 1.5」- promise 只能从
pending
到rejected
, 或者从pending
到fulfilled
,状态一旦确认,就不会再扭转;- promise 必须有一个
then
办法,then 接管两个参数,别离是 promise 胜利的回调 onFulfilled, 和 promise 失败的回调 onRejected;「标准 Promise/A+ 2.2」- 如果调用 then 时,promise 曾经胜利,则执行
onFulfilled
,参数是promise
的value
;- 如果调用 then 时,promise 曾经失败,那么执行
onRejected
, 参数是promise
的reason
;- 如果 then 中抛出了异样,那么就会把这个异样作为参数,传递给下一个 then 的失败的回调
onRejected
;
依照下面的特色,咱们试着勾画下 Promise 的形态:
// 三个状态:PENDING、FULFILLED、REJECTED
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class Promise {constructor(executor) {
// 默认状态为 PENDING
this.status = PENDING;
// 寄存胜利状态的值,默认为 undefined
this.value = undefined;
// 寄存失败状态的值,默认为 undefined
this.reason = undefined;
// 调用此办法就是胜利
let resolve = (value) => {
// 状态为 PENDING 时才能够更新状态,避免 executor 中调用了两次 resovle/reject 办法
if(this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
}
}
// 调用此办法就是失败
let reject = (reason) => {
// 状态为 PENDING 时才能够更新状态,避免 executor 中调用了两次 resovle/reject 办法
if(this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
}
}
try {
// 立刻执行,将 resolve 和 reject 函数传给使用者
executor(resolve,reject)
} catch (error) {
// 产生异样时执行失败逻辑
reject(error)
}
}
// 蕴含一个 then 办法,并接管两个参数 onFulfilled、onRejected
then(onFulfilled, onRejected) {if (this.status === FULFILLED) {onFulfilled(this.value)
}
if (this.status === REJECTED) {onRejected(this.reason)
}
}
}
写完代码咱们能够测试一下:
const promise = new Promise((resolve, reject) => {resolve('胜利');
}).then((data) => {console.log('success', data)
},
(err) => {console.log('faild', err)
}
)
控制台输入:
"success 胜利"
当初咱们曾经实现了一个根底版的 Promise,然而还不要快乐的太早噢,这里咱们只解决了同步操作的 promise。如果在 executor()
中传入一个异步操作的话呢,咱们试一下:
const promise = new Promise((resolve, reject) => {
// 传入一个异步操作
setTimeout(() => {resolve('胜利');
},1000);
}).then((data) => {console.log('success', data)
},
(err) => {console.log('faild', err)
}
)
执行测试脚本后发现,promise 没有任何返回。
因为 promise 调用 then 办法时,以后的 promise 并没有胜利,始终处于 pending 状态。所以如果当调用 then 办法时,以后状态是 pending,咱们须要先将胜利和失败的回调别离寄存起来,在 executor()
的异步工作被执行时,触发 resolve 或 reject,顺次调用胜利或失败的回调。
联合这个思路,咱们优化一下代码:
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class Promise {constructor(executor) {
this.status = PENDING;
this.value = undefined;
this.reason = undefined;
// 寄存胜利的回调
this.onResolvedCallbacks = [];
// 寄存失败的回调
this.onRejectedCallbacks= [];
let resolve = (value) => {if(this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
// 顺次将对应的函数执行
this.onResolvedCallbacks.forEach(fn=>fn());
}
}
let reject = (reason) => {if(this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
// 顺次将对应的函数执行
this.onRejectedCallbacks.forEach(fn=>fn());
}
}
try {executor(resolve,reject)
} catch (error) {reject(error)
}
}
then(onFulfilled, onRejected) {if (this.status === FULFILLED) {onFulfilled(this.value)
}
if (this.status === REJECTED) {onRejected(this.reason)
}
if (this.status === PENDING) {
// 如果 promise 的状态是 pending,须要将 onFulfilled 和 onRejected 函数寄存起来,期待状态确定后,再顺次将对应的函数执行
this.onResolvedCallbacks.push(() => {onFulfilled(this.value)
});
// 如果 promise 的状态是 pending,须要将 onFulfilled 和 onRejected 函数寄存起来,期待状态确定后,再顺次将对应的函数执行
this.onRejectedCallbacks.push(()=> {onRejected(this.reason);
})
}
}
}
测试一下:
const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('胜利');
},1000);
}).then((data) => {console.log('success', data)
},
(err) => {console.log('faild', err)
}
)
控制台期待 1s
后输入:
"success 胜利"
ok!功败垂成,异步问题曾经解决了!
相熟设计模式的同学,应该意识到了这其实是一个 公布订阅模式 ,这种 收集依赖 -> 触发告诉 -> 取出依赖执行
的形式,被宽泛使用于公布订阅模式的实现。
then 的链式调用 & 值穿透个性
咱们都晓得,promise 的劣势在于能够链式调用。在咱们应用 Promise 的时候,当 then 函数中 return 了一个值,不论是什么值,咱们都能在下一个 then 中获取到,这就是所谓的 then 的链式调用。而且,当咱们不在 then 中放入参数,例:promise.then().then()
,那么其前面的 then 仍旧能够失去之前 then 返回的值,这就是所谓的 值的穿透。那具体如何实现呢?简略思考一下,如果每次调用 then 的时候,咱们都从新创立一个 promise 对象,并把上一个 then 的返回后果传给这个新的 promise 的 then 办法,不就能够始终 then 上来了么?那咱们来试着实现一下。这也是手写 Promise 源码的重中之重,所以,打起精神来,重头戏来咯!
有了下面的想法,咱们再联合 Promise/A+ 标准梳理一下思路:
- then 的参数
onFulfilled
和onRejected
能够缺省,如果onFulfilled
或者onRejected
不是函数,将其疏忽,且仍旧能够在上面的 then 中获取到之前返回的值;「标准 Promise/A+ 2.2.1、2.2.1.1、2.2.1.2」- promise 能够 then 屡次,每次执行完 promise.then 办法后返回的都是一个“新的 promise”;「标准 Promise/A+ 2.2.7」
- 如果 then 的返回值 x 是一个一般值,那么就会把这个后果作为参数,传递给下一个 then 的胜利的回调中;
- 如果 then 中抛出了异样,那么就会把这个异样作为参数,传递给下一个 then 的失败的回调中;「标准 Promise/A+ 2.2.7.2」
- 如果 then 的返回值 x 是一个 promise,那么会等这个 promise 执行完,promise 如果胜利,就走下一个 then 的胜利;如果失败,就走下一个 then 的失败;如果抛出异样,就走下一个 then 的失败;「标准 Promise/A+ 2.2.7.3、2.2.7.4」
- 如果 then 的返回值 x 和 promise 是同一个援用对象,造成循环援用,则抛出异样,把异样传递给下一个 then 的失败的回调中;「标准 Promise/A+ 2.3.1」
- 如果 then 的返回值 x 是一个 promise,且 x 同时调用 resolve 函数和 reject 函数,则第一次调用优先,其余所有调用被疏忽;「标准 Promise/A+ 2.3.3.3.3」
咱们将代码补充残缺:
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
const resolvePromise = (promise2, x, resolve, reject) => {
// 本人期待本人实现是谬误的实现,用一个类型谬误,完结掉 promise Promise/A+ 2.3.1
if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
// Promise/A+ 2.3.3.3.3 只能调用一次
let called;
// 后续的条件要严格判断 保障代码能和别的库一起应用
if ((typeof x === 'object' && x != null) || typeof x === 'function') {
try {
// 为了判断 resolve 过的就不必再 reject 了(比方 reject 和 resolve 同时调用的时候)Promise/A+ 2.3.3.1
let then = x.then;
if (typeof then === 'function') {
// 不要写成 x.then,间接 then.call 就能够了 因为 x.then 会再次取值,Object.defineProperty Promise/A+ 2.3.3.3
then.call(x, y => { // 依据 promise 的状态决定是胜利还是失败
if (called) return;
called = true;
// 递归解析的过程(因为可能 promise 中还有 promise)Promise/A+ 2.3.3.3.1
resolvePromise(promise2, y, resolve, reject);
}, r => {
// 只有失败就失败 Promise/A+ 2.3.3.3.2
if (called) return;
called = true;
reject(r);
});
} else {
// 如果 x.then 是个一般值就间接返回 resolve 作为后果 Promise/A+ 2.3.3.4
resolve(x);
}
} catch (e) {
// Promise/A+ 2.3.3.2
if (called) return;
called = true;
reject(e)
}
} else {
// 如果 x 是个一般值就间接返回 resolve 作为后果 Promise/A+ 2.3.4
resolve(x)
}
}
class Promise {constructor(executor) {
this.status = PENDING;
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks= [];
let resolve = (value) => {if(this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
this.onResolvedCallbacks.forEach(fn=>fn());
}
}
let reject = (reason) => {if(this.status === PENDING) {
this.status = REJECTED;
this.reason = reason;
this.onRejectedCallbacks.forEach(fn=>fn());
}
}
try {executor(resolve,reject)
} catch (error) {reject(error)
}
}
then(onFulfilled, onRejected) {
// 解决 onFufilled,onRejected 没有传值的问题
//Promise/A+ 2.2.1 / Promise/A+ 2.2.5 / Promise/A+ 2.2.7.3 / Promise/A+ 2.2.7.4
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
// 因为谬误的值要让前面拜访到,所以这里也要跑出个谬误,不然会在之后 then 的 resolve 中捕捉
onRejected = typeof onRejected === 'function' ? onRejected : err => {throw err};
// 每次调用 then 都返回一个新的 promise Promise/A+ 2.2.7
let promise2 = new Promise((resolve, reject) => {if (this.status === FULFILLED) {
//Promise/A+ 2.2.2
//Promise/A+ 2.2.4 --- setTimeout
setTimeout(() => {
try {
//Promise/A+ 2.2.7.1
let x = onFulfilled(this.value);
// x 可能是一个 proimise
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
//Promise/A+ 2.2.7.2
reject(e)
}
}, 0);
}
if (this.status === REJECTED) {
//Promise/A+ 2.2.3
setTimeout(() => {
try {let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e)
}
}, 0);
}
if (this.status === PENDING) {this.onResolvedCallbacks.push(() => {setTimeout(() => {
try {let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e)
}
}, 0);
});
this.onRejectedCallbacks.push(()=> {setTimeout(() => {
try {let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {reject(e)
}
}, 0);
});
}
});
return promise2;
}
}
测试一下:
const promise = new Promise((resolve, reject) => {reject('失败');
}).then().then().then(data=>{console.log(data);
},err=>{console.log('err',err);
})
控制台输入:
"失败 err"
至此,咱们曾经实现了 promise 最要害的局部:then 的链式调用和值的穿透。搞清楚了 then 的链式调用和值的穿透,你也就搞清楚了 Promise。
测试 Promise 是否符合规范
Promise/A+ 标准提供了一个专门的测试脚本,能够测试所编写的代码是否合乎 Promise/A+ 的标准。
首先,在 promise 实现的代码中,减少以下代码:
Promise.defer = Promise.deferred = function () {let dfd = {};
dfd.promise = new Promise((resolve,reject)=>{
dfd.resolve = resolve;
dfd.reject = reject;
})
return dfd;
}
装置测试脚本:
npm install -g promises-aplus-tests
如果以后的 promise 源码的文件名为 promise.js
那么在对应的目录执行以下命令:
promises-aplus-tests promise.js
promises-aplus-tests 中共有 872 条测试用例。以上代码,能够完满通过所有用例。
感激小伙伴的揭示,因为文章中应用 setTimeout 实现 promise 的异步,会对大家造成误会。所以这里增加一些标注哈!
因为原生的 Promise 是 V8 引擎提供的微工作,咱们无奈还原 V8 引擎的实现,所以这里应用 setTimeout 模仿异步,所以原生的是微工作,这里是宏工作。
Promise A+ 标准 3.1 中也提到了:
这能够通过“宏工作”机制(例如 setTimeout 或 setImmediate)或“微工作”机制(例如 MutatonObserver 或)来实现 process.nextTick。
如果你想实现 promise 的微工作,能够 mutationObserver 代替 seiTimeout 来实现微工作。
有小伙伴说能够应用 queueMicrotask 实现微工作,我也查阅了一些材料,是能够的。不过 queueMicrotask 兼容性不是很好,IE 下齐全不反对。据我所知 queueMicrotask 的 polyfill 是基于 promise 实现的,如果不反对 promise 会转成 setTimeout。
总的来说,queueMicrotask 和 mutationObserver 都能够实现微工作机制,不过更倡议有执念的小伙伴用 mutationObserver 实现一下,没有执念的小伙伴理解 promise 的微工作机制就好了~
Promise 的 API
尽管上述的 promise 源码曾经合乎 Promise/A+ 的标准,然而原生的 Promise 还提供了一些其余办法,如:
- Promise.resolve()
- Promise.reject()
- Promise.prototype.catch()
- Promise.prototype.finally()
- Promise.all()
- Promise.race()
上面具体说一下每个办法的实现:
Promise.resolve
默认产生一个胜利的 promise。
static resolve(data){return new Promise((resolve,reject)=>{resolve(data);
})
}
这里须要留神的是,promise.resolve 是具备期待性能的。如果参数是 promise 会期待这个 promise 解析结束,在向下执行,所以这里须要在 resolve 办法中做一个小小的解决:
let resolve = (value) => {
// ====== 新增逻辑 ======
// 如果 value 是一个 promise,那咱们的库中应该也要实现一个递归解析
if(value instanceof Promise){
// 递归解析
return value.then(resolve,reject)
}
// ===================
if(this.status === PENDING) {
this.status = FULFILLED;
this.value = value;
this.onResolvedCallbacks.forEach(fn=>fn());
}
}
测试一下:
Promise.resolve(new Promise((resolve, reject) => {setTimeout(() => {resolve('ok');
}, 3000);
})).then(data=>{console.log(data,'success')
}).catch(err=>{console.log(err,'error')
})
控制台期待 3s
后输入:
"ok success"
Promise.reject
默认产生一个失败的 promise,Promise.reject 是间接将值变成谬误后果。
static reject(reason){return new Promise((resolve,reject)=>{reject(reason);
})
}
Promise.prototype.catch
Promise.prototype.catch 用来捕捉 promise 的异样,就相当于一个没有胜利的 then。
Promise.prototype.catch = function(errCallback){return this.then(null,errCallback)
}
Promise.prototype.finally
finally 示意不是最终的意思,而是无论如何都会执行的意思。
如果返回一个 promise 会期待这个 promise 也执行结束。如果返回的是胜利的 promise,会采纳上一次的后果;如果返回的是失败的 promise,会用这个失败的后果,传到 catch 中。
Promise.prototype.finally = function(callback) {return this.then((value)=>{return Promise.resolve(callback()).then(()=>value)
},(reason)=>{return Promise.resolve(callback()).then(()=>{throw reason})
})
}
测试一下:
Promise.resolve(456).finally(()=>{return new Promise((resolve,reject)=>{setTimeout(() => {resolve(123)
}, 3000);
})
}).then(data=>{console.log(data,'success')
}).catch(err=>{console.log(err,'error')
})
控制台期待 3s
后输入:
"456 success"
Promise.all
promise.all 是解决并发问题的,多个异步并发获取最终的后果(如果有一个失败则失败)。
Promise.all = function(values) {if (!Array.isArray(values)) {
const type = typeof values;
return new TypeError(`TypeError: ${type} ${values} is not iterable`)
}
return new Promise((resolve, reject) => {let resultArr = [];
let orderIndex = 0;
const processResultByKey = (value, index) => {resultArr[index] = value;
if (++orderIndex === values.length) {resolve(resultArr)
}
}
for (let i = 0; i < values.length; i++) {let value = values[i];
if (value && typeof value.then === 'function') {value.then((value) => {processResultByKey(value, i);
}, reject);
} else {processResultByKey(value, i);
}
}
});
}
测试一下:
let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('ok1');
}, 1000);
})
let p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('ok2');
}, 1000);
})
Promise.all([1,2,3,p1,p2]).then(data => {console.log('resolve', data);
}, err => {console.log('reject', err);
})
控制台期待 1s
后输入:
"resolve [1, 2, 3,'ok1','ok2']"
Promise.race
Promise.race 用来解决多个申请,采纳最快的(谁先实现用谁的)。
Promise.race = function(promises) {return new Promise((resolve, reject) => {
// 一起执行就是 for 循环
for (let i = 0; i < promises.length; i++) {let val = promises[i];
if (val && typeof val.then === 'function') {val.then(resolve, reject);
} else { // 一般值
resolve(val)
}
}
});
}
特地须要留神的是:因为Promise 是没有中断办法的,xhr.abort()、ajax 有本人的中断办法,axios 是基于 ajax 实现的;fetch 基于 promise,所以他的申请是无奈中断的。
这也是 promise 存在的缺点,咱们能够应用 race 来本人封装中断办法:
function wrap(promise) {
// 在这里包装一个 promise,能够管制原来的 promise 是胜利还是失败
let abort;
let newPromise = new Promise((resolve, reject) => { // defer 办法
abort = reject;
});
let p = Promise.race([promise, newPromise]); // 任何一个先胜利或者失败 就能够获取到后果
p.abort = abort;
return p;
}
const promise = new Promise((resolve, reject) => {setTimeout(() => { // 模仿的接口调用 ajax 必定有超时设置
resolve('胜利');
}, 1000);
});
let newPromise = wrap(promise);
setTimeout(() => {
// 超过 3 秒 就算超时 应该让 proimise 走到失败态
newPromise.abort('超时了');
}, 3000);
newPromise.then((data => {console.log('胜利的后果' + data)
})).catch(e => {console.log('失败的后果' + e)
})
控制台期待 1s
后输入:
"胜利的后果胜利"
promisify
promisify 是把一个 node 中的 api 转换成 promise 的写法。
在 node 版本 12.18 以上,曾经反对了原生的 promisify 办法:const fs = require('fs').promises
。
const promisify = (fn) => { // 典型的高阶函数 参数是函数 返回值是函数
return (...args)=>{return new Promise((resolve,reject)=>{fn(...args,function (err,data) { // node 中的回调函数的参数 第一个永远是 error
if(err) return reject(err);
resolve(data);
})
});
}
}
如果想要把 node 中所有的 api 都转换成 promise 的写法呢:
const promisifyAll = (target) =>{Reflect.ownKeys(target).forEach(key=>{if(typeof target[key] === 'function'){
// 默认会将原有的办法 全副减少一个 Async 后缀 变成 promise 写法
target[key+'Async'] = promisify(target[key]);
}
});
return target;
}
小结
写了将近两万字,到这里,咱们终于能够给手写 promise 做一个结尾了。咱们先是从 promise 的应用办法动手,结构出了 promise 的大抵框架,而后依据 promise/A+ 标准填充代码,重点实现了 then 的链式调用和值的穿透;而后应用测试脚本对所写的代码是否符合规范进行了测试;最初实现了 Promise 的 API 的实现。弄懂 promise 其实并不简单,归根结底还是孰能生巧,没事还是要多加练习才行吖。
因为篇幅过长,所以这篇文章次要讲了面试题的 1、2、3、4、6,对于第五点我会在讲 EventLoop 的文章中再进行零碎的梳理,置信在你看过 Promise 的源码之后,再了解 EventLoop,也会更加好了解了。
打算输入的相干内容文章:
- JS 的循环机制 EventLoop(主线程、微工作、渲染、宏工作)。
- Generator/async+await 的实现。
如果你对我的文章感兴趣,欢送关注我噢!如果你对文章有任何的疑难,也欢送给我留言~
参考
9k 字 | Promise/async/Generator 实现原理解析
Promise 之你看得懂的 Promise
Promise 的源码实现(完满合乎 Promise/A+ 标准)
对于
作者齐小神,前端程序媛一枚。
有点文艺,喜爱摄影。尽管当初朝九晚五,埋头苦学,但幻想是做女侠,扶贫济穷,仗剑走咫尺。心愿有一天能改完 BUG 去实现本人的幻想。
公众号:大前端 Space,不定时更新,欢送来玩~