美文网首页
Promise实现原理

Promise实现原理

作者: 勃王 | 来源:发表于2017-10-23 13:10 被阅读0次

    当我们用$.ajax()这个API的时候,是想使用Ajax去请求数据。并且在回调函数success里面去操作我们得到的数据。但是当我们有了Promise之后,我们就没有必要在$.ajax()要传入的对象中去写这个success属性了。我们可以直接$.ajax().then(fn1,fn2)。因为Jquery把Promise封装在了$.ajax()这个API上,他返回的是一个Promise对象,这个Promise对象上有一个方法then,它接受两个回调函数。并且这个then方法也是返回一个Promise对象(实现链式调用)。then的第一个参数,就是我们得到数据后需要去操作数据的那个函数 。
    代码如下:

       $({url:'xxxx',action:"GET"}).then(function(通过Ajax得到的数据){
             console.log(通过Ajax得到的数据));
         },function(){})
    

    这样一来 我们就可以通过then方法把从后台拿到的数据打印到控制台上。
    同理,第二个参数也是一个回调函数,并且是Ajax的错误处理函数。

    以上就是Jquery封装的Promise的基本使用。

    但是ES6 支持了一个Promise语法,使得我们可以自己写一个Promise对象。
    写法如下

    function Ajax(){
      return new Promise(function(resolve,rejected){
          var request = new XMLHttpRequest();
          request.open('xxx/','GET');
          request.onstatechange = funcion(data){
             if(request.stateCode>200 && request.stateCode <400 ){
                 console.log('我得到的数据是'+data);
                 resolve(data);  //确保把data传给then()都第一个回调参数
              }
             if(request.stateCode >400){
                console,log('抛出一个错误');
                rejected();            
              }
           } 
    })
    }
    

    可能在刚才我们使用then方法的时候你也许会问,为什么then方法就能把第一个参数作为成功回调,把第二个参数作为失败回调。Promise内部是如何判断到底是请求成功还是失败了呢。
    答案就在这个resolve和reject。
    当我们自己写API的时候,我们就可以控制让一个参数的调用位置出现在什么地方,如果我们让resolve方法在请求成功的时候被调用,那么我们写的第一个参数就是成功回调参数。反之亦然。

    相关文章

      网友评论

          本文标题:Promise实现原理

          本文链接:https://www.haomeiwen.com/subject/ckcayxtx.html