首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

JavaScript异步编程助理:Promise模式

2013-08-16 
JavaScript异步编程助手:Promise模式文章源自:http://www.csdn.net/article/2013-08-12/2816527-JavaScrip

JavaScript异步编程助手:Promise模式

文章源自:http://www.csdn.net/article/2013-08-12/2816527-JavaScript-Promise

var $info = $("#info");$.ajax({ url:"/echo/json/", data: { json: JSON.stringify({"name": "someValue"}) }, type:"POST", success: function(response) { $info.text(response.name); }});

?在这个例子中,你可以看到当设置成功后会指定一个回调,这并不是Promise,但却是一种很好的回调方式。当Ajax调用完成后,它便会执行 success函数。根据库所使用的异步操作,你可以使用各种不同的回调(即任务是否成功,都会进行回调,做出响应)。使用Promise模式会简化这个 过程,异步操作只需返回一个对象调用。这个Promise允许你调用一个叫做then的方法,然后让你指定回调的function(s)个数,下面让我们 来看看jQuery是如何建立Promise的:

var $info = $("#info");$.ajax({    url: "/echo/json/",    data: {        json: JSON.stringify({            "name": "someValue"        })    },    type: "POST"}).then(function (response) {    $info.text(response.name);});

?有趣的是,ajax对象返回xhr对象实现Promise模式,所以我们可以调用then方法,这样做的优势是你可以链式调用,实现独立操作,如下所示 :

var $info = $("#info");$.ajax({    url: "/echo/json/",    data: {        json: JSON.stringify({            "name": "someValue"        })    },    type: "POST"}).then(function (response) {    $info.text(response.name);}).then(function () {    $info.append("...More");}).done(function () {    $info.append("...finally!");});

?由于许多库都开始采用Promise模式,所以异步操作会变的非常容易。但如果站在相反的角度思考,Promise将会是什么样子的呢?其中一个非常重要的模式是函数可以接受两种功能,一个是成功时的回调,另一个是失败时的回调。

var $info = $("#info");$.ajax({    // Change URL to see error happen    url: "/echo/json/",    data: {        json: JSON.stringify({            "name": "someValue"        })    },    type: "POST"}).then(function (response) {    // success    $info.text(response.name);},function () {    // failure    $info.text("bad things happen to good developers");}).always(function () {    $info.append("...finally");});

?需要注意的是,在jQuery里,无论成功还是失败,我们都会使用一个调用来指定我们想要调用的。下面让来看看AngularJS是如何使用Promise模式的:

var m = angular.module("myApp", []);m.factory("dataService", function ($q) {    function _callMe() {        var d = $q.defer();        setTimeout(function () {            d.resolve();            //defer.reject();        }, 100);        return d.promise;    }    return {        callMe: _callMe    };});function myCtrl($scope, dataService) {    $scope.name = "None";    $scope.isBusy = true;    dataService.callMe()      .then(function () {        // Successful        $scope.name = "success";      },      function () {        // failure        $scope.name = "failure";      })      .then(function () {        // Like a Finally Clause        $scope.isBusy = false;      });}

?你可以在JSFiddle里试试这些例子,并且看看会产生哪些效果。使用Promise来操作异步是一种非常简单的方式,而且还可以简化你的代码,岂不是一举两得的好方法。

?

?

热点排行