Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
const p = new Promise((resolve, reject)=>{
resolve(22)
})
// 1.初始化,状态:pending
// 2.当调用resolve(成功),状态:pengding=>fulfilled
// 3.当调用reject(失败),状态:pending=>rejected
注意: 一旦状态改变,就不会再变
Promise.all
场景: 一个页面请求10个接口,初始情况显示数据加载中有loading效果,当接口全请求完毕loading消失
const p1 = "我是一个同步变量";
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("第一个接口返回数据啦");
}, 300);
});
const p3 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("第二个接口返回数据啦");
}, 100);
});
const p = Promise.all([p1, p2, p3]).then(function (values) {
console.log(values);
});
返回值
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
Promise.allSettled
返回值
返回一个在所有给定的 promise 都已经fulfilled或rejected后的 promise,并带有一个对象数组,每个对象表示对应的 promise 结果(并且会显示无论是fulfilled还是rejected状态)
Promise.race
场景: 点击按钮发请求,当后端的接口超过一定时间,假设超过三秒,没有返回结果,我们就提示用户请求超时
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("接口请求");
}, 4000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("超时提示");
}, 3000);
});
const p3 = new Promise((resolve, reject) => {
reject("请求失败");
});
Promise.race([p1, p2, p3]).then((value) => {
console.log(value);
});
返回值
返回一个 promise,一旦迭代器中的某个promise返回 fulfilled或rejected,返回的 promise 就会fulfilled或rejected
Promise.any
返回值
只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。
Promise.any()跟Promise.race()方法很像,只有一点不同,就是Promise.any()不会因为某个 Promise 变成rejected状态而结束,必须等到所有参数 Promise 变成rejected状态才会结束。