ES6的promise对象应该这样用
ES6修补了一位Js修真者诸多的遗憾。
曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的缺点,而又无法忽略的是也正因为这一点,node.js处理并行的能力被人看作优点,在我看来,这其实有着些讽刺的意味,就好像踢足球时有的人总夸你腿短,所以频率快下盘稳好控球。。。好在js从出生以来就有一种独特的特质,就是模仿,对,就是模仿,模仿别人的优点来补足自己,同时保持自己的长处。
ES6就是通过Promise对象模仿出了异步处理更合理的处理方式。鼓掌!“啪啪啪。。。”
废话扯到这里,我们来看如何通过promise对象处理异步操作。
什么是Promise原型对象?
ES6 原生提供了 Promise原型 对象,用来传递异步操作的消息。让异步操作(通常是异步操作)事件队列之间知道彼此相邻的执行先后顺序。这样说,我相信初次接触的人会不太理解,没事,我提供一个清晰的实例来讲解。
基本的promise基础知识,你需要到 http://www.jianshu.com/p/063f7e490e9a 学习相关内容。
Promise怎么用实现异步?
让我们来看这个例子:
new Promise(
function(resolve,reject){
resolve(); //这里指调用后面then的方法体内容,即先执行2000ms的动作
}
).then(function() {
new Promise(function (resolve, reject) {
setTimeout(function () {
alert("先执行2000ms动作!");
resolve(); //这里指调用后面then的方法体内容,执行1000ms的动作
}, 2000);
}).then(function () {
setTimeout(function () {
alert("再执行1000ms动作!");
}, 1000);
});
});
这段代码会先执行2000ms动作,再执行1000ms动作。
一个Promise实例对象会有三个状态,Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。其构造函数的参数为一个带有两个状态的参数的匿名函数,这两个状态在这儿指代将要执行的函数行为。
你需要注意的是,一个promise对象只能指派一个固定的函数行为,即resolve与reject指代一个固定的函数行为,即后面紧接着的then或err的函数内容。如果你想接着进行下一步异步操作,你需要在相应函数体内再兴建一个新的promise对象,并规定它对应状态的函数行为。这里往往是别的教程没有说清的地方。
我们再来探究一下如何用优化调用的写法?
如果Promise只是实现这样层层嵌入的模样,我并不觉得它对层层回调有多大的优化的地方。我们思考如何用简洁直观的链式调用形式来使用Promise对象。
我们知道Promise对象的then()方法会返回给下一个then()一个参数,如果我们让这个参数为新的Promise实例对象的话,不就能实现链式调用不同的Promise对象规定的resolve行为了吗?想到如此,迫不及待做尝试,看下面的代码:
new Promise(function(resolve,reject){
setTimeout(function(){
alert("执行3000ms的动作!"); //3000ms动作
resolve();
},3000); }).then(function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
alert("执行2000ms的动作!"); //2000ms动作
resolve();
},2000);
}); }).then( function(){
alert("执行0ms的动作!"); //0ms动作
});
这段代码会先执行3000ms动作,在执行2000ms动作,最后执行0ms动作!我们成功地实现了Promise对象的链式调用解决了异步操作的问题!此处应该再一次响起掌声“啪啪啪。。。”;
ES6的promise对象应该这样用的更多相关文章
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- 教你如何使用ES6的Promise对象
教你如何使用ES6的Promise对象 Promise对象,ES6新增的一个全新特性,这个是 ES6中非常重要的一个对象 Promise的设计初衷 首先,我们先一起了解一下,为什么要设计出这么一个玩意 ...
- ES6 - promise对象
Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ s ...
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- ES6的Promise对象
http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
- 前端知识点回顾之重点篇——ES6的Promise对象
Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...
- 谈谈 ES6 的 Promise 对象
https://segmentfault.com/a/1190000002928371 前言 开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作.一般 ...
- ES6 用Promise对象实现的 Ajax 操作
下面是一个用Promise对象实现的 Ajax 操作的例子. const getJSON = function(url) { const promise = new Promise(function( ...
- ES6之Promise对象
创建Promise对象 function getHtml(url) { return new Promise((resolve, reject) => { let xhr = new XMLHt ...
随机推荐
- Java基础高级二(多线程)
1.进程和线程的区别:线程是轻量级的,本省不会持太多资源,需要的时候向进程申请 2.线程的状态:创建,可执行,执行中,等待,休眠,阻塞 3.线程状态之间的转换 4.线程API:Thread类,Runn ...
- inotify监控文件变化
1.安装inotify-tools yum install make gcc gcc-c++ #安装编译工具 inotify-tools下载地址:http://github.com/downloa ...
- mac版本cornerstone的无限期破解方法【转】
CornerStone是个人非常喜欢的mac上的一款SVN客户端工具,官方提供了14天的免费试用(trail)版本.我们可以在此基础上提供无限期试用版本. 方法一:如果你从来没有安装过这个trail版 ...
- wifi的country code
转自:http://userpage.chemie.fu-berlin.de/diverse/doc/ISO_3166.htmlCountry A 2 A 3 Number ------------- ...
- 【Java EE 学习 79 上】【mybatis 基本使用方法】
一.简介 mybatis类似于hibernate,都是简化对数据库操作的框架,但是和hibernate不同的是,mybatis更加灵活,整体来说框架更小,这体现在它需要我们手写SQL语句,而hiber ...
- C语言的可变参数在Linux(Ubuntu)与Windows下注意点
基本上C语言的可变参数原理在不同平台和不同编译器下基本类似(通过函数入栈,从右向左,从高位到低位地址),不过部分实现会有所不同:在使用中需要注意的是: va_list 为char 类型指针,部分调用如 ...
- [WPF]WPF Data Virtualization和UI Virtualization
这篇博客将介绍WPF中的虚拟化技术. 1. Data Virtualization 通常情况下我们说数据虚拟化是指数据源没有完全加载,仅加载当前需要显示的数据呈现给用户.这种场景会让我们想到数据分页显 ...
- 使用WCF 创建 Rest service
REST SERVICE 允许客户端修改url路径,并且web端功过url 请求数据. 他使用http协议进行通讯,想必大家都知道 . 并且我们可以通过设置进行数据类型转换, 支持XML,JSON 格 ...
- CozyRSS开发记录12-MVVM,绑定RSS源和数据
CozyRSS开发记录12-MVVM,绑定RSS源和数据 1.引入MvvmLight MVVM最近貌似在前端那块也挺火的.据说,WPF的程序如果不用MVVM,那跟MFC和winform的,也没啥区别. ...
- python/matplotlib库的安装