Promise 学习笔记

时间:2022-04-04 23:38:02

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消(发起 fetch 请求,不能 abort。fetch 是基于 Promise 设计)。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

如果某些事件不断地反复发生,一般来说,使用stream模式是比部署Promise更好的选择。

var promise = new Promise(function(resolve, reject) {
// 进行异步操作 if (/* 异步操作成功 */){
resolve(value); // 调用 resolve,将异步操作返回的 value,作为参数传递出去
} else {
reject(error); // 调用 reject,将异步操作返回的 error,作为参数传递出去
}
});
promise.then(function(value) {
// 接收 resolve 传递的参数,进行处理
}, function(error) {
// 接收 reject 传递的参数,进行处理。第二个参数为可选的
});

在新建 Promise 的时候,new Promise 里的代码会立即执行:

let promise = new Promise(function(resolve, reject) {
// new Promise 新建了 Promise,这里面的代码立即执行
console.log('Promise');
resolve();
}); // then 方法的回调函数是异步操作,所以会添加到事件循环的任务队列中,主线程操作完毕后才执行
promise.then(function() {
console.log('Resolved.');
}); console.log('Hi!'); // Promise
// Hi!
// Resolved

Promise 封装 AJAX

var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send(); function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
// 使用 resolve 得到 AJAX 获取的数据
resolve(this.response);
} else {
// 使用 reject 抛出错误
reject(new Error(this.statusText));
}
};
}); return promise;
}; getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});

Promise.prototype.then() 

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) { // 第二个 then 方法中,函数接收的参数是前一个 then 方法中的返回值
// ...
});
getJSON("/post/1.json").then(function(post) {
// 在 then 方法中调用 getJSON 返回了另一个 Promise 对象
return getJSON(post.commentURL);
}).then(function funcA(comments) { // 这个 then 方法就会根据前一个 then 方法返回的 Promise 对象的状态,发生变化后,调用 funcA 或 funcB
console.log("Resolved: ", comments);
}, function funcB(err){
console.log("Rejected: ", err);
});

Promise.prototype.catch() 

Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。

getJSON("/posts.json").then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});

Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。

一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。

需要注意的是,catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法。

var someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错,因为x没有声明
resolve(x + 2);
});
}; someAsyncThing()
.catch(function(error) {
console.log('oh no', error);
})
.then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on

上面代码运行完catch方法指定的回调函数,会接着运行后面那个then方法指定的回调函数。如果没有报错,则会跳过catch方法。

Promise.all() 

Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。

var p = Promise.all([p1, p2, p3]);  // p1, p2, p3 都是 Promise 对象实例

p的状态由p1p2p3决定,分成两种情况。

(1)只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。

(2)只要p1p2p3之中有一个被rejectedp的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON("/post/" + id + ".json");
}); Promise.all(promises).then(function (posts) {
// promises 全部 resolved 的情况,走这里
}).catch(function(reason){
// promises 中有 rejected 的情况,走这里
});

Promise.race()

var p = Promise.race([p1,p2,p3]);  // p1, p2, p3 都是 Promise 对象实例

只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数。

done()

asyncFunc()
.then(f1)
.catch(r1)
.then(f2)
.done(onFulfilled, onRejected);

done方法的使用,可以像then方法那样用,提供FulfilledRejected状态的回调函数,也可以不提供任何参数。但不管怎样,done都会捕捉到任何可能出现的错误,并向全局抛出。

finally()

server.listen(0)
.then(function () {
// run test
})
.finally(server.stop);

finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。