正文 

当前位置： 首页 > IT > java教程

jquery的promise这里介绍的很详细(代码片段)

liujinyu liujinyu     2022-12-22     371

关键词：

原文电梯：https://www.cnblogs.com/yelongsan/p/7644239.html

先前了解了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()/*...*/)
.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一致。

 

 
 





解析命令行参数的方法(代码片段)

...有一篇非常优秀的博客已经介绍的很详细了，大家可以去这里参考：https://www.cnblogs.com/aland-1415/p/6613449.html　　　这里为大家介绍一个比sys.argv更强大的optparse模块。　　这里说一句题外话，点 查看详情

到底什么是promise?有什么用promise怎么用

相信很多人刚接触promise都会晕，但学会后却离不开它，本文详细介绍一下promise，promise解决的问题，帮助新手快速上手【扫盲】什么是promise？promise是一种约定，并非一种技术，像设计模式一样，跟语言无关、框架无关。js里面... 查看详情

promise介绍(代码片段)

promise简介Promise的出现，原本是为了解决回调地狱的问题。所有人在讲解Promise时，都会以一个ajax请求为例，此处我们也用一个简单的ajax的例子来带大家看一下Promise是如何使用的。ajax请求的传统写法：getData(method,url,successFun,failF... 查看详情

如何在promise链中共享变量？(代码片段)

译者按:使用Promise写过异步代码的话，会发现在Promise链中共享变量是一个非常头疼的问题，这也是Async/Await胜过Promise的一点，我们在Async/Await替代Promise的6个理由有提过，这篇博客将有更详细的介绍。原文:PassingdatabetweenPromisecallba... 查看详情

promise概念介绍(代码片段)

Promise概念介绍1、Promise是一个构造函数,既然是构造函数，那我们就可以newPromise()得到一个Promise的实例2、在Promise上，有两个函数，分别叫做resolve(成功之后的回调函数)和reject(失败之后的回调函数)3、在Promise的构造函... 查看详情

这个是真的厉害，高并发场景下的订单和库存处理方案，讲的很详细了！(代码片段)

...一千道一万都不如满满的干货来的实在，干货都下面了！介绍前提：分布式系统，高并发场景商品A只有100库存，现在有1000或者更多的用户购买。如何保证库存在高并发的场景下是安全的。预期结果：1.不超卖2.不少卖3 查看详情

promise杂记(代码片段)

更好的阅度体验前言APIPromise特点状态跟随V8中的asyncawait和Promise实现一个Promise前言作为一个前端开发，使用了Promise一年多了，一直以来都停留在API的调用阶段，没有很好的去深入。刚好最近阅读了V8团队的一篇如何实现更快的asy... 查看详情

(写的很详细哟)linux常用的基本指令(代码片段)

文章目录linux常用指令:vi编辑器linux常用指令:pwd:显示当前所在路径ls:显示当前目录下的文件显示家目录下的文件​-l(long的缩写)显示目录下文件的更详细的信息(文件权限,文件最后修改时间,文件大小)​-a(all的缩写)显示了隐藏文... 查看详情

(写的很详细哟)linux常用的基本指令(代码片段)

文章目录linux常用指令:vi编辑器linux常用指令:pwd:显示当前所在路径ls:显示当前目录下的文件显示家目录下的文件​-l(long的缩写)显示目录下文件的更详细的信息(文件权限,文件最后修改时间,文件大小)​-a(all的缩写)显示了隐藏文... 查看详情

jquery的promise和es6的promise的区别(代码片段)

 大概意思是：浏览器中的任务队列不止一个，且优先级也不同。基本上可以分为如下两种：macro-task:script（整体代码）,setTimeout,setInterval,setImmediate,I/O,UIrenderingmicro-task:process.nextTick,原生Promise,Object.observe,MutationObserver我们看到... 查看详情

sublime

...?sublime的功能也很强大，安装插件后你会用的很愉快。在这里较为详细的介绍三种必备插件：sidebarEnhancements，ChineseLocalizations，Emmet。这里需要去网页下载的只有sublime软件，packagecontrol插件就可以了。不用再到网页去下载其它准... 查看详情

html使用promises的jquery资产排队(代码片段)

查看详情

c++11promise和future介绍(代码片段)

【C++11】promise和future介绍C++11提供了std::promise和std::future两个模板类，通过这两个模板类可以实现异步存储值并获取值的功能。std::promiseTheclasstemplatestd::promiseprovidesafacilitytostoreavalueoranexceptionthatisla 查看详情

zabbix数据库表详细介绍(代码片段)

...，甚至的调优，那就不能不了解数据库的表结构了。我们这里采用的zabbix3.4、mysql，所以简单的说下我们mysql这边的表结构，其他环境不保证正确。mysql>showtables;+-----------------------+|Tables_in_zabbix|+-------------------- 查看详情

前端开发技术-promise是什么？

本文主要的目的是为大家介绍promise在前端的用法是怎样的，虽然有不少的解释文档，但对于新手来说并不友好。这里小千就给大家用最简单的大白话解释一下，并配上例子，废话不多说开始今天的介绍。Promise作... 查看详情

理解promise.all，promise.all与promise.race的区别，如何让promise.all在rejected后依然返回resolved状态(代码片段)

 壹?引我在es6入门4--promise详解这篇文章中有详细介绍Promise对象的用法，文章主题更偏向于对于Promise概念的理解与各方法基本使用介绍；而世上一个比较有趣的问题就是，即便按照前人提供的规则与方法去做一件事，也会因... 查看详情

promise

Promise是什么？Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。这句话说的很明白，Promise是一种用于解决异步问题的思路，方案或者对象方式。在js中，经常使用异步的地方... 查看详情

xilinxvivado的使用详细介绍：使用ip核(代码片段)

...方便，大大加快了开发速度。方式一：使用Verilog调用IP核这里简单举一个乘法器 查看详情