如何使用Promise
在说Promise之前,不得不说一下JavaScript的嵌套的回调函数
在JavaScript语言中,无论是写浏览器端的各种事件处理回调、ajax回调,还是写Node.js上的业务逻辑,不得不面对的问题就是各种回调函数。回调函数少了还好,一旦多了起来而且必须讲究执行顺序的话,回调函数开始嵌套,那代码的恶心程度是相当不符合常人的线性思维的。
// 就像下面这样:
// 你不在乎下面这三个ajax的执行顺序还好
// 如果你在乎顺序呢?
$.get('url', function(){ }, 'json');
$.get('url1', function(){ }, 'json');
$.get('url2', function(){ }, 'json'); // 就像这样?
$.get('url', function(){
$.get('url1', function(){
$.get('url2', function(){ }, 'json');
}, 'json');
}, 'json'); // 下面是我最近写的一段Node.js的代码
// 其实这个嵌套也不算多
// 如果业务逻辑相当复杂起来呢?
// 嵌套20 30层?
var adminIndex = function(params, callback){
storeAdmin.getApiTokens(function(err, tokens){
if ( err ) { callback(err); return; }
storeAdmin.getApiServices(function(err, apiServices){
if ( err ) { callback(err); return; }
storeAdmin.getSocketioServices(function(err, socketioServices){
if ( err ) { callback(err); return; }
callback(0, {
status : true,
data : {
api_tokens : tokens,
api_services : apiServices,
socketio_services : socketioServices
}
});
});
});
});
};
说了这么多,到底什么是Promise呢?
其实,Promise就是一个类,而且这个类已经成为了ES6的标准,这个类目前在chrome32、Opera19、Firefox29以上的版本都已经支持了,要想在所有浏览器上都用上的话就看看es6-promise吧。
那Promise怎么用呢?
看一段很简单的代码,请注意阅读代码中的注释。
var val = 1; // 我们假设step1, step2, step3都是ajax调用后端或者是
// 在Node.js上查询数据库的异步操作
// 每个步骤都有对应的失败和成功处理回调
// 需求是这样,step1、step2、step3必须按顺序执行
function step1(resolve, reject) {
console.log('步骤一:执行');
if (val >= 1) {
resolve('Hello I am No.1');
} else if (val === 0) {
reject(val);
}
} function step2(resolve, reject) {
console.log('步骤二:执行');
if (val === 1) {
resolve('Hello I am No.2');
} else if (val === 0) {
reject(val);
}
} function step3(resolve, reject) {
console.log('步骤三:执行');
if (val === 1) {
resolve('Hello I am No.3');
} else if (val === 0) {
reject(val);
}
} new Promise(step1).then(function(val){
console.info(val);
return new Promise(step2);
}).then(function(val){
console.info(val);
return new Promise(step3);
}).then(function(val){
console.info(val);
return val;
}).then(function(val){
console.info(val);
return val;
}); // 执行之后将会打印
步骤一:执行
Hello I am No.1
步骤二:执行
Hello I am No.2
步骤三:执行
Hello I am No.3
Hello I am No.3
Promise到底解决什么问题?
正如上面代码所示,笔者认为,Promise的意义就在于 then 链式调用 ,它避免了异步函数之间的层层嵌套,将原来异步函数的嵌套关系 转变为便于阅读和理解的 链式步骤关系 。
Promise的主要用法就是将各个异步操作封装成好多Promise,而一个Promise只处理一个异步逻辑。最后将各个Promise用链式调用写法串联,在这样处理下,如果异步逻辑之间前后关系很重的话,你也不需要层层嵌套,只需要把每个异步逻辑封装成Promise链式调用就可以了。
Promise常用的关键点
在Promise定义时,函数已经执行了
Promise构造函数只接受一个参数,即带有异步逻辑的函数。这个函数在 new Promise
时已经执行了。只不过在没有调用 then
之前不会 resolve 或 reject。
在then中的resolve方法中如何return?
在then方法中通常传递两个参数,一个 resolve
函数,一个 reject
函数。reject
暂时不讨论,就是出错的时候运行的函数罢了。resolve
函数必须返回一个值才能把链式调用进行下去,而且这个值返回什么是有很大讲究的。
resolve
返回一个新 Promise
返回一个新Promise之后再调用的then就是新Promise中的逻辑了。
resolve
返回一个值
返回一个值会传递到下一个then的resolve方法参数中。
如何使用Promise的更多相关文章
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
- 路由的Resolve机制(需要了解promise)
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- angular2系列教程(七)Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 闲话Promise机制
Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- Promise的前世今生和妙用技巧
浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...
- JavaScript进阶之路——认识和使用Promise,重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
- 细说Promise
一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
随机推荐
- marine
- AT-Activity
关于Activity的粗略翻译 原地址:Activity 类概述: Activity是独立的.突出的可被用户操作的东西.几乎所有的Activity都是与用户进行交互的,所以这些Activity会很小 ...
- supervisor tornado 多进程多端口配置
base: nginx tornado 目标: tornado 实现多端口多进程运行 pip install supervisor echo_supervisord_conf > /etc/su ...
- 关于Collections中的sort()方法总结
用Java集合中的Collections.sort方法对list排序的两种方法 本文部分引用自:http://my.oschina.net/leoson/blog/131904 用Collection ...
- 【暴力模拟】UVA 1594 - Ducci Sequence
想麻烦了.这题真的那么水啊..直接暴力模拟,1000次(看了网上的200次就能A)后判断是否全为0,否则就是LOOP: #include <iostream> #include <s ...
- JAXB - XML Schema Types, Defining Types for XML Elements With Content
Content: A Value The content of an XML element may be some value, or one or more subordinate element ...
- 如何防止SWF文件被反编译
这篇文章的标题所提出的问题的答案是“不可能”.至少对我来说是不可能的.借助适当的工具,我们可以反编译任何SWF文件.所以,不要将重要的信息置于SWF文件中.SWF文件中不要包含个人的帐号或者密码. 我 ...
- 从零开始部署小型企业级虚拟桌面 -- Vmware Horizon View 6 For Linux VDI -- 结构规划
环境说明 注,本套环境所用机器全部是64位的. 管理服务器载体:安装win7操作系统,通过VMware Workstation安装4台虚拟机,用作vCenter,Connection Server,D ...
- C# ACM poj1006
中国剩余定理 public static void acm1006(int a, int b, int c, int d) { * ; * ; * ; * * ; ) * z; ) * y; ) * ...
- NodeJS连接MongoDB数据库时报错
今天第一次尝试连接MongoDB数据库,具体步骤也很简单. 首先,通过NodeJS运行环境安装MongoDB包,进入要安装的目录,执行语句 npm install mongodb 安装成功后,通过如下 ...