ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作)。使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回调金字塔’里去,将异步的操作以同步的的形式展现出来。Promise对象对外提供了一整套完整的接口,方便开发者更好地控制异步操作。

Promise语法

ES6的Promise对象是一个构造函数,创建一个Promise对象实例的语法如下:

    new Promise (function(resolve, reject){});

Promise接受一个函数作为参数,这个函数也包含两个参数,这两个参数分别是resolve方法和reject方法,其中resolve方法在处理执行成功的时候将Promise对象的状态变为"fulfilled ",而reject方法则在处理执行失败的时候将Promise对象的状态变为"rejected"。

    var promise = new Promise(function(resolve,reject){
if (/*异步操作成功*/) {
resolve(value)
} esle {
reject(error)
} }); promise.then(function(value){//success},function(value){//error})

从上面的代码我们可以看到,Promise对象实例生成后,可以使用then方法为异步操作成功或者失败的时候指定相应的处理方法。来看一个简单的例子。

  if (window.Promise) {
var promise = new Promise(function(resolve,reject){
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject();
}
request.open('GET','https://cnodejs.org/api/v1/topics');
request.send();
request.onload = function() {
if(request.status == 200){
resolve(request.response)
}else{
reject(Error(request.statusText));
}
}
request.onerror = function() {
reject(Error('fetch data error.'))
} })
} else {
console.log('Promise not support.');
} promise.then(function(value){
console.log(value);
},function(error) {
console.log(error.message);
})

以上例子的代码即是Promise实现的异步请求。

Promise概念

理解Promise之前,先来看看Promise对象包含的几种状态:

①pending:既不是fulfilled状态,也不是rejected状态
②fulfilled:成功的操作
③rejected:失败的操作

从上面的流程图可以看出,处于pending状态的Promise对象既可以转变为一个带有成功值的fulfill状态,也可以转变为一个带有失败信息的rejected状态。当Promise的状态发生改变时,由Promise.then绑定的回调函数就会被调用。

Promise对象的原型:Promise.prototype

Promise.prototype即是Promise构造器的原型,所有的Promise实例对象都继承自Promise.prototype,可以通过Promise构造器的原型对象来给所有Promise实例添加属性和方法。

Promise.prototype.catch(onReject): catch方法只用来处理Promise被拒绝的情况,同时返回一个Promise对象,这个原型方法的行为和调用跟promise.then(undefined,onReject)相同。

    promise.catch(onReject);
promise.then(function(error){//拒绝})

Promise.prototype.then(onfulfilled,onRejected):then方法也会返回一个Promise对象,then方法有两个参数,它们分别是Promise成功或者失败时的回调函数。

    promise.then(onFulfilled,onRejected);
promise.then(function(value){
console.log(value)//成功状态
},function(reason){
console.log(reason.message);//失败状态
})

链式Promise

由于Promise对象的catch方法和then方法都返回一个Promise对象,所以可以实现Promise的链式调用,可以帮助我们陷入“回调金字塔”,例如当你的某个操作返回数据,然后你要基于这些数据完成另一个操作,再返回新的数据,然后再基于这些新的数据完成另一个新的操作,这时我们就可以使用Promise对象的链式调用,以增强代码的可读性,同时从一层嵌套一层的“回调金字塔”中挣脱出来。还是以异步请求举个例子。

    function getData(url) {
return new Promise(function(resolve,reject){
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject();
}
request.open('GET',url);
request.send();
request.onload = function() {
if(request.status == 200){
resolve(request.response)
}else{
reject(Error(request.statusText));
}
}
request.onerror = function() {
reject(Error('fetch data error.'))
} })
} getData('https://cnodejs.org/api/v1/topics').then(function(result){
var result = JSON.parse(result);
return getData('https://cnodejs.org/user/'+result.data[0].author.loginname);//由于浏览器同源策略的原因,这个异步请求是失败的,这里只是示意
}).then(function(result){
console.log(result);
}).catch(function(error){
console.log(error);
});

Promise的错误处理

通过前面的例子,我们也可以看到,Promise对象的错误由catch方法来捕获,传入catch方法的参数即为Promise发生错误时的回调函数。前面也提到了,catch方法的行为和调用跟Promise.prototype.then(undefined,rejected)相同,也就是说then方法里面传入的第二个参数rejected函数和传入catch方法的回调函数,都会在Promise对象状态变为"rejected"时被调用。

简单理解ECMAScript2015中的Promise的更多相关文章

  1. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  2. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  3. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

    在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...

  4. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  5. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  6. 理解ES6中的Promise

    一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...

  7. 彻底理解Javascript 中的 Promise(-------------------------------***---------------------------------)

    ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个 ...

  8. 一句话简单理解javascript中的原型对象

    通过构造函数F创建的对象实例p 这个对象p的原型对象是 构造函数中prototype属性指向的对象s,这个对象p中也有个非标准的__proto__属性指向构造函数prototype属性所指向的对象s, ...

  9. 如何简单理解js中this的指向

    前序 每个人学js都会被this指向这个东西搞得很蒙,那就是this的指向问题.首先,我们要明白 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上thi ...

随机推荐

  1. Android菜鸟成长记4-button点击事件

    Button 1.button按钮的创建 一般来说,在我们新建一个Android项目的时候,会有会默认有一个activity_main.xml的文件 如果你在新建项目的时候,把Create Activ ...

  2. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  3. Activity生命周期(二)

    ------siwuxie95 在项目 ActivityLifeCircle 的 MainActivity.java 中添加方法: onCreate()  onStart()  onResume()  ...

  4. Convert HTML Entities

    function convert(str) { // :) //return str; var HTML_Entities = { '&':'&', '<':'<', '& ...

  5. RHEL 集群(RHCS)配置小记 -- 文档记录

    1.RHEL 6 集群配置官方管理手册 https://access.redhat.com/site/documentation/zh-CN/Red_Hat_Enterprise_Linux/6/pd ...

  6. poj 3368 Frequent values(RMQ)

    /************************************************************ 题目: Frequent values(poj 3368) 链接: http ...

  7. Delphi inline编译器优化问题

    function Test():Integer; inline; var P:Pointer; begin FreeMem(P); Result := AtomicIncrement(__gr); / ...

  8. Maven学习之 插件plugin

    Maven本质上是一个执行插件的框架.插件共分两类:build插件和reporting插件. build插件,会在build阶段被执行,应该配置在POM的<build/>元素中. repo ...

  9. hp小机定位网卡位置

    rad已经被olrad取代 HPUX下定位网卡位置                                                   一台HP小型机,可能配了多块网卡,在系统中以la ...

  10. Browser设置UA值

    SWE Browser中的OptionMenu是Controller通过onKeyDown监听KEYCODE_MENU来显示的 public boolean onKeyDown(int keyCode ...