javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式

我们先来看一下编写AJAX编码常常遇到的几个问题:

1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中。这就不可避免地形成了嵌套。ajax等异步操作越多,嵌套层次就会越深。代码可读性就会越差。

$.ajax({
    url: url,
    data: dataObject,
    success: function(){
	console.log("I depend on ajax result.");
    },
    error: function(){}
});

console.log("I will print before ajax finished.");

2.假设AJAX请求之间存在依赖关系,我们的代码就会形成Pyramid of Doom(金字塔厄运)。

比方我们要完毕这样一件事:有4个供Ajax訪问的url地址,须要先Ajax訪问第1个。在第1个訪问完毕后。用拿到的返回数据作为參数再訪问第2个,第2个訪问完毕后再第3个...以此到4个所有訪问完毕。

依照这种写法,似乎会变成这样:

$.ajax({
    url: url1,
    success: function(data){
        $.ajax({
            url: url2,
            data: data,
            success: function(data){
                $.ajax({
                    //...
                });
            }
        });
    }
});

3.考虑这样的场景,假如我们同一时候发送两个Ajax请求,然后要在两个请求都成功返回后再做一件接下来的事,想一想假设仅仅按前面的方式在各自的调用位置去附加回调。这是不是非常困难?

能够看到:javascript中类似于AJAX这样的异步的操作,会导致代码嵌套层次复杂。可读性差。有的时候甚至是实现需求都非常困难。为了解决这样的异步回调难的问题,CommonJS组织制定了异步模式编程规范Promises/A。眼下该规范已经有了非常多的实现者,比方Q, when.js,
jQuery.Deffered()等。

我们以jQuery.Deffered学习下Promise。

Promise的状态

Promise对象有3种可能的状态:肯定状态(resolved)、否定状态(rejected)、等待状态(pending)。刚開始创建的Promise对象处于pending状态,仅仅能从pending变成resolved或者是从pending变成rejected状态。

var df1 = $.Deferred();
console.log(df1.state());//pending

var df2 = $.Deferred();
df2.resolve();//resolved
console.log(df2.state());

var df3 = $.Deferred();
df3.reject();
console.log(df3.state());//rejected

$.Deferred()创建一个延迟对象(也就是Promise对象),deferred.state()能够获取Promise对象当前所处的状态。deferred.resolve()和deferred.reject()则是用来改变Promise对象的状态。

Promise加入回调函数

Promise对象有3种状态,我们能够分别为这3种状态注冊回调函数。

当Promise处于某个状态的时候,会触发这个状态下注冊的回调函数。

var df = $.Deferred();
df.done(function(){alert("success");});
df.fail(function(){alert("fail");});
df.progress(function(){alert("progress");});

df.notify();

df.resolve();
// df.reject();

done()、fail()、progress()分别注冊resolved、rejected、pending状态下的回调函数。通过resolve()、reject()、notify()能够触发事先注冊的回调函数。

Promise是支持链式调用的。上面的代码能够写成以下的样子。

var df = $.Deferred();
df.done(function(){alert("success");})
.fail(function(){alert("fail");})
.progress(function(){alert("progress");});

Promise支持多个回调函数。会依照注冊顺序调用。

var df = $.Deferred();
df.done(function(){alert("first");})
.fail(function(){alert("fail");});

df.done(function(){alert("second");});
df.done(function(){alert("third");});

df.resolve();

deferred.always()加入的回调函数,不管Promise是resolved状态还是rejected状态,都会被调用。

var df1 = $.Deferred();
df1.always(function(type){alert(type);});
df1.resolve("resolve");

var df2 = $.Deferred();
df2.always(function(type){alert(type);});
df2.reject("reject");

progress()和notify()可以用来实现进度条效果。由于notify()同意调用多次,而reject()和resolve()仅仅能调用一次。

这个非常好理解。由于一旦状态变成resolved或者是rejected。就不能再改变其状态。也没有必要。

var df = $.Deferred();
df.done(function(){alert("success");});
df.fail(function(){alert("fail");});
df.progress(function(){alert("progress");});  

// resolve()调用2次,可是仅仅能触发1次success
df.resolve();
df.resolve();  

var mudf = $.Deferred();
mudf.done(function(){alert("success");});
mudf.fail(function(){alert("fail");});
mudf.progress(function(){alert("progress");});  

// 每次调用notify都会触发progress回调函数
mudf.notify("%10");
mudf.notify("%20");  

rejectWith()、resolveWith()、notifyWith()功能上和reject()、resolve()、notify()没有什么区别。主要区别在于回调函数中的运行上下文(方法中的this)和參数形式。

具体区别能够參考"JQuery.Callbacks系列一:api使用具体解释"这篇文章中的fire()和fireWith()。

上面简单的介绍了Promise的使用方式。我们能够用Promise的方式来编写AJAX代码。能够非常easy地看出:使用Promise后代码嵌套层次少了,代码是纵向增长的,而不再是横向增长。并且使用Promise。能够指定多个ajax回调函数。

// 老的ajax写法
$.ajax({
  url: "test.html",
  success: function(){
    alert("success");
  },
  error:function(){
    alert("error");
  }
});

// 使用promise后的写法
$.ajax("test.html")
 .done(function(){})
 .fail(function(){})
 .done(function(){)
 .fail(function(){);

JQuery中的Deferred对象与Promise对象差别

JQuery.Deferred相关的API。有的返回的是Deferred对象,有的返回的是Promise对象。如done()、reject()等大部分函数返回的都是Deferred对象,$.when()和then()函数返回的是Promise对象。详细能够參考JQuery
API文档

JQuery官方对Promise Objects的解释是:

This object provides a subset of the methods of the Deferred object (then, done, fail, always, progress, state and promise) to prevent users from changing the state of the Deferred.

能够看到Promise对象事实上就是Deferred对象的一部分,Deferred对象提供了notify、reject、resolve等改变状态的方法,可是Promise对象没有提供这些方法。

文章開始提到的AJAX问题1~3,问题1能够非常easy通过Promise得到解决。问题2和问题3是通过$.when()和deferred.then()得到解决。因为这2个API相对来说复杂一些,以后的文章再分析这2个API。

參考文章

"异步JavaScript与Promise"作者ACGTOFE

时间: 2024-12-20 01:19:39

javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式的相关文章

javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方案

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

JavaScript异步编程__“回调地狱”的一些解决方案

异步编程在JavaScript中非常重要.过多的异步编程也带了回调嵌套的问题,本文会提供一些解决"回调地狱"的方法. setTimeout(function () { console.log('延时触发'); }, 2000); fs.readFile('./sample.txt', 'utf-8', function (err, res) { console.log(res); }); 上面就是典型的回调函数,不论是在浏览器中,还是在node中,JavaScript本身是单线程,因此

使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题

原文地址:http://www.2cto.com/kf/201507/424202.html 之前的文章javascript异步代码的回调地狱中提到了编写AJAX代码经常遇到的3个问题,现在我们看下如何利用then()解决第2个问题:如果AJAX请求之间存在依赖关系,我们的代码就会形成Pyramid of Doom(金字塔厄运).比如我们要完成这样一件事:有4个供Ajax访问的url地址,需要先Ajax访问第1个,在第1个访问完成后,用拿到的返回数据作为参数再访问第2个,第2个访问完成后再第3个

《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式

一.AJAX概述 AJAX是Asynchronous JavaScript and XML的缩写.中文译作异步JavaScript和XML.AJAX 不是新的编程语言,而是一种使用现有标准的新方法.在不又一次载入页面的情况下,与server交换数据并更新部分网页的艺术. 其核心是:client的Javascript可以与webserver进行异步数据交换. 二.AJAX基础---XMLHttpRequest对象 全部现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Oper

jquery.Deferred promise解决异步回调

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

Javascript异步编程之二回调函数

上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以自行google一下. 传统的同步函数需要返回一个结果的话都是通过return语句实现,例如: function foo() { var a = 3, b = 2; return a+b; } var c = foo(); console.log(c); //5 就是说后面的代码console.lo

js中promise解决callback回调地狱以及使用async+await异步处理的方法

1.callback回调地狱 function ajax(fn) { setTimeout(()=> { console.log('你好') fn() }, 1000) } ajax(() => { console.log('执行结束') ajax(()=>{ console.log('执行结束') ajax(()=>{ console.log('执行结束') ajax(()=>{ console.log('执行结束') }) }) }) }) 2.promise解决回调地狱

JavaScript异步交互

JavaScript 异步编程简介 回调函数和异步执行 所谓的异步指的是函数的调用并不直接返回执行的结果,而往往是通过回调函数异步的执行. 我们先看看回调函数是什么: var fn = function(callback) { // do something here ... callback.apply(this, para); }: var mycallback = function(parameter) { // do someting in customer callback }: //

探索Javascript异步编程

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入.大家需要根据自己的情况选择一个适于自己的方法. 笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题. JavaScript 异步编程简介 回调函数和异步执行 所谓的异步指的是函数的调