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

最新文章

热门文章