Promise对象

文章共636个字 读完大约需要2分钟

Promise

基本信息

Promise是异步编程的一种解决方案,它可以将异步操作以同步操作的形式展现出来,避免了层层嵌套的回调函数,此外,promise对象提供了统一的接口,使得控制异步操作更加容易

Promise有三种状态,pendding,fulfilledrejected。无论从penddingfulfilled;还是从penddingrejected,只要状态改变了,就回凝固,之后再调用回调函数只能获得其结果。

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)=> {
// success
if(){
resolve(value);
}else {
reject(error);
}
});
// .then方法
promise.then(function(value){
// success...
},function(error){
// error...
});

Promise实例创建完成后,可以用.then方法分别指定resolvereject状态的回调函数。所以,.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 实例。

推荐文章

-->