ES6+ 现在就用系列(七):Promise
回调地狱 (Callback Hell)
之前几乎所有的 JavaScript 使用 Callback 来处理异步的调用,这个在早期的JavaScript甚至是Node.js里到处可以见到一层层的Callback, 由于我们思维一般是线性的,每次看到这样的代码都理解起来有点费劲。我们看一下下面的实例:
1 | fs.readFile('/a.txt', (err, data) => { |
当我们只有一个异步操作时,还可以接受, 如果多个时就读起来比较费力了。
1 | fs.readFile('a.txt', (err, data) => { |
再看一个, 加入我们要运行一个动画,下面每隔一秒,执行一个动画
1 | runAnimation(0); |
上面还好只有两级操作时还好,如果是10级呢?我们后面几行是一堆的括号,我们看着可能就有点晕了。
Promise
为了解决回调地狱(callback hell), ES6 原生提供了Promise对象。
Promise 是一个对象,用来传递异步操作的消息,这个和callback不同,callback是一个函数。
Promise对象的特性
对象的状态不受外界影响。
Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败), 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
状态一旦改变,再改变就不起作用了。
Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。
Promise 无法取消
一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误的不会向上传递。
用法
基本使用
Promise对象是一个构造函数,用来生成Promise实例。
1 | let promise = new Promise((resolve, reject) => { |
我们可以看到一旦构造了promise对象,就会立即执行, 所以上面代码立即输出:
1 | promise start... |
那么如何使用promise对象呢? promise对象提供了then方法,then方法接受两个回调方法,一个是处理成功,一个处理失败。
1 | promise.then( |
我们使用之前我们定义的promise对象。
1 | let promise = new Promise((resolve, reject) => { |
1 | promise.then( |
如果我们把 let age=20 改为 let age=16 , 那么将输出:
1 | // let age = 20; |
链式调用
Promise对象返回的还是一个promise对象,所以我们就可以用 then 来链式调用。
1 | promise |
我们在then里面 也可以是一个异步操作,那么后面的then 将等待前一个promise完成。
1 | promise |
可见上面的代码并不会等待setTimeOut执行完毕。如果我们想等五秒呢? 那么我们必须返回promise对象
1 | promise |
可见,如果我们自己不返回promise对象,那么后一个then将立即执行!
错误处理
Promise.prototype.catch 方法是 .then(null, rejection)的别名,用于指定发生错误时的回调函数。
1 | let promise2=new Promise((resolve,reject)=>{ |
Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。如果没有使用catch方法指定错误处理的回调函数,Promise对象抛出的错误不会传递到外层代码,即不会有任何反应。
catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法。
1 | promise2.then((age)=>{console.log(age)}) |
需要注意的是catch指捕捉之前的then, 后面的then调用出的错误是捕获不到的。
promise.all 并行调用
var p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,分成两种情况。
1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
1 | let promise1=new Promise((resolve, reject)=>{ |
Promise.race()
1 | var p = Promise.race([p1,p2,p3]); |
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数。
Promise.resolve
将现有对象转为Promise对象
1 | Promise.resolve('foo') |
Promise.reject()
1 | var p = Promise.reject('出错了'); |
Promise.reject(reason)方法也会返回一个新的Promise实例,该实例的状态为rejected。Promise.reject方法的参数reason,会被传递给实例的回调函数。
自定义方法
(注: 下面两个方法来自阮一峰)
Done 方法
Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。
1 | promise2.then((age)=>{console.log(age)}) |
done 方法的实现代码
1 | Promise.prototype.done = function (onFulfilled, onRejected) { |
finally 方法
finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。
1 | Promise.prototype.finally = function (callback) { |
ES6+ 现在就用系列(七):Promise
http://deshui.wang/2016/01/22/technologies-JSNext-2016-1-22-javascript-next-features-promise/
版权:本文版权归作者所有,转载需经作者同意。