【逐点突破系列】前端面试必备——异步（Promise）(1)

Promise.reject().then((val)=>{
return ‘ok’
},()=>{
return ‘err’
}).then((val)=>{
console.log(‘ok’ + val)
},(e)=>{
console.log(‘err’ + e)
})
// okerr 第一个then失败的回调返回的是普通值，还是走第二个的then中成功回调

2.如果成功或者失败的回调的返回值 返回是一个promise 那么会让这个promise执行 采用他的状态

Promise.resolve().then(()=>{
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(1)
},1000)
})
}).then((val)=>{
console.log(val)
})
//一秒后打印1

3.2实现

这一版主要是实现链式调用，稍微绕一点，但是理清楚了也不难
首先明确一下，then后面会返回一个新的Promise,所以才能执行链式调用
第一个比较绕的地方，怎么让第二个then里面的回调执行？只要调用then返回的新promise(promise2)时的resolve方法就行了
第二个比较绕的地方就是参数是什么？我们看特性3.1，参数是什么要根据第一个then中回调的返回值来判断，返回值如果是正常值，如果是Piomise，，所以我们封装一个resolvePromise的方法来处理,参数的话有第一个then的回调，新创建的promise2,以及promise2里面的resolve.reject

需要改变的核心代码如下
let resolvePromise = (promise2, x, resolve, reject) => {…}

class Promise {
construcotr(){…}
then(){
let promise2 = new promise((resolve,reject)=>{
let x = onFulfiled() // onFulfilef是第一个then中的回调函数
resolvePromise(promise2,x, resolve, reject)
})
return promiese2
}
}

resolvePromise这个方法会判断onFulfiled返回值类型，如果是普通值会怎么样，如果是一个Promise会怎么样，如果报错会怎么样，详细实现方法可以参考promise A+规范
完整实现

let resolvePromise = (promise2, x, resolve, reject) => {
// 监测到环形链
if(promise2===x) return new TypeError(‘chaining cycle detected for promise’)
if(typeof x ===‘function’ ||(typeof x ===‘object’ && x!==null)){
try{
//尝试取出then，有问题报错
let then = x.then
if(typeof then === ‘function’){ //这里是最绕的，想清楚promise2和x的关系,x.then会不会执行取决于使用者的逻辑,会不会在第一个then中回调函数中返回的promise中调用它的resolve改变状态
then.call(x,resolve,reject)
}else{// then不是function
resolve(x)
}
}catch (e) {
reject(e)
}
}else{ //普通类型
resolve(x)
}

}

class Promise {
constructor(executor) {
this.status = ‘pending’
this.value = undefined
this.reason = undefined
this.onFulfilledCallback = []
this.onRejectedCallback = []
let resolve = (value) => {
if (this.status === ‘pending’) {
this.status = ‘fulfilled’
this.value = value
this.onFulfilledCallback.forEach(fn => fn(this.value))
}

}
let reject = (reason) => {
if (this.status === ‘pending’) {
this.status =