Javascript异步编程-延迟对象篇

2

上篇文章中讲到,使用jquery的ajax方法操作ajax请求,会受到回调函数嵌套的问题。当然,jquery团队也发现了这个问题,在2011年,也就是jquery 1.5版本之后,jQuery.Deferred对象为解决这类问题应运而出。之后,zapto等框架也推出相同api的deferred对象,来进行异步操作。

在jquery 1.5 版本之后,ajax请求的内部实现被重写。$.ajax方法返回的不再是一个jqXHR对象,而是一个Deferred对象。

使用jquery 1.5版本之后的代码,可以用下面的方法进行一次ajax请求。

// 前提引入jquery
var fetchData = function (url) {
    return $.ajax({
        type: 'get',
        url: url
    });
}

这样一次请求的内容就已经完成,$.ajax返回一个$.Deferred对象,那么我们就可以使用$.Deferred对象的api进行一些异步操作。

出于篇幅,这里只简单进行介绍.done.fail.then$.when这三个方法。

对于每一个$.Deferred对象来说,实例有多个方法,其中done方法代表异步完成时执行的方法,fail代表异步失败时执行的方法,这两个方法同时仍旧返回一个$.Deferred对象的实例。

继续上面的ajax操作,我们可以这样写成功和失败的回调:

// fetchData 接上

fetchData()        //执行函数返回一个Deferred对象实例
    .done()        //接受一个函数,ajax请求成功调用
    .fail()        //接受一个函数,ajax请求失败调用
    .done()        //第二个成功状态的回调方法
    .fail()

同样的对于.then方法,接受两个函数,第一个代表成功时执行的方法,第二个代表失败时的执行方法。同样的,它也返回一个deferred对象实例。意味着也能进行连缀调用。

fetchData()
    .then(successFn, errorFn)        //第一次回调
    .then(successFn, errorFn)        //第二次回调

内部实现上,.done 和 .fail 都是基于 .then实现的

fetchData()                            fetchData()
    .done(successFn)    <===>            .then(successFn, null)
    .fail(errorFn)      <===>            .then(null, errorFn)

对于多个ajax同时请求,共同执行同一个回调函数这一点上,jquery有一个$.when方法,接受多个Deferred对象实例,同时执行。

var fetchData = function (url) {
    return $.ajax({
        type: 'get',
        url: url
    });
}

var fetchData1 = fetchData('/path/to/data1');
var fetchData2 = fetchData('/path/to/data2');

$.when(fetchData1, fetchData2, function (data1, data2) {
    // fetchData1 响应为data1
    // fetchData2 响应为data2
})

完美解决了开发中的异步问题。

上面的$.ajax只是在$.deferred对象上封装了一层ajax操作。实际上,真正的$.Deferred对象是这样调用的:

function printA () {
    var deferred = new $.Deferred();
    setTimeout(function () {
        console.log('A');
        deferred.resolve(' is done.');
    }, 1000);
    return deferred;
}

function printB (msg) {
    var deferred = new $.Deferred();
    setTimeout(function () {
        console.log('B' + msg);
        deferred.resolve();
    }, 1000);
    return deferred;
}

printA()
    .then(printA)
    .then(printB)

每个函数维护一个Deferred对象,在每一个具有异步操作的函数执行成功后,指示全局deferred对象执行下一个函数,达到异步的效果。

新建完成$.Deferred实例deferred之后,调用deferred.resolve()代表成功完成响应,deferred.reject()即代表调用失败响应。

详细解释源码请参见另一篇文章,这里我们主要写一下这种调用方式实现的tiny版。

首先我们写一个Callback对象维护我们的回调函数队列

var Callbacks = function () {
    function Callbacks () {
        this.callbacks = [];
    }
    Callbacks.prototype.add = function (fn) {
        this.callbacks.add(fn);
        return this;
    }
    Callbacks.prototype.fire = function () {
        var len = this.callbacks.length;
        if(len) {
            this.callbacks.unshift()();
        }
    }
    return Callbacks;
}

这段代码逻辑很简单,Callbacks对象有两个方法,分别是add和fire,调用add则向当前的callbacks数组内新增一个function。fire方法,则从Callbacks中提取最前的一个callback,并执行它。

对于Deferred对象,我们至少需要resolve和reject两个方法。进行成功和失败的调用。并且能够进行链式调用。

var Deferred = function () {
    this.successCbs = new Callbacks();
    this.errorCbs = new Callbacks();
}
Deferred.prototype.then = function (successCb, errorCb) {
    this.successCbs.add(successCb);
    this.errorCbs.add(errorCb);
    return this;
}
Deferred.prototype.resolve = function () {
    this.successCbs.fire();
    return this;
}
Deferred.prototype.reject = function () {
    this.errorCbs.fire();
    return this;
}

这样简单完成之后,我们新建一个Deferred实例,就能够通过链式调用的方式进行异步操作。

var deferred = new Deferred();
function printA() {
    setTimeout(function () {
        console.log('A');
        deferred.resolve();
    }, 1000);
    return deferred;
}
function printB() {
    setTimeout(function () {
        console.log('B');
        deferred.resolve();
    }, 1000);
}

printA()
    .then(printB)
    .then(printA)

同样的,我们可以封装一个自制tiny-Deferred对象的tiny-ajax方法。

var ajax = function (options) {
    var xhrOptions = {
        type: options.type || 'get',
        url: options.url || '/default/path',
        async: options.async || true
    };
    var deferred = new Deferred();
    var xhr = new XHRHttpRequest();
    xhr.open(xhrOptions.type, xhrOptions.url, xhrOptions.async);
    xhr.onload = function (result) {
        deferred.resolve(result);
    }
    xhr.onerror = function ()
    xhr.send();
    return deferred;
}

具体源代码开源在Github上,欢迎pr和issuses。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

Fighting · 2016-12-27

jQuery.Deferred

回复

止水 作者 · 2016-12-27

?感谢

回复

410536612 · 2017-10-26

到处都是语法错误

回复

0

好久之前写的了,今晚回去看一下,把语法的错误修复一下..

止水 作者 · 2017-10-26
载入中...