Promise的实现原理

女爷i 2022-01-20 01:13 230阅读 0赞

## 一· 什么是Promise ##

Promise是抽象异步处理对象以及对其进行各种操作的组件。 其实这样说起来还是比较抽象，那么我们简单的理解就是，处理异步操作通常是使用回调函数和事件。
    例如：   let P = new Promise((resolve,reject)=>{
    let num = Math.random()
    setTimeout(()=>{
        if(num>.5){
            resolve('成功')
        }else{
            reject('失败')
        }
    },2000)
        })P.then((value)=>{console.log(value)
        },(reason)=>{
        console.log(reason)
    })
    复制代码

## 二· 为什么使用Promise ##

使用pomise其实就是解决异步回调的嵌套的问题。下面不妨我们来看一个例子：  
     var ajax=function (){
         $.ajax(url1,data1,function(res1){
             $.ajax(url2,data2,function(res2){
                $.ajax(url3,data3,function(res3){
                    
                })
            })
         })
     }
    这种操作也是有用过吧，也有人一看这个人写的真垃圾，确实我本人水平有限。
    这种嵌套可以说是很不友好，那么用pomise就很有条理性了。
    let ajax=new Promise(function(resolve,reject){
         $.ajax(url1,data1,function(res1){
             resolve(res1)
         },function)
    })
    ajax.then(function(data){
        ajax1=new Promise(function(resolve,reject){
         $.ajax(url1,data,function(res1){
             resolve(res1)
         },function)
    })
    })
    ajax1.then(function(data){
        .......
    })
    ....依次类推
    复制代码

## 三 Promise的实现 ##

\} function reject(reason)\{ //2.1.2 setTimeout(function()\{ //如果是初始态，则转成失败态 if(self.status == PENDING)\{ self.status = REJECTED; self.value = reason;//失败的原因给了value self.onRejectedCallbacks.forEach(cb=>cb(self.value)); \} \});

\} try\{ //因为此函数执行可能会异常，所以需要捕获，如果出错了，需要用错误 对象reject executor(resolve,reject); \}catch(e)\{ //如果这函数执行失败了，则用失败的原因reject这个promise reject(e); \}; \} function resolvePromise(promise2,x,resolve,reject)\{ if(promise2 === x)\{ return reject(new TypeError('循环引用')); \} let called = false;//promise2是否已经resolve 或reject了 if(x instanceof Promise)\{ if(x.status == PENDING)\{ x.then(function(y)\{ resolvePromise(promise2,y,resolve,reject); \},reject); \}else\{ x.then(resolve,reject); \} //x是一个thenable对象或函数，只要有then方法的对象， \}else if(x!= null &&((typeof x=='object')||(typeof x == 'function')))\{ //当我们的promise和别的promise进行交互，编写这段代码的时候尽量的考虑兼容性，允许别人瞎写 try\{ let then = x.then; if(typeof then == 'function')\{ //有些promise会同时执行成功和失败的回调 then.call(x,function(y)\{ //如果promise2已经成功或失败了，则不会再处理了 if(called)return; called = true; resolvePromise(promise2,y,resolve,reject) \},function(err)\{ if(called)return; called = true; reject(err); \}); \}else\{ //到此的话x不是一个thenable对象，那直接把它当成值resolve promise2就可以了 resolve(x); \} \}catch(e)\{ if(called)return; called = true; reject(e); \}

\}else\{ //如果X是一个普通 的值，则用x的值去resolve promise2 resolve(x); \} \} //onFulfilled 是用来接收promise成功的值或者失败的原因 Promise.prototype.then = function(onFulfilled,onRejected)\{ //如果成功和失败的回调没有传，则表示这个then没有任何逻辑，只会把值往后抛 //2.2.1 onFulfilled = typeof onFulfilled == 'function'?onFulfilled:function(value)\{return value\}; onRejected = typeof onRejected == 'function'?onRejected:reason=>\{throw reason\}; //如果当前promise状态已经是成功态了，onFulfilled直接取值 let self = this; let promise2; if(self.status == FULFILLED)\{ return promise2 = new Promise(function(resolve,reject)\{ setTimeout(function()\{ try\{ let x =onFulfilled(self.value); //如果获取到了返回值x,会走解析promise的过程 resolvePromise(promise2,x,resolve,reject); \}catch(e)\{ //如果执行成功的回调过程中出错了，用错误原因把promise2 reject reject(e); \} \})

});
    复制代码

\} if(self.status == REJECTED)\{ return promise2 = new Promise(function(resolve,reject)\{ setTimeout(function()\{ try\{ let x =onRejected(self.value); resolvePromise(promise2,x,resolve,reject); \}catch(e)\{ reject(e); \} \}) \}); \} if(self.status == PENDING)\{ return promise2 = new Promise(function(resolve,reject)\{ self.onResolvedCallbacks.push(function()\{ try\{ let x =onFulfilled(self.value); //如果获取到了返回值x,会走解析promise的过程 resolvePromise(promise2,x,resolve,reject); \}catch(e)\{ reject(e); \}

});
     self.onRejectedCallbacks.push(function(){
         try{
           let x =onRejected(self.value);
           resolvePromise(promise2,x,resolve,reject);
         }catch(e){
           reject(e);
         }
     });
    复制代码

\}); \} \} catch原理就是只传失败的回调 Promise.prototype.catch = function(onRejected)\{ this.then(null,onRejected); \} Promise.deferred = Promise.defer = function()\{ let defer = \{\}; defer.promise = new Promise(function(resolve,reject)\{ defer.resolve = resolve; defer.reject = reject; \}); return defer; \} function gen(times,cb)\{ let result = \[\],count=0; return function(i,data)\{ result\[i\] = data; if(++count==times)\{ cb(result); \} \} \} Promise.all = function(promises)\{ return new Promise(function(resolve,reject)\{ let done = gen(promises.length,resolve); for(let i=0;i<promises.length;i++)\{ promises\[i\].then(function(data)\{ done(i,data); \},reject); \} \}); \} Promise.race = function(promises)\{ return new Promise(function(resolve,reject)\{ for(let i=0;i<promises.length;i++)\{ promises\[i\].then(resolve,reject); \} \}); \} //返回一个立刻成功的promise //别人提供 给你一个方法，需要你传入一个promise,但你只有一个普通的值，你就可以通过这个方法把这个普通的值(string number object)转成一个promise对象 Promise.resolve = function(value)\{ return new Promise(function(resolve)\{ resolve(value); \}); \} //返回一个立刻失败的promise Promise.reject = function(reason)\{ return new Promise(function(resolve,reject)\{ reject(reason); \}); \} module.exports = Promise;