promise对象表示了一个异步操作
的状态结果
经常,我们会在需要同步化代码的时候,解决回调地狱的时候使用到promise
所以,使用promise可以解决回调地狱的问题,帮助我们的代码更加美观
一个简单的使用
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => { resolve(100); }, 1000);
});
promise1.then(rst => {
console.log(rst);
});
解释下:这里的定时器是一个异步操作,在一秒后,进入成功回调参数为100,也就是下面的rst的值。在这个promise进入成功或者失败回调后,打印rst的值(100)。
到这里为止,应该就会使用promise了。
即使这样,下面的知识点也是非常重要的。
一个promise对象某时刻一定是处于这三种状态中的一种:pending(待定), fulfilled(成功), or rejected(失败).
在状态改为fulfilled/rejected之前,这个promise一直处于pending状态,一旦状态改为fulfilled/rejected后这个promise的状态就不能再改变了
then、catch、finally这三个方法是promise的原型方法,使用这三个方法就可以完成一个完整的一个链式调用。
var p1 = new Promise(function(resolve, reject) {
resolve('Success');
});
p1.then(function(value) {
console.log(value); // "Success!"
return Promise.reject('oh, no!');
}).catch(function(e) {
console.log(e); // "oh, no!"
}).then(function(){
console.log('after a catch the chain is restored');
}, function () {
console.log('Not fired due to the catch');
});
then和catch对比:
catch
只处理拒绝情况下的回调,他的情况和Promise.prototype.then(undefined, onRejected)相同。
then
既可以处理成功也可以处理拒绝情况(接受两个回调)。
之所以then、catch可以进行链式调用,是因为他们返回的都是promise对象
class MyPromise {
constructor(fn) {
this.resolvedCallBack = [];
this.rejectedCallBack = [];
this.status = 'PEDDING';
this.value = '';
fn(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value) {
if (this.status === 'PEDDING') {
this.status = 'RESOLVED';
this.value = value;
this.resolvedCallBack.map(cb => cb(value));
}
}
reject(value) {
if (this.state === 'PEDDING') {
this.status = 'REJECTED';
this.value = value;
this.rejectedCallBack.map(cb => cb(value));
}
}
then(onFulfilled, onRejected) {
if (this.state === 'PEDDING') {
this.resolvedCallBack(onFulfilled);
this.rejectedCallBack(onRejected);
}
if (this.state === 'RESOLVED') {
onFulfilled(this.value);
onRejected(this.value);
}
}
}