原生Promise解析

简介

• promise是异步编程的一种解决方案，比传统的解决方案--回调函数和事件--更合理和强大。
• promise简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果，从语法上来说，Promise是一个对象，从它可以获取异步操作的消息，Promise提供统一的API,各种异步操作都可以用同样的方法进行处理

特点

• 对象的状态不受外界影响，Promise对象代表一个异步操作，有三种状态：Pendding、fulfilled、rejected。只有异步操作的结果，可以决定当前是哪一种状态，其他操作都无法改变这个状态。
• 一旦状态改变，就不会在变，任何时候都可以得到这个结果，只有两种可能：从Pendding变为fulfilled和从Pendding变为rejected。只要这两种情况发生，状态就凝固了，会一直保持这个结果，这时就称为resolved。

利用es6进行Promise封装

处理同步任务

• 原生方法调用方式

new Promise((resolve,reject)=>{        resolve(1)    }).then(res=>{        console.log(res) //1    })

• 同步封装思考

1.由调用方式可见Promise是一个类    2.它接收一个回调函数，这个回调函数接受resolve和reject方法作为参数    3.当状态改变后执行then方法，并将resolve或reject的结果作为then方法接受回调函数的参数

class Mypromise{        constructor(callback){            this.status='pendding'            //成功结果            this.s_res = null            // 失败结果            this.f_res = null            callback((arg)=>{ // 使用箭头函数this不会丢失              // 改变状态为成功              this.status = 'fulfilled'              this.s_res = arg            },(arg)=>{               // 改变状态为失败               this.status = 'rejected'               this.f_res = arg             })        }        then(onresolve,onreject){            if(this.status === 'fulfilled'){ // 当状态为成功时                onresolve(this.s_res)            }else if(this.status === 'rejected'){ // 当状态为失败时                onreject(this.f_res)            }        }    }

处理异步任务

• 原生调用方式

new Promise((resolve,reject)=>{        setTimeOut(()=>{            resolve(1)        },1000)    }).then(res=>{        console.log(res)    })

• 异步封装思考

1.根据js执行机制，setTimeOut属于宏任务，then回调函数属于微任务，当主线程执行完成后，会从异步队列中    取出本次的微任务先执行。    2.也就是说，then方法执行时，状态还没有改变，所有我们需要将then方法执行的回调保存起来，等到异步代码执行    完成后，在统一执行then方法的回调函数

class Mypromise{        constructor(callback){            this.status='pendding'            //成功结果            this.s_res = null            // 失败结果            this.f_res = null            this.query = [] // ++              callback((arg)=>{ // 使用箭头函数this不会丢失              // 改变状态为成功              this.status = 'fulfilled'              this.s_res = arg              // 当状态改变后，统一执行then方法的回调              this.query.forEach(item=>{                  item.resolve(arg)              })            },(arg)=>{               // 改变状态为失败               this.status = 'rejected'               this.f_res = arg                // 当状态改变后，统一执行then方法的回调              this.query.forEach(item=>{                  item.reject(arg)              })            })        }        then(onresolve,onreject){            if(this.status === 'fulfilled'){ // 当状态为成功时                onresolve(this.s_res)            }else if(this.status === 'rejected'){ // 当状态为失败时                onreject(this.f_res)            }else{ // ++ 状态没有改变                this.query.push({ // 保存回调函数到队列中                    resolve:onresolve,                    reject:onreject                })            }        }    }

处理链式调用

• 原生调用方式

new Promise((resolve,reject)=>{        resolve(1)    }).then(res=>{        return res    }).then(res=>{        console.log(res)    })

• 链式调用思考

原生的Promise对象的then方法，返回的也是一个Promise对象，一个新的Promise才能支持链式调用    下一个then方法可以接受上一个then方法的返回值作为回调函数的参数    主要考虑上一个then方法的返回值：        1.Promise对象/具有then方法的对象        2.其他值        第一个then方法返回一个Promise对象，它的回调函数接受resFn和rejFN两个回调函数作为参数，        把成功状态的处理封装为handle函数，接受成功的结果作为参数        在handle函数，根据onresolve返回值的不同做出不同的处理

class Mypromise{        constructor(callback){            this.status='pendding'            //成功结果            this.s_res = null            // 失败结果            this.f_res = null            this.query = [] // ++              callback((arg)=>{ // 使用箭头函数this不会丢失              // 改变状态为成功              this.status = 'fulfilled'              this.s_res = arg              // 当状态改变后，统一执行then方法的回调              this.query.forEach(item=>{                  item.resolve(arg)              })            },(arg)=>{               // 改变状态为失败               this.status = 'rejected'               this.f_res = arg                // 当状态改变后，统一执行then方法的回调              this.query.forEach(item=>{                  item.reject(arg)              })            })        }        then(onresolve,onreject){            return new Mypromise((resFN,rejFN)=>{               if(this.status === 'fulfilled'){ // 当状态为成功时                    handle(this.s_res)                }else if(this.status === 'rejected'){ // 当状态为失败时                    errBack(this.f_res)                }else{ // ++ 状态没有改变                    this.query.push({ // 保存回调函数到队列中                        resolve:onresolve,                        reject:onreject                    })                }                 function handle(value){                    // 当then方法的onresolve方法有返回值时，保存其返回值，没有使用其保存的值                    let returnVal = onresolve instanceof Function && onresolve(value) || value                    // 如果onresolve方法返回的是promise对象，则调用其then方法                    if(returnVal&&returnVal['then'] instanceof Function){                        returnVal.then(res=>{                            resFN(res)                        },err=>{                            rejFN(err)                        })                    }else{                        resFN(returnVal)                    }                 }                function errBack(reason){                    if(onreject instanceof Function){                        let returnVal = reject(reason)                        if(typeof returnVal !== 'undenfined' && returnVal['then'] instanceof Function){                            returnVal.then(res=>{                                resFN(res)                            },err=>{                                rejFN(err)                            })                        }else{                            resFN(returnVal)                        }                    }else{                        rejFN(reason)                    }                }            })        }    }

Promise.all和Promise.race方法

• 原生调用方式

Promise.all方法接受一个数组，数组中的每一项都是一个Promise实例，只有数组中的所有Promise实例的状态    都变为fulfilled时，此时整个状态才会变成fulfilled,此时数组中所有Promise实例的返回值组成一个新的数组，    进行传递。    Promise.race方法和Promise.all方法一样，如果不是Promise实例，就会先调用Promise.resolve方法，将参数    转为Promise实例,在进行下一步处理。    只要数组中有一个参数的状态变为fulfilled就会进行传递

// 将现有对象转换为Promise对象    Mypromise.resolve = (arg)=>{        if(typeof arg == 'undefined' || arg==null){ // 不带有任何参数            return new Mypromise(resolve=>{                resolve(arg)            })        }else if(arg instanceof Mypromise){ // 是一个Mypromise实例            return arg        }else if(arg['then'] instanceof Function){ // 具有then方法的对象            return new Mypromise((resolve,reject)=>{                arg.then(res=>{                    resolve(res)                },err=>{                    reject(err)                })            })        }else{ // 参数不是具有then方法的对象，或根本不是对象           return new Mypromise(resolve=>{                resolve(arg)            })         }    }    Mypromise.all = (arr)=>{        if(!Array.isArray(arr)){            throw new TypeError('参数必须是一个数组')        }        return new Mypromise((resolve,reject)=>{            let i=0,result=[]            next()            functon next(){                // 如果不是Mypromise实例需要转换                Mypromise.resolve(arr[i]).then(res=>{                    result.push(res)                    i++                    if(i===arr.length){                        resolve(result)                    }else{                        next()                    }                },reject)            }        })    }    Mypromise.race = (arr)=>{        if(!Array.isArray(arr)){            throw new TypeError('参数必须是一个数组')        }        return new Mypromise((resolve,reject)=>{            let done = false            arr.forEach(item=>{                Mypromise.resolve(item).then(res=>{                    if(!done){                        resolve(res)                        done = true                    }                },err=>{                    if(!done){                        reject(res)                        done = true                    }                })            })        })    }

处理Mypromise状态确定不能改变的特性

在重写callback中的resolve和reject方法执行前，先判断状态是否为'pendding'