Promise的几个方法补充

97 阅读2分钟

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的状态由p1p2p3决定,分成两种情况。

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

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

Promise.allSettled

返回值

返回一个在所有给定的 promise 都已经fulfilledrejected后的 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返回 fulfilledrejected,返回的 promise 就会fulfilledrejected

Promise.any

返回值

只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。

Promise.any()Promise.race()方法很像,只有一点不同,就是Promise.any()不会因为某个 Promise 变成rejected状态而结束,必须等到所有参数 Promise 变成rejected状态才会结束。