当前位置:首页 > 日记 > 正文

认识jQuery的Promise的具体使用方法

认识jQuery的Promise的具体使用方法

先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象。

打开浏览器的控制台先。

<script>  var defer = $.Deferred();  console.log(defer);</script>

运行结果:

 

和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、then方法,还有done、fail、always......方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数,修改并传递异步操作的状态。

玩玩Deferred:

<script>  function runAsync(){    var defer = $.Deferred();    //做一些异步操作    setTimeout(function(){      console.log('执行完成');      defer.resolve('异步请求成功之后返回的数据');    }, 1000);    return defer;  }  runAsync().then(function(data){    console.log(data)  });</script>

运行之后,Deferred对象的实例defer通过resolve方法把参数 “异步请求成功之后返回的数据” 传回到then方法中进行接收,,打印。

和ES6的Promise相似,但是有一点点区别,再看下Promise:

<script>  function runAsync(){    var p = new Promise(function(resolve, reject){            setTimeout(function(){        console.log('执行完成');        resolve('异步请求成功之后返回的数据');      }, 1000);    });    return p;        }  runAsync().then(function(data){    console.log(data);  });</script>

我们发现:

1、创建Deferred对象的时候没有传参;而创建Promise对象的时候,传了参数(传了一个匿名函数,函数也有两个参数:resolve、reject);

2、Deferred对象直接调用了resolve方法;而Promise对象则是在内部调用的resolve方法;

说明:Deferred对象本身就有resolve方法,而Promise对象是在构造器中通过执行resolve方法,给Promise对象赋上了执行结果的状态。

这样就有一个弊端:因为Deferred对象自带resolve方法,拿到Deferred对象之后,就可以随时调用resolve方法,其状态可以进行手动干预了

<script>  function runAsync(){    var defer = $.Deferred();    //做一些异步操作    setTimeout(function(){      console.log('执行完成');      defer.resolve('异步请求成功之后返回的数据');    }, 1000);    return defer;  }   var der = runAsync();   der.then(function(data){    console.log(data)   });   der.resolve('在外部结束'); </script>

 这样的话就直接在外部直接给Deferred设置了状态,打印“在外部结束”,1s后打印“执行完成”,不会打印“异步请求成功之后返回的数据”了。

显然,这不好。我发个异步请求,还没收到数据就让人在外部给我结束了。。。。。。。

当然这个坑jQuery肯定会填的,在Deferred对象上有一个promise方法,是一个受限的Deferred对象

<script>  function runAsync(){    var def = $.Deferred();    //做一些异步操作    setTimeout(function(){      console.log('执行完成');      def.resolve('请求成功之后返回的数据');    }, 2000);    return def.promise(); //就在这里调用  }</script>

所谓受限的Deferred对象,就是没有resolve和reject方法的Deferred对象。这样就无法在外边改变Deferred对象的状态了。

Deferred对象的then方法和done、fail语法糖

我们知道,在ES6的Promise规范中,then方法接受两个参数,分别是执行完成和执行失败的回调,而jquery中进行了增强,还可以接受第三个参数,就是在pending状态时的回调,如下:

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

then方法:

<script>  function runAsync(){    var def = $.Deferred();    //做一些异步操作    setTimeout(function(){       var num = Math.ceil(Math.random()*10); //生成1-10的随机数        if(num<=5){          def.resolve(num);        }        else{          def.reject('数字太大了');        }    }, 2000);    return def.promise(); //就在这里调用  }  runAsync().then(function(d){    console.log("resolve");    console.log(d);  },function(d){    console.log("reject");    console.log(d);  })</script>

Deferred对象的then方法也是可以进行链式操作的。

done,fail语法糖,分别用来指定执行完成和执行失败的回调,与这段代码是等价的:

<script>  function runAsync(){    var def = $.Deferred();    //做一些异步操作    setTimeout(function(){       var num = Math.ceil(Math.random()*10); //生成1-10的随机数        if(num<=5){          def.resolve(num);        }        else{          def.reject('数字太大了');        }    }, 2000);    return def.promise(); //就在这里调用  }  runAsync().done(function(d){    console.log("resolve");    console.log(d);  }).fail(function(d){    console.log("reject");    console.log(d);  })</script>

always的用法

jquery的Deferred对象上还有一个always方法,不论执行完成还是执行失败,always都会执行,有点类似ajax中的complete。

$.when的用法

jquery中,还有一个$.when方法来实现Promise,与ES6中的all方法功能一样,并行执行异步操作,在所有的异步操作执行完后才执行回调函数。不过$.when并没有定义在$.Deferred中,看名字就知道,$.when,它是一个单独的方法。与ES6的all的参数稍有区别,它接受的并不是数组,而是多个Deferred对象,如下:

<script> function runAsync(){    var def = $.Deferred();    //做一些异步操作    setTimeout(function(){       var num = Math.ceil(Math.random()*10); //生成1-10的随机数       def.resolve(num);      }, 2000);    return def.promise(); //就在这里调用  }  $.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){     console.log('全部执行完成');     console.log(data1, data2, data3);  });</script>

jquery中没有像ES6中的race方法吗?就是以跑的快的为准的那个方法。对的,jquery中没有。

以上就是jquery中Deferred对象的常用方法了。

在上一篇和本篇当中,都是用一次性定时器来代替了异步请求进行数据处理。为什么没用ajax呢,不是因为麻烦,在这里要说一下ajax和Deferred的联系:

jquery的ajax返回一个受限的Deferred对象,也就是没有resolve方法和reject方法,不能从外部改变状态,既然是Deferred对象,那么我们上面讲到的所有特性,ajax也都是可以用的。比如链式调用,连续发送多个请求:

<script>req1 = function(){  return $.ajax(/* **** */);}req2 = function(){  return $.ajax(/* **** */);}req3 = function(){   return $.ajax(/* **** */);}req1().then(req2).then(req3).done(function(){ console.log('请求发送完毕'); });</script>

success、error与complete

这三个方法是我们常用的ajax语法糖。

$.ajax(/*...*/).success(function(){/*...*

相关文章

vue-cli 自定义指令directive 添加

vue-cli 自定义指令directive 添加

滑块,验证,自定义指令,示例,电脑软件,vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考;用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可;template:<tem…

详解webpack3如何正确引用并使用jQ

详解webpack3如何正确引用并使用jQ

引用,详解,如何正确,电脑软件,jQuery,经过百度、谷歌、SF、stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发…

excel表格的图表制作教程

excel表格的图表制作教程

图表,表格,制作教程,电脑软件,excel,  Excel制作图表该如何制作呢?接下来是小编为大家带来的excel表格的图表制作教程,供大家参考。excel表格的图表制作教程:  图表制作步骤1:【新建】Excel文档图表制作步骤2:合并单元格图表制作步骤3:录入…

PPT2007中怎么设置幻灯片的半透明

PPT2007中怎么设置幻灯片的半透明

设置,半透明,幻灯片,背景,效果,  PPT中的半透明背景效果类似于Word中的图片水印,有一种若隐若现的朦胧美。在PPT中应用这种半透明效果可以为幻灯片增色。以下是小编为您带来的关于PPT2007中设置幻灯片的半透明背景效果,希望对您有所帮助。P…

Iscrool下拉刷新功能实现方法 | 推

Iscrool下拉刷新功能实现方法 | 推

方法,下拉刷新,功能实现,推荐,电脑软件,简易下拉刷新实现方法css样式:*{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px solid red; over…

浅谈jsp中的9个隐含对象

浅谈jsp中的9个隐含对象

对象,浅谈,电脑软件,jsp,在JSP中一共有9个隐含对象,这个9个对象我可以在JSP中直接使用。因为在service方法已经对这个九个隐含对象进行声明及赋值,所以可以在JSP中直接使用。- pageContext类型:PageContext代表:当前页面的上下文作用:可以获取到…

Bootstrap笔记之缩略图、警告框实

Bootstrap笔记之缩略图、警告框实

警告框,缩略图,详解,实例,笔记, 1. 基础缩略图给a标签添加类class="thumbnail"如下:<div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nof…

excel表格使用填充功能的教程

excel表格使用填充功能的教程

教程,填充,表格,功能,电脑软件,  Excel中如何利用填充功能把序列给填充完整呢?下面是由小编分享的excel表格使用填充功能的教程,以供大家阅读和学习。excel表格使用填充功能的教程:  使用填充功能步骤1:在EXCEL中,我们可以很轻松的让其自动…

js代码延迟一定时间后执行一个函数

js代码延迟一定时间后执行一个函数

执行,延迟,实例,一个函数,代码,实例如下: setTimeout(funcName,500); function funcName() { xxxxxx; }0.5秒后执行funcName(),只执行一次setInterval(funcName,5000); 每隔5秒执行一次funcName()以上这篇js代码延迟一定时间后…

Word中进行设置页面格式的操作技巧

Word中进行设置页面格式的操作技巧

设置,操作技巧,页面,格式,操作步骤,  编辑文档时,必须把东西放在一页里面,但是字数又超出了,今天,小编就教大家在Word中进行设置页面格式的操作技巧。Word中进行设置页面格式的操作步骤双击word进入word编辑视图,进行编辑。单击&ldquo;文件&rd…

怎么在word文档中添加漂亮的松树边

怎么在word文档中添加漂亮的松树边

边框,文档,松树,漂亮,电脑软件,  word中添加边框是很容易的,因为它自带了很多漂亮的边框样式。word文档为了更美观,可以自定义添加边框。以下是小编为您带来的关于word添加漂亮的松树边框,希望对您有所帮助。word添加漂亮的松树边框1、打开w…

js中Number数字数值运算后值不对的

js中Number数字数值运算后值不对的

运算,解决方法,数字,数值,电脑软件,问题:37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数)我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数…

运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、th", "pubDate": "2023-11-13 14:30:19" }