码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript异步编程助手：Promise模式 【转】

时间：2015-05-29 11:20:39      阅读：203      评论：0      收藏：0      [点我收藏+]

标签：

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

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

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

[js] view plaincopy
  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url:"/echo/json/",  
  4.     data: { json: JSON.stringify({"name": "someValue"}) },  
  5.     type:"POST",  
  6.     success: function(response)  
  7.     {  
  8.        $info.text(response.name);  
  9.     }  
  10. });  
在 这个例子中，你可以看到当设置成功后会指定一个回调，这并不是Promise，但却是一种很好的回调方式。当Ajax调用完成后，它便会执行 success函数。根据库所使用的异步操作，你可以使用各种不同的回调（即任务是否成功，都会进行回调，做出响应）。使用Promise模式会简化这个 过程，异步操作只需返回一个对象调用。这个Promise允许你调用一个叫做then的方法，然后让你指定回调的function(s)个数，下面让我们 来看看jQuery是如何建立Promise的：
[js] view plaincopy
  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url: "/echo/json/",  
  4.     data: {  
  5.         json: JSON.stringify({  
  6.             "name": "someValue"  
  7.         })  
  8.     },  
  9.     type: "POST"  
  10. })  
  11. .then(function (response) {  
  12.     $info.text(response.name);  
  13. });  

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

[js] view plaincopy
  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url: "/echo/json/",  
  4.     data: {  
  5.         json: JSON.stringify({  
  6.             "name": "someValue"  
  7.         })  
  8.     },  
  9.     type: "POST"  
  10. })  
  11. .then(function (response) {  
  12.     $info.text(response.name);  
  13. })  
  14. .then(function () {  
  15.     $info.append("...More");  
  16. })  
  17. .done(function () {  
  18.     $info.append("...finally!");  
  19. });  

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

[js] view plaincopy
  1. var $info = $("#info");  
  2. $.ajax({  
  3.     // Change URL to see error happen  
  4.     url: "/echo/json/",  
  5.     data: {  
  6.         json: JSON.stringify({  
  7.             "name": "someValue"  
  8.         })  
  9.     },  
  10.     type: "POST"  
  11. })  
  12. .then(function (response) {  
  13.     // success  
  14.     $info.text(response.name);  
  15. },   
  16. function () {  
  17.     // failure  
  18.     $info.text("bad things happen to good developers");  
  19. })  
  20. .always(function () {  
  21.     $info.append("...finally");  
  22. });  

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

[js] view plaincopy
  1. var m = angular.module("myApp", []);  
  2. m.factory("dataService", function ($q) {  
  3.     function _callMe() {  
  4.         var d = $q.defer();  
  5.         setTimeout(function () {  
  6.             d.resolve();  
  7.             //defer.reject();  
  8.         }, 100);  
  9.         return d.promise;  
  10.     }  
  11.     return {  
  12.         callMe: _callMe  
  13.     };  
  14. });  
  15. function myCtrl($scope, dataService) {  
  16.     $scope.name = "None";  
  17.     $scope.isBusy = true;  
  18.     dataService.callMe()  
  19.       .then(function () {  
  20.         // Successful  
  21.         $scope.name = "success";  
  22.       },   
  23.       function () {  
  24.         // failure  
  25.         $scope.name = "failure";  
  26.       })  
  27.       .then(function () {  
  28.         // Like a Finally Clause  
  29.         $scope.isBusy = false;  
  30.       });  
  31. }  

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

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

来自：JavaScript Promise

本文为CSDN编译整理，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)

JavaScript异步编程助手：Promise模式 【转】

标签：

原文地址：http://www.cnblogs.com/fangl/p/4537909.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！