jQuery deffered和promise对象方法

Render 发布于2019-08-19 14:53 / 2776人阅读

摘要：三和对象方法对象其实就是对象的特例，因为对象不能更改异步状态，而对象可以。方法依次接受三个回调，分别为对象后触发的回调，返回一个对象。注意，必须传入函数，而该函数只有返回一个对象，才能够让异步事件按照预期顺序来执行。对象的方法对象和对象

一、前言

为了让前端们从回调的地狱中回到天堂，jQuery也引入了Promise的概念。Promise是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。jQuery从1.5版本开始实现了CommonJS Promise/A规范这一重量级方案，不过没有严格按照规范进行实现，有一些API上的差异。

好，让我们来看看他们的特性吧（本文示例基于jQuery 1.8版本以上）。

二、示例

以前写动画时，我们通常是这么干的：

$(".animateEle").animate({
    opacity:".5"
}, 4000,function(){
    $(".animateEle2").animate({
        width:"100px"
    },2000,function(){
        // 这样太伤了
        $(".animateEle3").animate({
            height:"0"
        },2000);
    });
});

假如这么使用回调的话，那就太伤了。幸好，还有一些现成的Promise解决方案来优雅地解决这种问题。

我们看看jQuery提供的解决办法。

var animate1 = function() {
    return $(".animateEle1").animate({opacity:".5"},4000).promise();
};
var animate2 = function() {
    return $(".animateEle2").animate({width:"100px"},2000).promise();
};
var animate3 = function(){
    return $(".animateEle3").animate({height:"0"},2000).promise();
};
// so easy,有木有，so clear，有木有
$.when(animate1()).then(animate2).then(animate3);

很明显，更改后的代码更易懂易读了。

但是，上面的代码，有些细节的东西并没有透露，一不小心，就容易出错，得不到我们想要的顺序完成动画的效果。下面让我们来全面理解jQuery提供的Promise和deferred对象的方法，看看到底如何使用。

三、promise和deffered对象方法

Promise对象其实就是deferred对象的特例，因为Promise对象不能更改异步状态，而deferred对象可以。这点在他们的方法设计上，有着明显的体现。

1.promise对象方法

通常，对于DOM，动画，ajax相关方法，我们都可以使用Promise方法。调用Promise方法，返回的是Promise对象。可以链式调用Promise方法。

promise对象常见的方法有三个：done，fail，then。

其它的方法就不要去记了，jQuery这里的接口方法太多了，在我看来挺啰嗦的，就跟早期的事件方法绑定一样，live，delegate，bind，最终不是都归为on来管了么。

代码示例，如下：

1.DOM使用Promise方法：

var box=$("#box");
box.promise().done(function(ele){
    console.log(ele);//jQuery box
});

2.Ajax使用Promise方法(默认返回一个Promise对象，所以可以不必显式调用Promise方法)：

$.post("/",{}).done(function(data){
    console.log("请求成功");
}).fail(function(){
    console.log("请求错误");
});

动画示例已有，就不重复列出了。

2.deferred对象方法

对于deferred对象呢，也就是使用$.Deferred()方法，以及$.when()等方法创造出来的对象，有如下的常用方法：

resolve,reject,notify;

done,fail,progress;

另外还有promise、then和always方法。

之所以这么排版，是因为他们是对应的，也就是说：resolve方法会触发done的回调执行，reject会触发fail的回调，notify会触发progress的回调。

直接看代码：

var wait = function(ms) {
    var dtd = $.Deferred();
    setTimeout(dtd.resolve, ms);
    // setTimeout(dtd.reject, ms);
    // setTimeout(dtd.notify, ms);
    return dtd.promise(); //此处也可以直接返回dtd
};

wait(2500).done(function() {
    console.log("haha,师太，你可让老衲久等了");
}).fail(function() {
    console.log("失败了");
}).progress(function(res) {
    console.log("等待中...");
});

我们看到了，上面的代码中，在wait函数中，返回的是个Promise对象，而不是deferred对象。

要知道，Promise对象是没有resolve,reject,notify等方法的，也就意味着，你无法针对Promise对象进行状态更改，只能在done或fail中进行回调配置。所以，你如果这么调用wait(2500).resolve()将会报错，因为wait(2500)返回的是个Promise对象，不存在resolve方法。

但是，这么做，有个好处，我们把dtd这个deferred对象放在了wait函数中，作为了局部变量，避免了全局的污染；进一步通过Promise方法，转化dtd这个deferred对象为Promise对象，避免了函数wait外部可能发生的状态更改（假如我们确实有这个需求）。

比如：

var wait = function(ms) {
    var dtd = $.Deferred();
    setTimeout(dtd.resolve, ms);
    // setTimeout(dtd.reject, ms);
    // setTimeout(dtd.notify, ms);
    return dtd; //此处也可以直接返回dtd
};

wait(2500).reject().fail(function(){
    console.log("失败了...............");
});

我们在外部更改了wait返回的deferred对象的状态，这样必然触发该对象的fail回调函数。

对于always方法，从字面意思上就很容易理解，deferred对象无论是resolve还是reject，都会触发该方法的回调。

3.其它共性

此处讲讲then和$.when方法的使用。它们对Promise对象也适用。

$.when方法接受多个deferred对象或者纯javascript对象，返回Promise对象。

then方法依次接受三个回调，分别为deferred对象resolve,reject,notify后触发的回调，返回一个Promise对象。注意，必须传入函数，而该函数只有返回一个Promise对象，才能够让异步事件按照预期顺序来执行。

我们来看看最开始的动画示例代码，$.when(animate1()).then(animate2).then(animate3)，$.when方法中接受了一个animate1的函数执行结果，也就是得到了一个Promise对象，而后的then中，则只是接受了一个变量名，这样得到的结果是一个匿名的函数体，而该函数中返回的是Promise对象。正好符合了我们对then接受参数的要求。

假如我们把执行语句改成：$.when(animate1()).then(animate2()).then(animate3())，这样造成的结果就是三个动画同步执行了。与$.when(animate1(),animate2(),animate3())无异。

既然then是如此要求，那么与then方法类似的done,fail,progress也是一样的。

四、参考文章

因为jQuery deffered和promise对象方法使用起来比较繁琐，接口太多，同样一件事儿，你可以有好几种写法。所以，某些接口方法可能会被废弃。若要使用其它方法，请去官网参考。

jQuery deferred 对象的 promise 方法

Promise对象和Deferred对象

云服务器 GPU云服务器 jquery_promise实现 jquery_promise异步对象jquery deffered

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78168.html

前后分离模型之封装 Api 调用

摘要：和异步处理调用访问数据采用的方式，这是一个异步过程，异步过程最基本的处理方式是事件或回调，其实这两种处理方式实现原理差不多，都需要在调用异步过程的时候传入一个在异步过程结束的时候调用的接口。 Ajax 和异步处理调用 API 访问数据采用的 Ajax 方式，这是一个异步过程，异步过程最基本的处理方式是事件或回调，其实这两种处理方式实现原理差不多，都需要在调用异步过程的时候传入一个在异...

trilever 2019-08-21 17:40 评论0 收藏0
通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

摘要：和和都有和，但是略有不同。实际上返回的是一个对象。和添加的回调，添加的回调。所以在调用成功的情况下执行添加的回调，调用失败时执行添加的回调。，产生对象并，产生对象并，然后继续处理，的语法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不过它们的作用可以简单的用两句话来描述 Deffere...

Yujiaao 2019-08-21 10:39 评论0 收藏0
js手动实现promise

摘要：依次循环直到当前没有子如何让异步的在函数中拿到将函数和放入同一个对象对象里面的时候将设置。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对对象添加回调函数，也会立即得到这个结果。 let promise = new Promise((resolve111, reject) => { //这里放入我们要执行的函数，可能是同步，也可能是异...

VPointer 2019-08-23 14:37 评论0 收藏0
Promise-resolve流程源码剖析

原文链接：链接 1 最简单一个案例 function runAsync(){ let p = new Promise(function(resolve,reject){ console.log(exec); setTimeout(function(){ resolve(someData); },2000); }); return p; } var ...

Amos 2019-08-22 11:22 评论0 收藏0
JS魔法堂：深究JS异步编程模型

摘要：而同步和异步则是描述另一个方面。异步将数据从内核空间拷贝到用户空间的操作由系统自动处理，然后通知应用程序直接使用数据即可。前言上周5在公司作了关于JS异步编程模型的技术分享，可能是内容太干的缘故吧，最后从大家的表情看出这条粉肠到底在说啥？的结果:(下面是PPT的讲义，具体的PPT和示例代码在https://github.com/fsjohnhuan...上，有兴趣就上去看看吧！ ...

idealcn 2019-08-20 12:35 评论0 收藏0