es6 Promise
Promise 是异步编程的一种方案,简单说就是一个容器,里面保存着某个未来才会结束的事件的
结果,Promise 是一个对象,从它,可以获取异步操作的消息。
Promise 对象有以下两个特点。
(1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有是三种状态。pendding
(进行中),fulfilled(已成功)和rejected(已失败)。
(2)一旦状态改变,就不会在变,任何时候都可以得到这个结果,Promise 对象的状态改变
只有两种可能: 从pending 变为fulfilled 和pending 变为rejected.如果改变已经发生 了,你在
对Promise对象添加回调函数,也会立即得到这个结果。
Promise 有一些缺点,首先无法取消Promise ,一旦新建它就会立即执行,中途无法取消。
如果不设置回调函数,Promise内部抛出的错误,不会立即反应到外部。当处于pending
状态时,无法得子目前进展到哪一个阶段。
用法
Promise 对象是一个构造函数,用来生成Promise实例。
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve 和reject。
resolve 函数的作用是,将Promise 对象的状态从“未完成”变为“成功”,在异步操作成功
的时候调用,并将异步操作的结果,作为参数参数传递。
reject 函数的作用是,将Promise对象的状态从“未完成”变为“失败”,在异步操作失败
的时候调用,并将异步操作报出错误,作为参数传递出去。
Promise 实例陈仓以后,可以使用then 方法分别指定resolved状态和rejected状态回调函数。
例如:
promise.then(function(value){ // success },function(error){ // failure });
第一个回调函数是状态变为resolved时调用,
第二个回调函数是Promise对象的状态变为rejected时调用。
Promise对象的简单例子。
funcion timeout(ms){ return new Promise((resolve,reject)=>{ setTimeout(resolve,ms,'done'); }); } timeout(100).then((value)=>{ console.log(value); })
Promise 建立后就会立即执行
let promise = new Promise(function(resolve,reject){ console.log('Promise'); resolve(); }); promise.then(function() { console.log('resolved.'); }); console.log('Hi'); // Promise // Hi! // resolved
Promise.prototype.then()
Promise 实例具有then 方法,也就是说,then方式定义在原型对象Promise.prototype上的。
then 方法返回的是一个新的Promise实例。 第一个参数是resolved状态的回调函数,
第二个参数是rejected状态的回调函数。
Promise.prototype.catch()
Promise.prototype.catch 方法是.then(null,rejection)的别名,用于指定发生错误时的回调函数。
写法一:
const promise = new Promise(function(resolve,reject){ try { throw new Error('test'); }catch(e){ reject(e); } }); promise.catch(function(error){ console.log(error); })
// 写法二
const promise = new Promise(function(resolve,reject){ reject(new Error('test')); }); promise.catch(function(error){ console.log(error); })
Promise.all()
Promise.all 方法用于将多个Promise 实例,包装成一个新的Promise实例。
const p = Promise.all([p1,p2,p3]);
Promise.all 方法接受一个数组作为参数,p1,p2,p3都是Promise实例,如果不是,就会
调用下面讲到的Promise.resolve方法,将参数转为Promise实例。
Promise.race()
Promise.race 方法同样是将多个Promise实例,包装成一个新的Promise实例。
const p = Promise.race([p1,p2,p3]);
上面例子中,只要p1,p2,p3之中有一个实例率先改变状态,p的状态就跟着改变。
那么率先改变的Promise实例的返回值,就传给p的回调函数。
const p = Promise.race([ fatch('/resource-that-may-take-a-while'), new Promise(function(resolve,reject){ setTimeout(()=> reject(new Error('request timeout')),5000) }) ]); p.then(response => console.log(response)); p.catch(error => console.log(error));
上面代码中,如果5秒内fetch 方法无法返回结果,变量p的状态就会变为rejected,从而
触发catch 方法指定的回调函数。
Promise.resolve()
将现有对象转为Promise对象。
Promise.resolve('foo') 等价于
new Promise(resolve =>resolve('foo'))
Promise.resolve 方法的参数非常四种情况
1.参数一个Promise实例,将不做任何修改,原封不动地返回这个实例。
2.参数一个thenable 对象。
3.参数不是具有then方法的对象,或根本就不是对象。
4. 不带任何参数。
Promise.reject();
Promise.reject(reason) 方法会返回一个新的Promise实例,该实例的状态为rejected
done()
Promise对象的回调链,不管以then方法或是catch 方法结尾,要是最后一个方法抛出
错误,都有可能无法捕捉到。提供一个done方法,总是处于回调链的尾端,保证抛出
任何有可能出现的错误。
Promise.prototype.done = function (onFulfilled,onRejected){
this.then(onFulfilled,onRejected).catch(function(reason){
// 抛出一个全局错误
setTimeout(()=>{throw reason},0)
});
}
应用加载图片
const preloadImge = function(path){ return new Promise(function(resolve,reject){ const image = new Image(); image.onload = resolve; image.onerror = regect; image.src = path; }) };