关于javascript:Promise全解

56次阅读

共计 11248 个字符，预计需要花费 29 分钟才能阅读完成。

Promise 简介

是一个保留了异步事件将来执行后果的对象。它不是一个新技术，而是一种能够 优化异步编程编码格调的标准 。最早诞生于社区，用于解决 JavaScript 代码中 回调嵌套层级过多的问题和错误处理逻辑堆砌的问题。应用 Promise 对象封装异步操作，能够让代码变得直观、线性、优雅。

Promise 根本应用

用 Promise 封装 Ajax 申请

// 先写一个原始的 Ajax 申请
let xhr = new XMLHttpRequest()
function resolve(v){console.log(v);}
function reject(e){console.log(e);}
xhr.onerror = function(e){reject(e)
}
xhr.ontimeout = function(e){reject(e)
}
xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status===200){resolve(xhr.response)
        }
    }
}
xhr.open('Get','https://wwww.google.com',true)
xhr.send()

// 第一版：利用 Promise 封装 ajax
let p = new Promise((resolve,reject)=>{let xhr = new XMLHttpRequest()
    xhr.onerror = function(e){reject(e)
    }
    xhr.ontimeout = function(e){reject(e)
    }
    xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status===200){resolve(xhr.response)
            }
        }
    }
    xhr.open('Get','https://wwww.google.com',true)
    xhr.send()});

p.then(v=>{console.log("我是胜利时注册的回调");
},e=>{console.log("我是失败时注册的回调");
})

// 第二版 反对传参、封装了 Promise 创立的细节
function Xpromise(request){function executor(request,resolve,reject){let xhr = new XMLHttpRequest()
        xhr.onerror = function(e){reject(e)
        }
        xhr.ontimeout = function(e){reject(e)
        }
        xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status===200){resolve(xhr.response)
                }
            }
        }
        xhr.open('Get',request.url,true)
        xhr.send()}
    renturn new Promise(executor);
}

let x1 = Xpromise(makeRequest('https://wwww.google.com')).then(v=>{console.log("我是胜利时注册的回调");
},e=>{console.log("我是失败时注册的回调");
})

另外，Promise 还提供了一系列好用的 API, 如动态 resolve()、all()、race()办法等。

实现原理概述

Promise 用 回调函数提早绑定 、 回调函数 onResolve 返回值穿透 机制解决回调嵌套层级过多的问题；应用 谬误冒泡机制 简化了错误处理逻辑堆砌的问题。

手工实现一个 Promise

第一版

// 第一点：Promise 是一个类
class MyPromise {
    // 第二点：Promised 构造函数的参数是一个函数；constructor(fn) {if (typeof fn !== "function") {throw new Error("promise 的结构函数参数应该为函数类型")
        }
        // 第三点：Promise 的外部状态有三个，Promise 对象具备值
        this._status = PENDING;
        this._value = undefined;
        // 第五点：new Promise(fn)时，就须要执行 fn 做业务逻辑，故构造函数里就要调用 fn 函数。此处外部函数_resolve 和_reject 会被调用用于追踪 Promise 的外部状态
        try {
            // 留神用 try-catch 包住
            fn(this._resolve.bind(this), this._reject.bind(this));
        } catch (err) {this._reject(err)
        }
    }
    // 第四点：定义 MyPromise 状态翻转时，要执行的外部函数
    _resolve(val){if (this._status !== this.PENDING) return // 这段代码体现了 Promise 的状态翻转：只能是 P ->F 或者是 P ->R
        this._status = FULLFILLED;
        this._value = val;
    };
    _reject(err){if (this._status !== this.PENDING) return
        this._status = REJECTED;
        this._value = err;
    };
}

第二版

class MyPromise {constructor(fn) {if (typeof fn !== "function") {throw new Error("myPromise 的结构函数参数应该为函数类型")
        }
        this._status = PENDING;
        this._value = undefined;
        // 个性 2 - 新增定义两个回调函数数组
        this.fulfilledQueue = [];
        this.rejectedQueue = [];
        try {fn(this._resolve.bind(this), this._reject.bind(this));
        } catch (err) {this._reject(err)
        }
    }
    _resolve(val){if (this._status !== this.PENDING) return
        // 个性 4：注册的回调函数在 Promise 状态翻转时会执行，执行的形式是循环从队列外面取出回调执行
        // 定义 run 函数
        run = (value)=>{
            this._status = FULLFILLED;
            this._value = val;
            let ck;
            while(ck = this.fulfilledQueue.shift()){ck(value);
            }
        }
        // 个性 5：run()函数的执行，这里十分要害。要把 run 放进 setTimeOut。为什么？// 因为执行_resolve()函数时，then()可能还没执行，所以为了让 then()中的回调、包含链式调用的 then()的回调增加到 fulfilledQueue 中，// 须要提早执行 run()。实际上这里用 setTimeout 性能差，理论中采纳微工作的形式实现
        setTimeout(run,0)
        //run();};
    _reject(err){if (this._status !== this.PENDING) return
        run = (error)=>{
            this._status = this.REJECTED;
            this._value = err;
            let ck;
            while(ck = this.rejectedQueue.shift()){ck(error)
            }
        }
        setTimeout(run,0);
    };

    // 最重要的 then 函数：// 个性 1 - 用于注册回调，then()函数有两个参数，都是可选的，如果参数不是函数将会被疏忽
    // then()反对被同一个 Promise 屡次注册，个性 2 - 所以 Promise 外部要保护两个数组，别离存储 then 上注册的胜利回调和失败回调）；// then()反对链式调用, 个性 3 - 之所以反对是因为其返回值是一个新的 Promise，此处要实现回调函数 onFulfilled 穿透机制的实现
    
    // 个性 1 - 回调函数的注册: 故为它传递两个回调函数占位
    then(onFulfilled,onRejected){const {_status, _value} = this;
        // 个性 3 - 返回一个新的 promise
        return new MyPromise((onFulfilledNext, onRejectedNext)=>{
            let fulfilled = value => {
                try{if(typeof onFulfilled != "function"){
                        // 如果 onFulfilled 或 onRejected 不是函数，onFulfilled 或 onRejected 被疏忽
                        onFulfilledNext(value)
                    }else{
                        // 如果 onFulfilled 或者 onRejected 返回一个值 res
                        let res = onFulfilled(value)
                        if(res instanceof MyPromise){// 若 res 为 Promise，这时后一个回调函数，就会期待该 Promise 对象 (即 res) 的状态发生变化，才会被调用，并且新的 Promise 状态和 res 的状态雷同
                            res.then(onFulfilledNext, onRejectedNext)
                        }else{
                            // 若 res 不为 Promise，则使 res 间接作为新返回的 Promise 对象的值
                            onFulfilledNext(res)
                        }
                    }
                }catch(err){onRejectedNext(err)
                }
            }
            let rejected = error => {
                try{if(typeof onRejected != "function"){onRejectedNext(error)
                    }else{let res = onRejectedNext(error)
                        if(res instanceof MyPromise){res.then(onFulfilledNext, onRejectedNext)
                        }else{onFulfilledNext(res);
                        }
                    }
                }catch(err){onRejectedNext(err)
                }
            }
            switch(_status){
                case PENDING:
                    // 在 promise 状态扭转前, onFulfilled 或者 onRejected 不可被调用
                    this._fulfilledQueue.push(onFulfilled)
                    this._rejectedQueue.push(onRejected)
                    break
                case FULFILLED:
                    //onFulfilled 调用次数只有一次，fulfilled 对 onFulFilled 进行包装。why need 包装？因为 onFulFilled 可能是函数、可能不是，如果是函数，返回值可能是 Promise 可能不是
                    fulfilled(_value)
                    break
                case REJECTED:
                    //onRejected 调用次数只有一次
                    rejected(_value)
                    break
            }
        })
    }
}

第三版

class MyPromise {constructor(handle) {if (!isFunction(handle)) {throw new Error('MyPromise must accept a function as a parameter')
        }
        this._status = PENDING
        this._value = undefined
        this._fulfilledQueues = []
        this._rejectedQueues = []
        try {handle(this._resolve.bind(this), this._reject.bind(this))
        } catch (err) {this._reject(err)
        }
    }
    // 增加 resovle 时执行的函数
    _resolve(val) {const run = () => {if (this._status !== PENDING) return
            const runFulfilled = (value) => {
                let cb;
                while (cb = this._fulfilledQueues.shift()) {cb(value)
                }
            }
            const runRejected = (error) => {
                let cb;
                while (cb = this._rejectedQueues.shift()) {cb(error)
                }
            }
            /* 
              如果 resolve 的参数为 Promise 对象，则必须期待该 Promise 对象状态扭转后,
              以后 Promsie 的状态才会扭转，且状态取决于参数 Promsie 对象的状态，因而这里进行逻辑辨别
            */
            if (val instanceof MyPromise) {
                val.then(value => {
                    this._value = value
                    this._status = FULFILLED
                    runFulfilled(value)
                }, err => {
                    this._value = err
                    this._status = REJECTED
                    runRejected(err)
                })
            } else {
                this._value = val
                this._status = FULFILLED
                runFulfilled(val)
            }
        }
        setTimeout(run, 0)
    }
    _reject(err) {if (this._status !== PENDING) return
        const run = () => {
            this._status = REJECTED
            this._value = err
            let cb;
            while (cb = this._rejectedQueues.shift()) {cb(err)
            }
        }
        setTimeout(run, 0)
    }
    then(onFulfilled, onRejected) {const { _value, _status} = this
        return new MyPromise((onFulfilledNext, onRejectedNext) => {
            let fulfilled = value => {
                try {if (!isFunction(onFulfilled)) {onFulfilledNext(value)
                    } else {let res = onFulfilled(value);
                        if (res instanceof MyPromise) {res.then(onFulfilledNext, onRejectedNext)
                        } else {onFulfilledNext(res)
                        }
                    }
                } catch (err) {onRejectedNext(err)
                }
            }
            let rejected = error => {
                try {if (!isFunction(onRejected)) {onRejectedNext(error)
                    } else {let res = onRejected(error);
                        if (res instanceof MyPromise) {res.then(onFulfilledNext, onRejectedNext)
                        } else {onFulfilledNext(res)
                        }
                    }
                } catch (err) {onRejectedNext(err)
                }
            }
            switch (_status) {
                case PENDING:
                    this._fulfilledQueues.push(fulfilled)
                    this._rejectedQueues.push(rejected)
                    break
                case FULFILLED:
                    fulfilled(_value)
                    break
                case REJECTED:
                    rejected(_value)
                    break
            }
        })
    }
}

第四版 finally

class MyPromise {constructor(handle) {if (!isFunction(handle)) {throw new Error('MyPromise must accept a function as a parameter')
        }
        this._status = PENDING
        this._value = undefined
        this._fulfilledQueues = []
        this._rejectedQueues = []
        try {handle(this._resolve.bind(this), this._reject.bind(this))
        } catch (err) {this._reject(err)
        }
    }
    _resolve(val) {const run = () => {if (this._status !== PENDING) return
            const runFulfilled = (value) => {
                let cb;
                while (cb = this._fulfilledQueues.shift()) {cb(value)
                }
            }
            const runRejected = (error) => {
                let cb;
                while (cb = this._rejectedQueues.shift()) {cb(error)
                }
            }
            if (val instanceof MyPromise) {
                val.then(value => {
                    this._value = value
                    this._status = FULFILLED
                    runFulfilled(value)
                }, err => {
                    this._value = err
                    this._status = REJECTED
                    runRejected(err)
                })
            } else {
                this._value = val
                this._status = FULFILLED
                runFulfilled(val)
            }
        }
        setTimeout(run, 0)
    }
    _reject(err) {if (this._status !== PENDING) return
        const run = () => {
            this._status = REJECTED
            this._value = err
            let cb;
            while (cb = this._rejectedQueues.shift()) {cb(err)
            }
        }
        setTimeout(run, 0)
    }
    then(onFulfilled, onRejected) {const { _value, _status} = this
        return new MyPromise((onFulfilledNext, onRejectedNext) => {
            let fulfilled = value => {
                try {if (!isFunction(onFulfilled)) {onFulfilledNext(value)
                    } else {let res = onFulfilled(value);
                        if (res instanceof MyPromise) {res.then(onFulfilledNext, onRejectedNext)
                        } else {onFulfilledNext(res)
                        }
                    }
                } catch (err) {onRejectedNext(err)
                }
            }
            let rejected = error => {
                try {if (!isFunction(onRejected)) {onRejectedNext(error)
                    } else {let res = onRejected(error);
                        if (res instanceof MyPromise) {res.then(onFulfilledNext, onRejectedNext)
                        } else {onFulfilledNext(res)
                        }
                    }
                } catch (err) {onRejectedNext(err)
                }
            }
            switch (_status) {
                case PENDING:
                    this._fulfilledQueues.push(fulfilled)
                    this._rejectedQueues.push(rejected)
                    break
                case FULFILLED:
                    fulfilled(_value)
                    break
                case REJECTED:
                    rejected(_value)
                    break
            }
        })
    }
    // 增加 catch 办法
    catch(onRejected) {return this.then(undefined, onRejected)
    }
    // 增加动态 resolve 办法
    static resolve(value) {
        // 如果参数是 MyPromise 实例，间接返回这个实例
        if (value instanceof MyPromise) return value
        return new MyPromise(resolve => resolve(value))
    }
    // 增加动态 reject 办法
    static reject(value) {return new MyPromise((resolve, reject) => reject(value))
    }
    // 增加动态 all 办法
    static all(list) {return new MyPromise((resolve, reject) => {
            /**
             * 返回值的汇合
             */
            let values = []
            let count = 0
            for (let [i, p] of list.entries()) {
                // 数组参数如果不是 MyPromise 实例，先调用 MyPromise.resolve
                this.resolve(p).then(res => {values[i] = res
                    count++
                    // 所有状态都变成 fulfilled 时返回的 MyPromise 状态就变成 fulfilled
                    if (count === list.length) resolve(values)
                }, err => {
                    // 有一个被 rejected 时返回的 MyPromise 状态就变成 rejected
                    reject(err)
                })
            }
        })
    }
    // 增加动态 race 办法
    static race(list) {return new MyPromise((resolve, reject) => {for (let p of list) {
                // 只有有一个实例率先扭转状态，新的 MyPromise 的状态就跟着扭转
                this.resolve(p).then(res => {resolve(res)
                }, err => {reject(err)
                })
            }
        })
    }
    finally(cb) {
        return this.then(value => MyPromise.resolve(cb()).then(() => value),
            reason => MyPromise.resolve(cb()).then(() => { throw reason})
        );
    }
}

其它问题

1. Promise 与宏观工作、async 函数等执行程序问题

Promise 是微工作的一种实现，给出如下的代码，剖析其输入程序

// 题目 1
async function a1 () {console.log('a1 start')
    await a2()
    console.log('a1 end')
}
async function a2 () {console.log('a2')
}
console.log('script start')
setTimeout(() => {console.log('setTimeout')
}, 0)
Promise.resolve().then(() => {console.log('promise1')
})
a1()
let promise2 = new Promise((resolve) => {resolve('promise2.then')
    console.log('promise2')
})
promise2.then((res) => {console.log(res)
    Promise.resolve().then(() => {console.log('promise3')
    })
})
console.log('script end')
// 题目 2
async function async1() {console.log('async1 start');
    await async2();
    await async3()
    console.log('async1 end');
}
async function async2() {console.log('async2');
}
async function async3() {console.log('async3');
}
console.log('script start');
setTimeout(function() {console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {console.log('promise1');
    resolve();}).then(function() {console.log('promise2');
});
console.log('script end');
// 题目 3
async function async1(){console.log('async1 start')
    await async2()
    console.log('async1 end')
  }
async function async2(){console.log('async2')
}
console.log('script start')
setTimeout(function(){console.log('setTimeout0') 
},0)  
setTimeout(function(){console.log('setTimeout3') 
},3)  
setImmediate(() => console.log('setImmediate'));
process.nextTick(() => console.log('nextTick'));
async1();
new Promise(function(resolve){console.log('promise1')
    resolve();
    console.log('promise2')
}).then(function(){console.log('promise3')
})
console.log('script end')

答案：
题目一：script start->a1 start->a2->promise2->script end->promise1->a1 end->promise2.then->promise3->setTimeout
题目二：script start->async1 start->async2->promise1->script end->async3->promise2->async1 end->setTimeout
在浏览器 console 可试验
题目三：script start->async1 start->async2->promise1->promise2
->script end->nextTick->async1 end->promise3->setTimeout->setImmediate->setTimeout3
在 node 环境中可试验

2. 如何实现 all、如何实现链式调用的

all()的实现：函数中保护了一个数组和计数器，数组的大小为初始时 all 函数中传递的 Promise 对象数量，数组存储各个 Promise 执行胜利后 resolve 失去的后果，每胜利一个计数器 +1，直到计数器累加到数组大小时即调用 resolve(value)，只有有一个 Promise 执行到失败的回调，即全副失败。
链式调用的实现：then 函数返回的仍然是一个 Promise, 见第二版的 Promise 实现。

3. all 中任何一个 Promise 出错，导致其它正确的数据也无奈应用，如何解决呢？

办法 1：应用 allSettled 代替；办法 2：改写 Promise, 将 reject 操作换成是 resolve(new Error(“ 自定义的谬误 ”))；办法 3：引入第三方库 promise-transaction

4.Promise 真的好用吗，它存在什么问题？

问题 1：没有提供中途勾销的机制；问题 2：必须要设置回调，否则外部谬误无奈在内部反映进去；问题 3：应用时仍然存在大量 Promise 的 api, 逻辑不清晰。

正文完
javascript
发表至： javascript
2021-04-12
 0
关于javascript:js2创建对象的方式
如何gulp压缩,丑化代码
MindMaster-7破解版亿图思维导图Win10下载-711-简体中文版
关于javascript:一个玩具NewbieGraph不是阿猫阿狗能叫大牛