Javascript异步编程-延迟对象篇

2016-12-13 09:39:46来源:作者:好JSER人点击

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

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

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

// 前提引入jqueryvar 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;}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台