HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > JavaScript异步编程助手:Promise模式

JavaScript异步编程助手:Promise模式

         异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多JavaScript库(比如 jQuery和Dojo、AngularJS)添加了一种称为Promise的抽象(术语称作Deferred模式)。通过这些库,开发人员能够在实际编程中使用Promise模式,每个Promise都拥有一个叫做then的唯一接口,当Promise失败或成功时,它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

       本文我们将讨论JavaScript库(比如jQuery、AngularJS)是如何使用Promise模式的来处理异步的,其实就是通过回调的方式提供容错支持。

下面让我们来看看jQuery是如何操作的:

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来操作异步是一种非常简单的方式,而且还可以简化你的代码,岂不是一举两得的好方法。

更多关于Promise的介绍及示例,可以前往官网查看。

来自:JavaScript Promise


【JavaScript异步编程助手:Promise模式】相关文章

1. JavaScript异步编程助手:Promise模式

2. 短小强悍的JavaScript异步调用库

3. Easystar.js:异步的 JavaScript 寻路游戏

4. Prompt轻量级提示框弹出层Jquery插件

5. Prompt轻量级提示框弹出层Jquery插件

6. 知名JavaScript框架SproutCore改名为Ember.js

7. JavaScript 全文搜索引擎 Fullproof

8. 盈利模式探讨二:跳出应用本身 探索全新盈利模式

9. 是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率

10. JavaScript 的 MVC 模式

本文来源:https://www.51html5.com/a3356.html

点击展开全部

﹝JavaScript异步编程助手:Promise模式﹞相关内容

「JavaScript异步编程助手:Promise模式」相关专题

其它栏目

也许您还喜欢