美文网首页
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方法在请求成功的时候被调用,那么我们写的第一个参数就是成功回调参数。反之亦然。

相关文章

  • javascript的promise

    实现原理 Promise.all() Promise.race()

  • 转载Promise实现原理,自己记忆备用

    Promise实现原理(原文)

  • Promise

    什么是Promise Promise解决了什么问题 Promise/A+规范 Promise的原理(如何实现链式调...

  • promise原理

    title: Promise实现原理date: 2018-02-26 17:25:09tags: promise ...

  • 手写Promise

    参考:Promise实现原理(附源码) promise的注意点: Promise特点 1.状态不可变 2.值穿透,...

  • 八(1)、Promise(周) ------ 2020-02-2

    1、什么是Promise: 2、通过原生JS实现简单的Promise原理,理解Promise如何管控异步编程: 3...

  • 实现 Promise

    实现 Promise 此代码基本源于大佬在掘金上发的文章Promise实现原理(附源码), 此文写得相当详细, 非...

  • 宏观看Promise

    自定义Promise实现,来了解他的运行原理

  • promise实现原理

    伪代码 class my_promise { constructor(fun) { const that =...

  • Promise实现原理

    当我们用$.ajax()这个API的时候,是想使用Ajax去请求数据。并且在回调函数success里面去操作我们得...

网友评论

      本文标题:Promise实现原理

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