简单理解ECMAScript2015中的Promise
2016-08-29 10:50
288 查看
ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作)。使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回调金字塔’里去,将异步的操作以同步的的形式展现出来。Promise对象对外提供了一整套完整的接口,方便开发者更好地控制异步操作。
Promise接受一个函数作为参数,这个函数也包含两个参数,这两个参数分别是resolve方法和reject方法,其中resolve方法在处理执行成功的时候将Promise对象的状态变为"fulfilled ",而reject方法则在处理执行失败的时候将Promise对象的状态变为"rejected"。
从上面的代码我们可以看到,Promise对象实例生成后,可以使用then方法为异步操作成功或者失败的时候指定相应的处理方法。来看一个简单的例子。
以上例子的代码即是Promise实现的异步请求。
①pending:既不是fulfilled状态,也不是rejected状态
②fulfilled:成功的操作
③rejected:失败的操作
从上面的流程图可以看出,处于pending状态的Promise对象既可以转变为一个带有成功值的fulfill状态,也可以转变为一个带有失败信息的rejected状态。当Promise的状态发生改变时,由Promise.then绑定的回调函数就会被调用。
Promise.prototype.catch(onReject): catch方法只用来处理Promise被拒绝的情况,同时返回一个Promise对象,这个原型方法的行为和调用跟promise.then(undefined,onReject)相同。
Promise.prototype.then(onfulfilled,onRejected):then方法也会返回一个Promise对象,then方法有两个参数,它们分别是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简单实现的背后原理
- 基于 ECMAScript 6 即 ECMAScript 2015 的 javascript class 类封装的简单使用
- ECMAScript 2015(ES6)规范中的promise
- Promise简单理解---ES6
- Promise的理解和react等框架的简单理解笔记
- c# interface 的理解(工厂模式)简单实例
- 类、对象、接口、继承等概念的理解的简单表述..
- 简单的理解 类的继承 和 多态性
- 工厂方法的简单理解
- 用CMP访问数据库,简单的,但不理解为什么URL不修改仍然可以运行
- 数据仓库概念的简单理解
- 简单理解asp.net 2.0 三层开发
- 打破沙锅——AOP简单理解
- 分布式应用程序结构简单理解
- 简单理解一下机会成本
- Castle- Startable Facility 简单理解
- 学习计划, -VB delphi 进行简单的编程理解
- 分布式应用程序结构简单理解
- Javascript原型的简单理解