Javascript异步编程模型Promise模式详细介绍


Posted in Javascript onMay 08, 2014

Promise 编程模式也被称为 thenable,可以理解为 延迟后执行。每个 Promise 都拥有一个叫做 then 的唯一接口,当 Promise 失败或成功时,它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

当前的许多 JavaScript 库(如 jQuery 和 Dojo、AngularJS)均添加了这种称为 Promise 的抽象。通过这些库,开发人员能够在实际编程中使用 Promise 模式。

下面我们将以 jQuery 为例讨论 JavaScript 库是如何使用 Promise 模式的来处理异步的,其实就是通过回调的方式提供容错支持。在某个操作成功或失败或任何情况下都执行对应的回调,尽量把某段逻辑可能出现的情况都 handle 住。

首先让我们来看看 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 的方法,然后让你指定回调的 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);
});

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 模式的:

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/)查看。

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
微信小程序缓存过期时间的使用详情
May 12 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 #Javascript
js数组操作常用方法
May 08 #Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 #Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 #Javascript
javascript操作excel生成报表示例
May 08 #Javascript
jquery的ajax跨域请求原理和示例
May 08 #Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 #Javascript
You might like
php使用pack处理二进制文件的方法
2014/07/03 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
js常用DOM方法详解
2017/02/04 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
个人委托书范本
2014/04/02 职场文书
申论倡议书范文
2014/05/13 职场文书
创先争优个人总结
2015/03/04 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技