Promise
基本信息
Promise
是异步编程的一种解决方案,它可以将异步操作以同步操作的形式展现出来,避免了层层嵌套的回调函数,此外,promise
对象提供了统一的接口,使得控制异步操作更加容易
Promise
有三种状态,pendding
,fulfilled
和rejected
。无论从pendding
到fulfilled
;还是从pendding
到rejected
,只要状态改变了,就回凝固,之后再调用回调函数只能获得其结果。
Promise
创建之后就会立即执行,无法中途取消;如果不设置回调函数,其内部抛出的错误外部接收不到;当promise
处于pendding
状态时,无法确认其当前处于哪个阶段。
基本用法
Promise
对象接受两个参数,resolve
将其从pendding
状态变成resolve
(成功状态),并将其结果作为参数传递出去。reject
将其从pendding
状态变成reject
(失败状态),并将其错误以参数传递出去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| const promise = new Promise((resolve, reject)=> { if(){ resolve(value); }else { reject(error); } });
promise.then(function(value){ },function(error){ });
|
Promise
实例创建完成后,可以用.then
方法分别指定resolve
和reject
状态的回调函数。所以,.then
方法接收两个回调函数为参数,一个为Promise
状态更改为resolve
的时候调用,一个是Promise
状态更改为reject
的时候调用。
两个实例
异步加载图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| function loadImageAsync(url) { return new Promise(function(resolve, reject) { const image = new Image();
image.onload = function() { resolve(image); };
image.onerror = function() { reject(new Error('Could not load image at ' + url)); };
image.src = url; }); }
|
Ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| const getJSON = function(url) { const promise = new Promise(function(resolve, reject){ const handler = function() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send();
});
return promise; };
getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json); }, function(error) { console.error('出错了', error); });
|
Promise原型上的方法
Promise.prototype.then()
: 当Promise
实例的状态发生改变时为其添加回调函数,.then
方法返回另一个新的promise
实例,所以可以采用链式写法。
Promise.prototype.catch()
: 当Promise
实例失败时候调用
Promise.prototype.finally():
不管Promise
状态如何,都会调用该函数,不接受任何参数。
1 2 3 4 5 6 7
| Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).then(() => { throw reason }) ); };
|
Promise.prototype.all()
: 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。