Promise “承诺”
它是异步编程的一种解决方案。
Promise 对象的特点:
(1)对象的状态不受外界影响。Promise
对象代表一个异步操作,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
(2)Promise对象的状态改变,只有两种可能:从
pending变为
fulfilled和从
pending变为
rejected`。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。
基本用法
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和 reject
const myPromise = new Promise((resolve,reject)=>{
if(true){
resolve(val);
}else{
reject(error);
}
})
then
方法分别指定resolved
状态和rejected
状态的回调函数。
myPromise.then((res)=>{
console.log('success:',res)
},(error)=>{
console.log('failure:',error)
})
Promise.prototype.then()
then
方法是定义在原型对象Promise.prototype
上,返回的是一个新的Promise
实例。因此可以实现链式调用。
myPromise.then((res1)=>{
resolve(res1)
}).then((res2)=>{
resolve(res2)
})...
Promise.prototype.catch()
与then
的原理相同,用于指定发生错误时的回调函数
myPromise.then((res)=>{
console.log(res)
}).catch((err)=>{
console.log('出现错误:' err)
})
Promise.prototype.finally()
finally()
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
myPromise.then(res=>{
...
}).catch(err =>{
...
}).finally(()=>{
let a = 1 + 2 ;
...
})
// finally() 等同于
myPromise.then(res=>{
let a = 1 + 2 ;
...
}).catch(err=>{
let a = 1 + 2 ;
})
Promise.all()
用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const allPromise = Promise.all([p1, p2, p3]); // p1、p2、p3都是 Promise 实例
allPromise 的状态由 p1、p2、p3决定。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,allPromise
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给allPromise
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,allPromise
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给allPromise
的回调函数。
Promise.race()
将多个 Promise 实例,包装成一个新的 Promise 实例
const racePromise = Promise.race([p1, p2, p3])
只要p1
、p2
、p3
之中有一个实例率先改变状态,racePromise
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给racePromise
的回调函数。
Promise.allSettled()
接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有实例返回结果,才会结束。
const arr =[
fetch('/api-get1'),
fetch('/api-get2'),
fetch('/api-get3'),
];
let allsettledPromise = Promise.allSettled(arr)
Promise.resolve()
有时需要将现有对象转为 Promise 对象
**(1)参数是一个 Promise 实例 **
如果参数是 Promise 实例,那么Promise.resolve
将不做任何修改、原封不动地返回这个实例
(2)参数是一个thenable
对象
将这个对象转为 Promise 对象,然后就立即执行thenable
对象的then()
方法。
let thenable = {
then: function(resolve,reject){
resolve('good');
}
};
let resPromise = Promise.resolve(thenable);
resPromise.then(res=>{
console.log(res); // good
})
(3)参数根本就不是对象
如果参数是一个原始值,Promise.resolve()
方法返回一个新的 Promise 对象,状态为resolved
const resPromise = Promise.resolve('job');
resPromise.then(res=>{
console.log(res); // job
})
(4)不带有任何参数
直接返回一个resolved
状态的 Promise 对象,如果希望得到一个 Promise 对象,比较方便的方法就是直接调用Promise.resolve()
方法。
const resPromise = Promise.resolve();
resPromise.then(()=>{
...
})
setTimeout(()=>{
console.log(3);
},0);
Promise.resolve().then(()=>{
console.log(2);
});
console.log(1);
// 1 2 3
setTimeout(fn, 0)
在下一轮“事件循环”开始时执行,Promise.resolve()
在本轮“事件循环”结束时执行,console.log('one')
则是立即执行
Promise.reject()
返回一个新的 Promise 实例,该实例的状态为rejected
Promise.reject('404').catch(err=>{
if(err == '404') console.log('错误页面');
...
})
参考文献
阮一峰老师的 ECMAScript 6 入门
点赞 评论 收藏 ~~ 今天的学习记录暂时到这... ~~ 点赞 评论 收藏