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


Posted in jQuery onOctober 10, 2017

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

打开浏览器的控制台先。

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

运行结果:

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

和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(){/*...*/})
.error(function(){/*...*/})
.complete(function(){/*...*/})

有时候比较喜欢在内部作为属性来处理。

分别表示ajax请求成功、失败、结束的回调。这三个方法与Deferred又是什么关系呢?其实就是语法糖,success对应done,error对应fail,complete对应always,就这样,只是为了与ajax的参数名字上保持一致而已。

总结:

$.Deferred实现了Promise规范,then、done、fail、always是Deferred对象的方法。$.when是一个全局的方法,用来并行运行多个异步任务,与ES6的all是一个功能。ajax返回一个受限的Deferred对象,success、error、complete是ajax提供的语法糖,功能与Deferred对象的done、fail、always一致。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
You might like
Banner程序
2006/10/09 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
PHP面试题及答案一
2012/06/18 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
计算机工程学院个人求职信
2013/10/05 职场文书
公司晚会策划方案
2014/05/17 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
杨善洲电影观后感
2015/06/04 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android