JavaScript 异步编程：深入解析 Promise 模式与 jQuery、AngularJS 实践

Promise 模式核心机制

Promise 编程模式（亦称 thenable）可视为一种延迟执行机制。每个 Promise 实例均暴露唯一的 then 接口，用于在操作成功或失败时触发相应的回调函数。该模式旨在处理那些耗时较长且非必须立即完成的操作，其核心在于不阻塞主线程等待结果，而是直接返回一个代表预期结果的对象。

当前主流 JavaScript 库，包括 jQuery、Dojo 以及 AngularJS 等，均已集成这种名为 Promise 的抽象层。借助这些库的支持，开发者得以在实际开发中直接应用 Promise 模式进行异步逻辑处理。

下文将以 jQuery 为例，探讨 JavaScript 库如何利用 Promise 模式处理异步请求，其本质是通过回调机制提供容错支持。无论操作成功、失败或处于其他状态，均执行对应的回调函数，从而尽可能覆盖逻辑中可能出现的各种情况。

jQuery 中的 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 模式，且 jQuery 官方文档已不再推荐此方式（参考 http://api.jquery.com/jQuery.ajax/#jqXHR）。Ajax 调用完成后，success 函数随即执行。根据库所采用的异步操作类型，开发者可使用多种不同的回调（即针对任务成功或失败分别进行响应）。相比之下，Promise 模式简化了这一过程，异步操作仅需返回一个对象供调用。该 Promise 允许调用名为 then 的方法，并指定所需的回调函数数量。

接下来，我们查看 jQuery 中 Promise 的构建方式。

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

jQuery 的 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 中，无论成功或失败，均可通过单一调用指定所需执行的逻辑。此外，这也是一种可行的写法，且为 jQuery 官方文档所推荐：

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

AngularJS 中的 Promise 实现

随后，我们考察 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 的介绍及示例，可访问官网（http://www.promisejs.org/）查阅。