在说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的更多相关文章

  1. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  2. 路由的Resolve机制(需要了解promise)

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  3. angular2系列教程(七)Injectable、Promise、Interface、使用服务

    今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...

  4. 闲话Promise机制

    Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...

  5. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  6. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  7. JavaScript进阶之路——认识和使用Promise,重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  8. 细说Promise

    一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...

  9. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  10. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

随机推荐

  1. ios 界面间跳转方法总结

    接触ios也有一段时间了,偶然间,我们公司的技术总监兼我的导师,问我,你可知道,界面间的跳转有几种方式?我说出了两种,但是也有点含糊其辞,于是我就想一定要找个时间总结一下.有句话说的好,“前人种树,后 ...

  2. mysql show commands

    a. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称b. show databases; -- 显示mysql中所有数据库的 ...

  3. 自定义请求头信息及cookie信息

    请求网页的时候有时候我们需要传递一些参数信息,这个时候我们可以将参数放到请求头中,具体使用如下: 这里有小问题就是请求参数的属性名好像不支持下划线,即 HTTP_UID不可用,但是HTTP-UID就可 ...

  4. 写实例学习html5 WebSocket

    WebSocket简介  WebSocket是html5的重要特性.它是HTML5一种新的协议,实现了浏览器与服务器全双工通信(full-duplex).使服务器可以主动传送数据给客户端,对构建实时w ...

  5. CentOS 6.4安装搭建Tomcat 7

    1.检查java版本信息 java -versionjava version "1.7.0_65"OpenJDK Runtime Environment (rhel-2.5.1.2 ...

  6. 关于Eclipse中开发插件(二)

    原plugin.xml文件各个设置项的说明: 附上生成的文件代码: <?xml version="1.0" encoding="UTF-8"?> & ...

  7. 【MINA】用mina做业务服之间的通信,实现业务负载均衡思路

    学习mina目的还是搭建通信架构,学完mina我们了解了如何实现客户端和服务端,也就是一个正常channel我们是知道怎么建立的 但是问题是,我们应用环境通信分为两种 1.前后端通信 其实这个比较好实 ...

  8. ASP怎样获得代码中第一张图片地址

    '把pattern 又修改了下 'code要检测的代码 'http://www.knowsky.com/asp.asp 'leixing html 或者ubb 'nopic 代码没有图片时默认值 fu ...

  9. android apk 防止反编译技术第一篇-加壳技术

    做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习.现在将最近学习成果做一下整理总结.学习的这些成 ...

  10. Sencha Touch id 和 itemId

    通过id获得组件: var view=Ext.getCmp('id'); 通过itemId获得组件: var view = ComponentQuery.query('view_xtype'), // ...