共计 6152 个字符，预计需要花费 16 分钟才能阅读完成。
Promise
1、Promise 是一个类，类中须要传入一个 executor 执行器，默认会 立刻执行
2、Promise 有三种状态，pending,resolved,rejected, 只能从期待态转为其余两种状态
3、promise 官网标准：https://promisesaplus.com/
4、promise 反对链式调用，外部原理采纳的是 公布订阅模式
5、每次调用 then 办法，都会返回一个新的 promise
6、.then 中什么时候走失败：返回的是一个失败的 promise，抛出异样也会走失败，其余都走胜利
7、catch 用来对立捕捉谬误，它的特点是：如果一层层往下找，都没有处理错误的函数，则会找到最近的 catch，catch 也是 then, 遵循 then 的规定
第一版：没有任何异步逻辑
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
class Promise {constructor(executor) {
this.status = PENDING;
this.value = undefined
this.reason = undefined
let resolve = (value) => {if (this.status === PENDING) {
this.value = value
this.status = RESOLVED
}
}
let reject = (reason) => {if (this.status === PENDING) {
this.reason = reason
this.status = REJECTED
}
}
try {// 为什么加 try..catch，因为外部可能间接出错
executor(resolve, reject)// 给用户提供两个函数
} catch (e) {reject(e)
}
}
then(onfulfilled, onrejected) {if (this.status === RESOLVED) {onfulfilled(this.value)
}
if (this.status === REJECTED) {onrejected(this.reason)
}
}
}
module.exports = Promise第二版：如果 executor 外面有异步操作，则须要采纳公布订阅模式进行解决
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
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.value = value
this.status = RESOLVED
// 当调用 resolve 时，阐明要走胜利态，所以顺次执行 then 中胜利的回调
this.onResolvedCallbacks.forEach(fn => fn())
}
}
let reject = (reason) => {if (this.status === PENDING) {
this.reason = reason
this.status = REJECTED
// 当调用 reject 时，阐明要走失败态，所以执行 then 中失败的回调
this.onRejectedCallbacks.forEach(fn => fn())
}
}
try {executor(resolve, reject)
} catch (e) {reject(e)
}
}
then(onfulfilled, onrejected) {if (this.status === RESOLVED) {onfulfilled(this.value)
}
if (this.status === REJECTED) {onrejected(this.reason)
}
// 如果有异步操作（如 setTimeout）, 执行 then 办法时状态还是 PENDING，则须要将 then 中的两个办法先存起来
if (this.status === PENDING) {
// 第一种：将这个函数间接扔进去，然而不太好，不不便扩大本人的性能
// this.onResolvedCallbacks.push(onfulfilled)
// this.onRejectedCallbacks.push(onrejected)
// 第二种：应用切片编程，外面包一层，不便扩大
this.onResolvedCallbacks.push(() => {onfulfilled(this.value)
})
this.onRejectedCallbacks.push(() => {onrejected(this.reason)
})
}
}
}
module.exports = Promise第三版：then 的链式调用及 then 是个异步操作
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
// 个别微工作比宏工作早执行，也不是相对的，setTimeout 是宏工作
// 判断 x 的状态 是让 promise2 走胜利态还是失败态
function resolvePromise(promise2, x, resolve, reject) {// TODO}
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.value = value
this.status = RESOLVED
this.onResolvedCallbacks.forEach(fn => fn())
}
}
let reject = (reason) => {if (this.status === PENDING) {
this.reason = reason
this.status = REJECTED
this.onRejectedCallbacks.forEach(fn => fn())
}
}
try {executor(resolve, reject)
} catch (e) {reject(e)
}
}
then(onfulfilled, onrejected) {
// 链式调用，返回的须要是个新的 promise
const promise2 = new Promise((resolve, reject) => {
// 将之前判断条件放到这个 promise 的外面，因为它是 promise，所以是立刻执行，不影响
if (this.status === RESOLVED) {
// 将 then 执行之后的后果传到下一个 promise 的 resolve 或者 reject 中
// 须要判断这个 x 是一般值还是 promise，如果是 promise，则须要让这个 promise 执行，执行之后的状态将作为 promise2 的状态
setTimeout(() => {// 为什么须要 setTimeout? 因为官网说了 then 是个异步操作
try {// 为什么要包住，因为执行 onfulfilled 可能会出错
let x = onfulfilled(this.value)
// 我须要依据 x，判断调用 promise2 的 resolve 还是 reject，所以将 promise2 和它的 resolve 和 reject 传过来
// 此时应该没有 promise2，应该怎么搞？答案就是通过增加宏工作（setTimeout）或者微工作(nextTick)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {reject(e)
}
}, 0)
}
if (this.status === REJECTED) {setTimeout(() => {
try {let x = onrejected(this.reason)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
}
if (this.status === PENDING) {this.onResolvedCallbacks.push(() => {setTimeout(() => {
try {let x = onfulfilled(this.value)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
})
this.onRejectedCallbacks.push(() => {setTimeout(() => {
try {let x = onrejected(this.reason)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
})
}
})
}
}
module.exports = Promise
第四版：resolvePromise 办法的实现
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
function resolvePromise(promise2, x, resolve, reject) {
// 此办法 为了兼容所有的 promise,n 个库两头 执行的流程是一样的
// 尽可能具体 不出错
// 1) 不能引用同一个对象 可能会造成死循环
if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise #<Promise> --'))
}
let called;
// 2) 判断 x 的类型 x 是对象或者函数，才有可能是 promise
if ((typeof x === 'object' && x != null) || typeof x === 'function') {
try {let then = x.then; // {a:1} 因为 then 办法 可能应用的 getter 来定义的
if (typeof then === 'function') { // 只能认为他是 promise 了
// call 扭转 this 指向 并且让函数执行
then.call(x, y => { // 只取一次 以后 promise 解析进去的后果可能还是一个 promise 持续解析直到他是一个一般值为止
if (called) return;
called = true;
// 递归解析 resolve 的值
resolvePromise(promise2, y, resolve, reject)
}, r => {if (called) return;
called = true;
reject(r);
})
} else {// 如果不是函数，则只能是这种对象了{a:1,then:1}
resolve(x)
}
} catch (e) { // 我取 then 出错了 在谬误中又掉了该 promise 的胜利
if (called) return
called = true;
reject(e); // 取值失败 就走到 error 中
}
} else {
// 进到这里阐明是一般值，走胜利态
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.value = value
this.status = RESOLVED
this.onResolvedCallbacks.forEach(fn => fn())
}
}
let reject = (reason) => {if (this.status === PENDING) {
this.reason = reason
this.status = REJECTED
this.onRejectedCallbacks.forEach(fn => fn())
}
}
try {executor(resolve, reject)
} catch (e) {reject(e)
}
}
catch(errCallback){ // catch 就是没有胜利的 then 办法
return this.then(null,errCallback)
}
then(onfulfilled, onrejected) {const promise2 = new Promise((resolve, reject) => {if (this.status === RESOLVED) {setTimeout(() => {
try {let x = onfulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {reject(e)
}
}, 0)
}
if (this.status === REJECTED) {setTimeout(() => {
try {let x = onrejected(this.reason)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
}
if (this.status === PENDING) {this.onResolvedCallbacks.push(() => {setTimeout(() => {
try {let x = onfulfilled(this.value)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
})
this.onRejectedCallbacks.push(() => {setTimeout(() => {
try {let x = onrejected(this.reason)
resolvePromise(x)
} catch (e) {reject(e)
}
}, 0);
})
}
})
}
}
module.exports = Promise
// npm install -g promises-aplus-tests常见面试题
promise链式调用原理和jquery链式调用原理区别
答：jquery 中的链式调用原理是通过返回 this 实现的，而 promise 的链式调用是通过返回新的 promise 实现的Promise.all办法的原理
答：all 办法的特点是让所有的 promise 并发执行，外部应用 ** 计数器 ** 的形式判断是否全副执行完了，外部应用递归- Promise.resolve 和 Promise.reject 区别
答：Promise.resolve()参数能够承受一个 promise，并且期待它状态扭转；Promise.reject()也能够承受 promise，然而不会有期待成果，间接会走失败态正文完