您的位置:时时app平台注册网站 > web前端 > jQuery之Deferred对象详解彩世界网址

jQuery之Deferred对象详解彩世界网址

2019-10-14 22:33

前端基础进阶(13):透彻掌握Promise的使用,读这篇就够了

2017/04/04 · JavaScript · Promise

原文出处: 波同学   

 

彩世界网址 1

Promise:高手必备

Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻。这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现。

在实际的使用当中,有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。

// 简单的ajax原生实现 var url = ''; var result; var XHR = new XMLHttpRequest(); XHR.open('GET', url, true); XHR.send(); XHR.onreadystatechange = function() { if (XHR.readyState == 4 && XHR.status == 200) { result = XHR.response; console.log(result); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 简单的ajax原生实现
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;
 
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
 
XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
    }
}

在ajax的原生实现中,利用了onreadystatechange事件,当该事件触发并且符合一定条件时,才能拿到我们想要的数据,之后我们才能开始处理数据。

这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这个新的ajax请求的其中一个参数,得从上一个ajax请求中获取,这个时候我们就不得不如下这样做:

var url = ''; var result; var XHR = new XMLHttpRequest(); XHR.open('GET', url, true); XHR.send(); XHR.onreadystatechange = function() { if (XHR.readyState == 4 && XHR.status == 200) { result = XHR.response; console.log(result); // 伪代码 var url2 = 'http:xxx.yyy.com/zzz?ddd=' result.someParams; var XHR2 = new XMLHttpRequest(); XHR2.open('GET', url, true); XHR2.send(); XHR2.onreadystatechange = function() { ... } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;
 
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
 
XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
 
        // 伪代码
        var url2 = 'http:xxx.yyy.com/zzz?ddd=' result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open('GET', url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}

当出现第三个ajax(甚至更多)仍然依赖上一个请求的时候,我们的代码就变成了一场灾难。这场灾难,往往也被称为回调地狱

因此我们需要一个叫做Promise的东西,来解决这个问题。

当然,除了回调地狱之外,还有一个非常重要的需求:为了我们的代码更加具有可读性和可维护性,我们需要将数据请求与数据处理明确的区分开来。上面的写法,是完全没有区分开,当数据变得复杂时,也许我们自己都无法轻松维护自己的代码了。这也是模块化过程中,必须要掌握的一个重要技能,请一定重视。

从前面几篇文中的知识我们可以知道,当我们想要确保某代码在谁谁之后执行时,我们可以利用函数调用栈,将我们想要执行的代码放入回调函数中。

// 一个简单的封装 function want() { console.log('这是你想要执行的代码'); } function fn(want) { console.log('这里表示执行了一大堆各种代码'); // 其他代码执行完毕,最后执行回调函数 want && want(); } fn(want);

1
2
3
4
5
6
7
8
9
10
11
12
13
// 一个简单的封装
function want() {
    console.log('这是你想要执行的代码');
}
 
function fn(want) {
    console.log('这里表示执行了一大堆各种代码');
 
    // 其他代码执行完毕,最后执行回调函数
    want && want();
}
 
fn(want);

利用回调函数封装,是我们在初学JavaScript时常常会使用的技能。

确保我们想要的代码压后执行,除了利用函数调用栈的执行顺序之外,我们还可以利用上一篇文章所述的队列机制。

function want() { console.log('这是你想要执行的代码'); } function fn(want) { // 将想要执行的代码放入队列中,根据事件循环的机制,我们就不用非得将它放到最后面了,由你自由选择 want && setTimeout(want, 0); console.log('这里表示执行了一大堆各种代码'); } fn(want);

1
2
3
4
5
6
7
8
9
10
11
function want() {
    console.log('这是你想要执行的代码');
}
 
function fn(want) {
    // 将想要执行的代码放入队列中,根据事件循环的机制,我们就不用非得将它放到最后面了,由你自由选择
    want && setTimeout(want, 0);
    console.log('这里表示执行了一大堆各种代码');
}
 
fn(want);

如果浏览器已经支持了原生的Promise对象,那么我们就知道,浏览器的js引擎里已经有了Promise队列,这样就可以利用Promise将任务放在它的队列中去。

function want() { console.log('这是你想要执行的代码'); } function fn(want) { console.log('这里表示执行了一大堆各种代码'); // 返回Promise对象 return new Promise(function(resolve, reject) { if (typeof want == 'function') { resolve(want); } else { reject('TypeError: ' want '不是一个函数') } }) } fn(want).then(function(want) { want(); }) fn('1234').catch(function(err) { console.log(err); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function want() {
    console.log('这是你想要执行的代码');
}
 
function fn(want) {
    console.log('这里表示执行了一大堆各种代码');
 
    // 返回Promise对象
    return new Promise(function(resolve, reject) {
        if (typeof want == 'function') {
            resolve(want);
        } else {
            reject('TypeError: ' want '不是一个函数')
        }
    })
}
 
fn(want).then(function(want) {
    want();
})
 
fn('1234').catch(function(err) {
    console.log(err);
})

看上去变得更加复杂了。可是代码变得更加健壮,处理了错误输入的情况。

为了更好的往下扩展Promise的应用,这里需要先跟大家介绍一下Promsie的基础知识。

一、 Promise对象有三种状态,他们分别是:

  • pending: 等待中,或者进行中,表示还没有得到结果
  • resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行
  • rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行

这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化。

new Promise(function(resolve, reject) { if(true) { resolve() }; if(false) { reject() }; })

1
2
3
4
new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})

上面的resolve和reject都为一个函数,他们的作用分别是将状态修改为resolved和rejected。

二、 Promise对象中的then方法,可以接收构造函数中处理的状态变化,并分别对应执行。then方法有2个参数,第一个函数接收resolved状态的执行,第二个参数接收reject状态的执行。

function fn(num) { return new Promise(function(resolve, reject) { if (typeof num == 'number') { resolve(); } else { reject(); } }).then(function() { console.log('参数是一个number值'); }, function() { console.log('参数不是一个number值'); }) } fn('hahha'); fn(1234);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    }).then(function() {
        console.log('参数是一个number值');
    }, function() {
        console.log('参数不是一个number值');
    })
}
 
fn('hahha');
fn(1234);

then方法的执行结果也会返回一个Promise对象。因此我们可以进行then的链式执行,这也是解决回调地狱的主要方式。

function fn(num) { return new Promise(function(resolve, reject) { if (typeof num == 'number') { resolve(); } else { reject(); } }) .then(function() { console.log('参数是一个number值'); }) .then(null, function() { console.log('参数不是一个number值'); }) } fn('hahha'); fn(1234);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    })
    .then(function() {
        console.log('参数是一个number值');
    })
    .then(null, function() {
        console.log('参数不是一个number值');
    })
}
 
fn('hahha');
fn(1234);

then(null, function() {}) 就等同于catch(function() {})

三、Promise中的数据传递

大家自行从下面的例子中领悟吧。

var fn = function(num) { return new Promise(function(resolve, reject) { if (typeof num == 'number') { resolve(num); } else { reject('TypeError'); } }) } fn(2).then(function(num) { console.log('first: ' num); return num 1; }) .then(function(num) { console.log('second: ' num); return num 1; }) .then(function(num) { console.log('third: ' num); return num 1; }); // 输出结果 first: 2 second: 3 third: 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var fn = function(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve(num);
        } else {
            reject('TypeError');
        }
    })
}
 
fn(2).then(function(num) {
    console.log('first: ' num);
    return num 1;
})
.then(function(num) {
    console.log('second: ' num);
    return num 1;
})
.then(function(num) {
    console.log('third: ' num);
    return num 1;
});
 
// 输出结果
first: 2
second: 3
third: 4

OK,了解了这些基础知识之后,我们再回过头,利用Promise的知识,对最开始的ajax的例子进行一个简单的封装。看看会是什么样子。

var url = ''; // 封装一个get请求的方法 function getJSON(url) { return new Promise(function(resolve, reject) { var XHR = new XMLHttpRequest(); XHR.open('GET', url, true); XHR.send(); XHR.onreadystatechange = function() { if (XHR.readyState == 4) { if (XHR.status == 200) { try { var response = JSON.parse(XHR.responseText); resolve(response); } catch (e) { reject(e); } } else { reject(new Error(XHR.statusText)); } } } }) } getJSON(url).then(resp => console.log(resp));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
 
// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();
 
        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}
 
getJSON(url).then(resp => console.log(resp));

为了健壮性,处理了很多可能出现的异常,总之,就是正确的返回结果,就resolve一下,错误的返回结果,就reject一下。并且利用上面的参数传递的方式,将正确结果或者错误信息通过他们的参数传递出来。

现在所有的库几乎都将ajax请求利用Promise进行了封装,因此我们在使用jQuery等库中的ajax请求时,都可以利用Promise来让我们的代码更加优雅和简单。这也是Promise最常用的一个场景,因此我们一定要非常非常熟悉它,这样才能在应用的时候更加灵活。

四、Promise.all

当有一个ajax请求,它的参数需要另外2个甚至更多请求都有返回结果之后才能确定,那么这个时候,就需要用到Promise.all来帮助我们应对这个场景。

Promise.all接收一个Promise对象组成的数组作为参数,当这个数组所有的Promise对象状态都变成resolved或者rejected的时候,它才会去调用then方法。

var url = ''; var url1 = ''; function renderAll() { return Promise.all([getJSON(url), getJSON(url1)]); } renderAll().then(function(value) { // 建议大家在浏览器中看看这里的value值 console.log(value); })

1
2
3
4
5
6
7
8
9
10
11
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';
 
function renderAll() {
    return Promise.all([getJSON(url), getJSON(url1)]);
}
 
renderAll().then(function(value) {
    // 建议大家在浏览器中看看这里的value值
    console.log(value);
})

五、 Promise.race

与Promise.all相似的是,Promise.race都是以一个Promise对象组成的数组作为参数,不同的是,只要当数组中的其中一个Promsie状态变成resolved或者rejected时,就可以调用.then方法了。而传递给then方法的值也会有所不同,大家可以再浏览器中运行下面的例子与上面的例子进行对比。

function renderRace() { return Promise.race([getJSON(url), getJSON(url1)]); } renderRace().then(function(value) { console.log(value); })

1
2
3
4
5
6
7
function renderRace() {
    return Promise.race([getJSON(url), getJSON(url1)]);
}
 
renderRace().then(function(value) {
    console.log(value);
})

嗯,我所知道的,关于Promise的基础知识就这些了,如果还有别的,欢迎大家补充。

那么接下来,我们要结合三个不同的应用场景来让大家感受一下Promise在模块系统中如何使用。

这里选择requirejs是因为学习成本最低,能够快速上手进行简单的运用。接下来的这些例子,会涉及到很多其他的知识,因此如果想要彻底掌握,一定要动手实践,自己试着完成一遍。

我在github上创建了对应的项目,大家可以直接clone下来进行学习。这样学习效果会更好。

项目地址:

往下阅读例子之前,请一定要对requirejs有一个简单的了解。

requirejs中文文档

彩世界网址 2

代码结构

项目的代码结果如上图所示,所有的html文件都放在根目录下。

  • pages: html直接引入的js
  • libs: 常用的库
  • components: 针对项目自定义的模块

首先为了能够让require起作用,我们需要在html中引入require.js,写法如下:

// index.js为入口文件

1
// index.js为入口文件

在入口的index.js中,我们可以对常用的模块进行映射配置,这样在引入时就可以少写一些代码。

// 具体的配置项的含义,请参阅require的中文文档 requirejs.config({ baseUrl: './', paths: { jquery: "./libs/jquery-3.2.0", API: './libs/API', request: './libs/request', calendar: './components/calendar', imageCenter: './components/imageCenter', dialog: './components/Dialog' } })

1
2
3
4
5
6
7
8
9
10
11
12
// 具体的配置项的含义,请参阅require的中文文档
requirejs.config({
    baseUrl: './',
    paths: {
        jquery: "./libs/jquery-3.2.0",
        API: './libs/API',
        request: './libs/request',
        calendar: './components/calendar',
        imageCenter: './components/imageCenter',
        dialog: './components/Dialog'
    }
})

配置之后,那么我们在其他模块中,引入配置过的模块,就可以简单的这样写:

var $ = require('jquery');

1
var $ = require('jquery');

如果不进行配置,也可以这样引入模块:

require('./components/button');

1
require('./components/button');

我们可以使用define定义一个模块:

// 其他方式请参阅文档 define(function(require) { })

1
2
3
4
// 其他方式请参阅文档
define(function(require) {
 
})

使用return可以直接对外提供方法:

// 在其他模块通过require引入时得到的值,就是这里返回的值 define(function(require) { return { a: 1 } })

1
2
3
4
5
6
// 在其他模块通过require引入时得到的值,就是这里返回的值
define(function(require) {
    return {
        a: 1
    }
})

OK,了解上面这些,应付基础的使用已经没有问题了。我们接下来重点总结第一个常用的应用场景:ajax。

关于ajax的简单使用和简单封装,我们在上面都已经讲过了,这里就不再多说,直接使用jquery封装好的方法即可。而我们需要处理的问题在于,如何有效的将ajax的数据请求和数据处理分别放在不同的模块中进行管理,这样做的主要目的在于降低后期维护成本,便于管理。

来看看怎么样简单操作的。

首先,将所有的url放在一个模块中统一处理。

// libs/API.js define(function() { return { dayInfo: '', typeInfo: '' } })

1
2
3
4
5
6
7
// libs/API.js
define(function() {
    return {
        dayInfo: 'https://hq.tigerbrokers.com/fundamental/finance_calendar/get_day/2017-04-03',
        typeInfo: 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-04-15'
    }
})

在实际开发中,url并不是直接通过字符串就能直接确认的,某些url还需要通过参数拼接等,这个时候需要我们灵活处理。

第二步,将所有的数据请求这个动作放在同一个模块中统一管理。

// libs/request.js define(function(require) { var API = require('API'); // 因为jQuery中的get方法也是通过Promise进行了封装,最终返回的是一个Promise对象,因此这样我们就可以将数据请求与数据处理放在不同的模块 // 这样我们就可以使用一个统一的模块来管理所有的数据请求 // 获取当天的信息 getDayInfo = function() { return $.get(API.dayInfo); } // 获取type信息 getTypeInfo = function() { return $.get(API.typeInfo); }; return { getDayInfo: getDayInfo, getTypeInfo: getTypeInfo } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// libs/request.js
define(function(require) {
    var API = require('API');
 
    // 因为jQuery中的get方法也是通过Promise进行了封装,最终返回的是一个Promise对象,因此这样我们就可以将数据请求与数据处理放在不同的模块
    // 这样我们就可以使用一个统一的模块来管理所有的数据请求
 
    // 获取当天的信息
    getDayInfo = function() {
        return $.get(API.dayInfo);
    }
 
    // 获取type信息
    getTypeInfo = function() {
        return $.get(API.typeInfo);
    };
 
    return {
        getDayInfo: getDayInfo,
        getTypeInfo: getTypeInfo
    }
});

在这个模块中,我们还可以对拿到的数据进行一些你需要的过滤处理,确保最终返回给下一个模块的数据是能够直接使用的。

第三步:就是拿到数据并且处理数据了。

// components/calendar.js define(function(require) { var request = require('request'); // 拿到数据之后,需要处理的组件,可以根据数据渲染出需求想要的样式 // 当然这里为了简化,就仅仅只是输出数据就行了,在实际中,拿到数据之后还要进行相应的处理 request.getTypeInfo() .then(function(resp) { // 拿到数据,并执行处理操作 console.log(resp); }) // 这样,我们就把请求数据,与处理数据分离开来,维护起来就更加方便了,代码结构也足够清晰 })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// components/calendar.js
define(function(require) {
    var request = require('request');
 
    // 拿到数据之后,需要处理的组件,可以根据数据渲染出需求想要的样式
    // 当然这里为了简化,就仅仅只是输出数据就行了,在实际中,拿到数据之后还要进行相应的处理
 
    request.getTypeInfo()
        .then(function(resp) {
 
            // 拿到数据,并执行处理操作
            console.log(resp);
        })
 
    // 这样,我们就把请求数据,与处理数据分离开来,维护起来就更加方便了,代码结构也足够清晰
})

这就是我所了解的处理ajax的比较好的一个方式,如果你有其他更好的方式也欢迎分享。

第二个应用场景就是图片加载的问题。
在一些实际应用中,常常会有一些图片需要放置在某一个块中,比如头像,比如某些图片列表。可是源图片的尺寸可能很难保证长宽比例都是一致的,如果我们直接给图片设定宽高,就有可能导致图片变形。变形之后高大上的页面就直接垮掉了。

因此为了解决这个问题,我们需要一个定制的image组件来解决这个问题。我们期望图片能够根据自己的宽高比,合理的缩放,保证在这个块中不变形的情况下尽可能的显示更多的内容。

假如有一堆图片,如下:

XHTML

<section class="img-wrap"> <div class="img-center"> ![]() </div> <div class="img-center"> ![]() </div> <div class="img-center"> ![]() </div> <div class="img-center"> ![]() </div> </section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="img-wrap">
    <div class="img-center">
        ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491191204817&di=48ea9cde3319576ed6e0b6dc6c6b75b4&imgtype=0&src=http://a.hiphotos.baidu.com/zhidao/pic/item/342ac65c103853438b3c5f8b9613b07ecb8088ad.jpg)
    </div>
 
    <div class="img-center">
        ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491191241712&di=9dbd9c614b82f0b02c92c6e60875983a&imgtype=0&src=http://pic5.qiyipic.com/common/20130524/7dc5679567cd4243a0a41e5bf626ad77.jpg?src=focustat_4_20130527_7)
    </div>
 
    <div class="img-center">
        ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491191271233&di=0c9dd2677413beadcccd66b9d4598c6b&imgtype=0&src=http://b.zol-img.com.cn/desk/bizhi/image/4/960x600/1390442684896.jpg)
    </div>
 
    <div class="img-center">
        ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491191294538&di=6474f3b560f2c100e62f118dde7e8d6c&imgtype=0&src=http://f.hiphotos.baidu.com/zhidao/pic/item/c9fcc3cec3fdfc03dfdfafcad23f8794a4c22618.jpg)
    </div>
</section>

每一张图片都有一个包裹的div,这些div的宽高,就是我们期望图片能保持的宽高。

当图片宽度值过大时,我们期望图片的高度为100%,并且左右居中。
当图片高度值过大时,我们期望图片的宽度为100%,并且上下居中。

根据这一点,我们来看看具体怎么实现。

首先是样式的定义很重要。

.img-center { width: 200px; height: 150px; margin: 20px; overflow: hidden; position: relative; } .img-center img { display: block; position: absolute; } .img-center img.aspectFill-x { width: 100%; top: 50%; transform: translateY(-50%); } .img-center img.aspectFill-y { height: 100%; left: 50%; transform: translateX(-50%); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.img-center {
    width: 200px;
    height: 150px;
    margin: 20px;
    overflow: hidden;
    position: relative;
}
 
.img-center img {
    display: block;
    position: absolute;
}
 
.img-center img.aspectFill-x {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
 
.img-center img.aspectFill-y {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

我分别定义了aspectFill-xaspectFill-y,通过判断不同的宽高比,来决定将他们中的其中一个加入到img标签的class中去即可。

获取图片的原始宽高,需要等到图片加载完毕之后才能获取。而当图片已经存在缓存时,则有一个compete属性变成true。那么我们就可以根据这些基础知识,定义一个模块来处理这件事情。

// components/imageCenter.js define(function(require) { // 利用Promise封装一个加载函数,这里也是可以单独放在一个功能模块中进一步优化 var imageLoad = function(img) { return new Promise(function(resolve, reject) { if (img.complete) { resolve(); } else { img.onload = function(event) { resolve(event); } img.onerror = function(err) { reject(err); } } }) } var imageCenter = function(domList, mode) { domList.forEach(function(item) { var img = item.children[0]; var itemW = item.offsetWidth; var itemH = item.offsetHeight; var itemR = itemW / itemH; imageLoad(img).then(function() { var imgW = img.naturalWidth; var imgH = img.naturalHeight; var imgR = imgW / imgH; var resultMode = null; switch (mode) { // 这样写是因为期待未来可以扩展其他的展示方式 case 'aspectFill': resultMode = imgR > 1 ? 'aspectFill-x' : 'aspectFill-y'; break; case 'wspectFill': resultMode = itemR > imgR ? 'aspectFill-x' : 'aspectFill-y' break; default: } $(img).addClass(resultMode); }) }) } return imageCenter; })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// components/imageCenter.js
define(function(require) {
 
    // 利用Promise封装一个加载函数,这里也是可以单独放在一个功能模块中进一步优化
    var imageLoad = function(img) {
        return new Promise(function(resolve, reject) {
            if (img.complete) {
                resolve();
            } else {
                img.onload = function(event) {
                    resolve(event);
                }
 
                img.onerror = function(err) {
                    reject(err);
                }
            }
        })
    }
 
    var imageCenter = function(domList, mode) {
 
        domList.forEach(function(item) {
            var img = item.children[0];
            var itemW = item.offsetWidth;
            var itemH = item.offsetHeight;
            var itemR = itemW / itemH;
 
            imageLoad(img).then(function() {
                var imgW = img.naturalWidth;
                var imgH = img.naturalHeight;
                var imgR = imgW / imgH;
 
                var resultMode = null;
 
                switch (mode) {
                    // 这样写是因为期待未来可以扩展其他的展示方式
                    case 'aspectFill':
                        resultMode = imgR > 1 ? 'aspectFill-x' : 'aspectFill-y';
                        break;
                    case 'wspectFill':
                        resultMode = itemR > imgR ? 'aspectFill-x' : 'aspectFill-y'
                        break;
                    default:
                }
 
                $(img).addClass(resultMode);
            })
        })
    }
 
    return imageCenter;
})

那么在使用时,直接引入这个模块并调用imageCenter方法即可。

// index.js var imageCenter = require('imageCenter'); var imageWrapList = document.querySelectorAll('.img-center'); imageCenter(imageWrapList, 'wspectFill');

1
2
3
4
// index.js
var imageCenter = require('imageCenter');
var imageWrapList = document.querySelectorAll('.img-center');
imageCenter(imageWrapList, 'wspectFill');

彩世界网址 3

一堆尺寸乱七八糟的图片就这样被驯服了

第三个应用场景,则是自定义弹窗的处理。

彩世界网址 4

这种类型的弹窗随处可见,而且十分常用

因此自己专门定义一个常用的弹窗就变得非常有必要,这对于我们开发效率的提高非常有帮助。当然,我这里只是简单的写了一个简陋的,仅供参考。

我们期望的是利用Promise,当我们点击确认时,状态变成resolved,点击取消时,状态变成rejected。这样也方便将弹窗生成与后续的操作处理区分开来。

先定义一个Dialog模块。使用的是最简单的方式定义,应该不会有什么理解上的困难。主要提供了show和hide2个方法,用于展示和隐藏。

JavaScript

// components/Dialog.js define(function(require) { // 利用闭包的特性,判断是否已经存在实例 var instance; function Dialog(config) { this.title = config.title ? config.title : '这是标题'; this.content = config.content ? config.content : '这是提示内容'; this.html = '<div class="dialog-dropback">' '<div class="container">' '<div class="head">' this.title '</div>' '<div class="content">' this.content '</div>' '<div class="footer">' '<button class="cancel">取消</button>' '<button class="confirm">确认</button>' '</div>' '</div>' '</div>' } Dialog.prototype = { constructor: Dialog, show: function() { var _this = this; if (instance) { this.destory(); } $(this.html).appendTo($(document.body)); instance = this; return new Promise(function(resolve, reject) { $('.dialog-dropback .cancel').on('click', function(e) { _this.hide(); reject(e); }) $('.dialog-dropback .confirm').on('click', function(e) { _this.hide(); resolve(e); }) }) }, destory: function() { instance = null; $('.dialog-dropback .cancel').off('click'); $('.dialog-dropback .confirm').off('click'); $('.dialog-dropback').remove(); }, hide: function() { this.destory(); } } return function(config) { return new Dialog(config); } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// components/Dialog.js
define(function(require) {
 
    // 利用闭包的特性,判断是否已经存在实例
    var instance;
 
    function Dialog(config) {
 
        this.title = config.title ? config.title : '这是标题';
        this.content = config.content ? config.content : '这是提示内容';
 
        this.html = '<div class="dialog-dropback">'
            '<div class="container">'
                '<div class="head">' this.title '</div>'
                '<div class="content">' this.content '</div>'
                '<div class="footer">'
                    '<button class="cancel">取消</button>'
                    '<button class="confirm">确认</button>'
                '</div>'
            '</div>'
        '</div>'
    }
 
    Dialog.prototype = {
        constructor: Dialog,
        show: function() {
            var _this = this;
            if (instance) {
                this.destory();
            }
            $(this.html).appendTo($(document.body));
            instance = this;
 
            return new Promise(function(resolve, reject) {
                $('.dialog-dropback .cancel').on('click', function(e) {
                    _this.hide();
                    reject(e);
                })
 
                $('.dialog-dropback .confirm').on('click', function(e) {
                    _this.hide();
                    resolve(e);
                })
            })
        },
 
        destory: function() {
            instance = null;
            $('.dialog-dropback .cancel').off('click');
            $('.dialog-dropback .confirm').off('click');
            $('.dialog-dropback').remove();
        },
 
        hide: function() {
            this.destory();
        }
    }
 
    return function(config) {
        return new Dialog(config);
    }
})

那么在另外一个模块中需要使用它时:

define(function(require) { var Dialog = require('dialog'); $('button.aspect').on('click', function() { Dialog({ title: '友情提示', content: '外面空气不太好,你确定你要出门逛逛吗?' }).show().then(function() { console.log('你点击了确认按钮.'); }).catch(function() { console.log('你点击了取消按钮.'); }) }) })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
define(function(require) {
    var Dialog = require('dialog');
 
    $('button.aspect').on('click', function() {
        Dialog({
            title: '友情提示',
            content: '外面空气不太好,你确定你要出门逛逛吗?'
        }).show().then(function() {
            console.log('你点击了确认按钮.');
        }).catch(function() {
            console.log('你点击了取消按钮.');
        })
    })
})

这三种场景就介绍完了,主要是需要大家通过源码来慢慢理解和揣摩。真正掌握之后,相信大家对于Promise在另外的场景中的使用也会变得得心应手。

最后总结一下,这篇文章,涉及到的东西,有点多。大概包括Promise基础知识,ajax基础知识,如何利用Promise封装ajax,如何使用require模块系统,如何在模块中使用Promise,并且对应的三个应用场景又各自有许多需要了解的知识,因此对于基础稍差的朋友来说,理解透彻了肯定会有一个比较大的进步。当然也会花费你更多的时间。

另外在我们的工作中还有一件非常重要的事情是需要我们持续去做的。那就是将常用的场景封装成为可以共用的模块,等到下次使用时,就可以直接拿来使用而节省非常多的开发时间。比如我这里对于img的处理,对于弹窗的处理,都是可以扩展成为一个通用的模块的。慢慢积累多了,你的开发效率就可以得到明显的提高,这些积累,也将会变成你的优势所在。

后续的文章我会分享如何利用react与es6模块系统封装的共用组件,大家也可以学习了之后,根据自己的需求,封装最适合你自己的一套组件。

最后,最近问我怎么学习的人越来越多,我真的有点回答不过来了,我想把我这些文章里的知识都掌握了,应付毕业之后的第一份工作应该不是什么问题的吧?有的时候真的觉得读我的文章学知识你们真的好幸福的,为了你们能够掌握Promise的使用,我还专门给读者老爷们创建了一个项目,列举了整整三个实例,还有源代码供你们学习,我学Promise的时候,找好久都没找到一个稍微接近实际应用的案例,学了好久才知道怎么使用,效率之低可想而知。所以静下心来慢慢学习吧,花点时间是值得的 ~ ~ 。

2 赞 9 收藏 评论

彩世界网址 5

var deferred = $.Deferred();
deferred.done(function(value) {
   alert(value);
});

加入超时处理的fetchRequest网络请求的使用方法跟没加入超时处理一样。 对于fetch网络请求的超时处理的封装参考下面这篇文章而写:

[让fetch也可以timeout](http://imweb.io/topic/57c6ea35808fd2fb204eef63)

转载http://blog.csdn.net/sinat_17775997/article/details/72511024

$.when({testing: 123}).done(function (x){
  console.log(x.testing); // "123"
});

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好。而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API。http://blog.csdn.NET/withings/article/details/71331726

改写setTimeout方法

produces="text/html;charset=UTF-8"```
#fetchRequest使用如下:
  GET请求:

复制代码 代码如下:

return fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });```
Fetch API的详细介绍及使用说明请参考如下文章:
  [React Native 网络请求官方文档](https://github.com/reactnativecn/react-native-docs-cn/blob/master/docs/0.31/network.md)

  [深入浅出Fetch API](http://web.jobbole.com/84924/)

  [传统 Ajax 已死,Fetch 永生](https://github.com/camsong/blog/issues/2)

  [【翻译】这个API很“迷人”——(新的Fetch API)](https://www.w3ctech.com/topic/854?utm_source=tuicool&utm_medium=referral)

#使用Promise封装fetch请求

由于在项目中很多地方都需要用到网络请求,为了使用上的方便,使用ES6的Promise来封装fetch网络请求,代码如下:

该方法用来返回deferred对象目前的状态。

  • @param {string} url 接口地址
  • @param {string} method 请求方法:GET、POST,只能大写
  • @param {JSON} [params=''] body的请求参数,默认为空
  • @return 返回Promise
    */
    function fetchRequest(url, method, params = ''){
    let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    };
    console.log('request url:',url,params); //打印请求参数
    if(params == ''){ //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
    fetch(common_url url, {
    method: method,
    headers: header
    }).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url,responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }else{ //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
    fetch(common_url url, {
    method: method,
    headers: header,
    body:JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析
    }).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url, responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }
    }```

这两个方法都用来绑定回调函数。done()指定非同步操作成功后的回调函数,fail()指定失败后的回调函数。

fetchRequest('app/book','GET')
.then( res=>{
//请求成功
if(res.header.statusCode == 'success'){
//这里设定服务器返回的header中statusCode为success时数据返回成功

复制代码 代码如下:

  • 让fetch也可以timeout

  • timeout不是请求连接超时的含义,它表示请求的response时间,包括请求的连接、服务器处理及服务器响应回来的时间

  • fetch的timeout即使超时发生了,本次请求也不会被abort丢弃掉,它在后台仍然会发送到服务器端,只是本次请求的响应内容被丢弃而已

  • @param {Promise} fetch_promise fetch请求返回的Promise

  • @param {number} [timeout=10000] 单位:毫秒,这里设置默认超时时间为10秒

  • @return 返回Promise
    */
    function timeout_fetch(fetch_promise,timeout = 10000) {
    let timeout_fn = null;

    //这是一个可以被reject的promise
    let timeout_promise = new Promise(function(resolve, reject) {
    timeout_fn = function() {
    reject('timeout promise');
    };
    });

    //这里使用Promise.race,以最快 resolve 或 reject 的结果来传入后续绑定的回调
    let abortable_promise = Promise.race([
    fetch_promise,
    timeout_promise
    ]);

    setTimeout(function() {
    timeout_fn();
    }, timeout);

    return abortable_promise ;
    }

jQuery的ajax() 方法返回的就是一个promise对象。此外,Animation类操作也可以使用promise对象。

上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。

fetch请求示例如下:

var deferred = $.Deferred();
deferred.done(function(value) {
   alert(value);
});
deferred.resolve("hello world");

  • @param {string} url 接口地址
  • @param {string} method 请求方法:GET、POST,只能大写
  • @param {JSON} [params=''] body的请求参数,默认为空
  • @return 返回Promise
    */
    function fetchRequest(url, method, params = ''){
    let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    };
    console.log('request url:',url,params); //打印请求参数
    if(params == ''){ //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
    timeout_fetch(fetch(common_url url, {
    method: method,
    headers: header
    })).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url,responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }else{ //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
    timeout_fetch(fetch(common_url url, {
    method: method,
    headers: header,
    body:JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析
    })).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url, responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }
    }

复制代码 代码如下:

let common_url = ''; //服务器地址
let token = '';
/**

复制代码 代码如下:

1.回调函数往往写成函数参数的形式,导致函数的输入和输出非常混乱,整个程序的可阅读性差;
2.回调函数往往只能指定一个,如果有多个操作,就需要改写回调函数。
3.整个程序的运行流程被打乱,除错和调试的难度都相应增加。

let params = {
    username:'admin',
    password:'123456'
}
fetchRequest('app/signin','POST',params)
    .then( res=>{
        //请求成功
        if(res.header.statusCode == 'success'){
            //这里设定服务器返回的header中statusCode为success时数据返回成功

        }else{
            //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc 
            console.log(res.header.msgArray[0].desc);
        }
    }).catch( err=>{ 
        //请求失败
    })```
#fetch超时处理
由于原生的Fetch API 并不支持timeout属性,如果项目中需要控制fetch请求的超时时间,可以对fetch请求进一步封装实现timeout功能,代码如下:

  fetchRequest超时处理封装

在jQuery 1.8版本之后,返回结果是

使用fetch请求,如果服务器返回的中文出现了乱码,则可以在服务器端设置如下代码解决:

复制代码 代码如下:

/**

复制代码 代码如下:

    }else{
        //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
        console.log(res.header.msgArray[0].desc);
    }
}).catch( err=>{ 
    //请求失败
})```

$.wait = function(time) {
  return $.Deferred(function(dfd) {
    setTimeout(dfd.resolve, time);
  });
}

let common_url = ''; //服务器地址
let token = '';
/**

有时,Ajax操作返回json字符串里面有一个error属性,表示发生错误。这个时候,传统的方法只能是通过done()来判断是否发生错误。通过then()方法,可以让deferred对象调用fail()方法。

  • POST请求:

在jQuery 1.8版本之前,上面代码的结果是:

复制代码 代码如下:

上面的代码会出错,显示TypeError {} 。

利用then()会修改返回值这个特性,我们可以在调用其他回调函数之前,对前一步操作返回的值进行处理。

上面代码的回调函数有三个参数,resp1、resp2和resp3,依次对应前面三个ajax操作的返回结果。

作用是生成一个deferred对象。

result = 2
result = 6
result = NaN

我们可以用deferred对象写一个wait方法,表示等待多少毫秒后再执行。

function doSomethingLater(fn, time) {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve(fn());
  }, time || 0);
  return dfd.promise();
}
var promise = doSomethingLater(function (){
  console.log( '已经延迟执行' );
}, 100);

var promise = get('');

var deferred = $.deferred();

复制代码 代码如下:

该方法的返回值有三个:

Twitter = {
  search:function(query) {
    var dfr = $.Deferred();
    $.ajax({
     url:"",
     data:{q:query},
     dataType:'jsonp',
     success:dfr.resolve
    });
    return dfr.promise();
  }
}

这两个方法用来改变deferred对象的状态。resolve()将状态改为非同步操作成功,reject()改为操作失败。

它们返回的是原有的deferred对象,因此可以采用链式写法,在后面再链接别的方法(包括done和fail在内)。

这一点需要特别引起注意。

然后,Promise对象有一个then方法,可以用来指定回调函数。一旦非同步操作完成,就调用指定的回调函数。

resolve() 和 reject()

$.ajax({
    url:"/echo/json/",
    success: function(response)
    {
       console.info(response.name);
    }
});

上面代码最后那个done方法,处理的是从url2获取的数据,而不是从url1获取的数据。

复制代码 代码如下:

在上面的wait方法的基础上,还可以改写setTimeout方法,让其返回一个deferred对象。

复制代码 代码如下:

复制代码 代码如下:

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

promise对象

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

大多数情况下,我们不想让用户从外部更改deferred对象的状态。这时,你可以在deferred对象的基础上,返回一个针对它的promise对象。我们可以把后者理解成,promise是deferred的只读版,或者更通俗地理解成promise是一个对将要完成的任务的承诺。

Promises就是为了解决这些问题而提出的,它的主要目的就是取代回调函数,成为非同步操作的解决方案。它的核心思想就是让非同步操作返回一个对象,其他操作都针对这个对象来完成。比如,假定ajax操作返回一个Promise对象。

使用方法如下:

state方法

上面代码中指定的回调函数,将在when方法后面立即运行。

使用方法如下:

可以将上面两段代码合并起来,这样程序的流程看得更清楚。

1.7版之后,Ajax操作直接返回Promise对象,这意味着可以用then方法指定回调函数。

你可以通过promise对象,为原始的deferred对象添加回调函数,查询它的状态,但是无法改变它的状态,也就是说promise对象不允许你调用resolve和reject方法。

var myDeferred = $.post('/echo/json/', {json:JSON.stringify({'error':true})})
    .then(function (response) {
            if (response.error) {
                return $.Deferred().reject(response);
            }
            return response;
        },function () {
            return $.Deferred().reject({error:true});
        }
    );
myDeferred.done(function (response) {
        $("#status").html("Success!");
    }).fail(function (response) {
        $("#status").html("An error occurred");
    });

promise.then(function (content) {
  console.log(content)
})

$.deferred()方法

var defer = jQuery.Deferred();
defer.done(function(a,b){
            return a * b;
}).done(function( result ) {
            console.log("result = " result);
}).then(function( a, b ) {
            return a * b;
}).done(function( result ) {
            console.log("result = " result);
}).then(function( a, b ) {
            return a * b;
}).done(function( result ) {
            console.log("result = " result);
});
defer.resolve( 2, 3 );

wait方法

复制代码 代码如下:

$.when()方法

result = 2
result = 2
result = 2

notify() 和 progress()

复制代码 代码如下:

jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象。

then()的作用也是指定回调函数,它可以接受三个参数,也就是三个回调函数。第一个参数是resolve时调用的回调函数,第二个参数是reject时调用的回调函数,第三个参数是progress()方法调用的回调函数。

when方法的另一个作用是,如果它的参数返回的不是一个Deferred或Promise对象,那么when方法的回调函数将 立即运行。

 var userProgress = $.Deferred();
    var $profileFields = $("input");
    var totalFields = $profileFields.length
    userProgress.progress(function (filledFields) {
        var pctComplete = (filledFields/totalFields)*100;
        $("#progress").html(pctComplete.toFixed(0));
    });
    userProgress.done(function () {
        $("#thanks").html("Thanks for completing your profile!").show();
    });
    $("input").on("change", function () {
        var filledFields = $profileFields.filter("[value!='']").length;
        userProgress.notify(filledFields);
        if (filledFields == totalFields) {
            userProgress.resolve();
        }
    });

$.ajax({
    url: "/echo/json/",
}).then(function (response) {
    console.info(response.name);
});

利用这个特点,我们可以写一个具有缓存效果的异步操作函数。也就是说,第一次调用这个函数的时候,将执行异步操作,后面再调用这个函数,将会返回缓存的结果。

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。

always()也是指定回调函数,不管是resolve或reject都要调用。

复制代码 代码如下:

when方法里面要执行多少个操作,回调函数就有多少个参数,对应前面每一个操作的返回结果。

$.ajax( url1, { dataType: "json" } )
.then(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
}).done(function( data ) {
  // 从url2获取的数据
});

复制代码 代码如下:

复制代码 代码如下:

get(' (content) {
  console.log(content)
})

deferred对象的另一个优势是可以附加多个回调函数。

progress()用来指定一个回调函数,当调用notify()方法时,该回调函数将执行。它的用意是提供一个接口,使得在非同步操作执行过程中,可以执行某些操作,比如定期返回进度条的进度。

在1.7版之前,jQuery的Ajax操作采用回调函数。

deferred对象是jQuery对Promises接口的实现。它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置。事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作、网页动画、web worker等等。

复制代码 代码如下:

您可能感兴趣的文章:

  • jQuery的deferred对象使用详解
  • jQuery Deferred和Promise创建响应式应用程序详细介绍
  • 利用jQuery的deferred对象实现异步按顺序加载JS文件
  • jQuery源码分析-05异步队列 Deferred 使用介绍
  • jQuery $.extend()用法总结
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • jQuery.extend 函数详解
  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
  • jQuery.extend()的实现方式详解及实例
  • jQuery中的deferred对象和extend方法详解

1.pending:表示操作还没有完成。
2.resolved:表示操作成功。
3.rejected:表示操作失败。

done() 和 fail()

always()

复制代码 代码如下:

pipe方法接受一个函数作为参数,表示在调用then方法、done方法、fail方法、always方法指定的回调函数之前,先运行pipe方法指定的回调函数。它通常用来对服务器返回的数据做初步处理。

实例

function getPromise(){
    return $.Deferred().promise();
}
try{
    getPromise().resolve("a");
} catch(err) {
    console.log(err);
}

复制代码 代码如下:

var deferred = new $.Deferred();
deferred.state();  // "pending"
deferred.resolve();
deferred.state();  // "resolved"

一旦调用resolve(),就会依次执行done()和then()方法指定的回调函数;一旦调用reject(),就会依次执行fail()和then()方法指定的回调函数。

复制代码 代码如下:

$.when(
    $.ajax( "/main.php" ),
    $.ajax( "/modules.php" ),
    $.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){
    console.log(resp1);
    console.log(resp2);
    console.log(resp3);
});

上面代码表示,如果maybeAsync函数的参数为1,则执行异步操作,否则立即返回缓存的结果。

上面代码先使用then()方法,从返回的数据中取出所需要的字段(firstName),所以后面的操作就可以只处理这个字段了。

function maybeAsync( num ) {
  var dfd = $.Deferred();
  if ( num === 1 ) {
    setTimeout(function() {
      dfd.resolve( num );
    }, 100);
    return dfd.promise();
  }
  return num;
}
$.when(maybeAsync(1)).then(function (resp){
  $('#target').append('<p>' resp '</p>');
});
$.when(maybeAsync(0)).then(function (resp){
  $('#target').append( '<p>' resp '</p>');
});

复制代码 代码如下:

deferred对象的方法

var post = $.post("/echo/json/")
    .then(function(p){
        return p.firstName;
    });
post.done(function(r){ console.log(r); });

自定义操作使用deferred接口

$.wait(5000).then(function() {
  alert("Hello from the future!");
});

function doSomething(arg) {
  var dfr = $.Deferred();
  setTimeout(function() {
    dfr.reject("Sorry, something went wrong.");
  });
  return dfr;
}
doSomething("uh oh").done(function() {
  alert("Won't happen, we're erroring here!");
}).fail(function(message) {
  alert(message)
});

pipe方法

复制代码 代码如下:

Promises是什么

我们可以利用deferred接口,使得任意操作都可以用done()和fail()指定回调函数。

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

then()

var promise = $('div.alert').fadeIn().promise();

$.when(
    $.ajax( "/main.php" ),
    $.ajax( "/modules.php" ),
    $.ajax( "/lists.php" )
).then(successFunc, failureFunc);

在jQuery 1.8之前,then()只是.done().fail()写法的语法糖,两种写法是等价的。在jQuery 1.8之后,then()返回一个新的deferred对象,而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值,该返回值会作为参数,传入后面的回调函数。

复制代码 代码如下:

Twitter.search('intridea').then(function(data) {
  alert(data.results[0].text);
});

由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待。为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式。这样做虽然可以解决问题,但是有一些显著缺点:

本文由时时app平台注册网站发布于web前端,转载请注明出处:jQuery之Deferred对象详解彩世界网址

关键词: