Promise静态方法之all、race

Promise静态方法之all、race

Promsie.all()

定义：并发处理多个异步任务，所有任务都执行成功，才算成功（走到 resolve）；只要有一个失败，就会马上走到 reject，整体都算失败。

demo：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('promise1执行了');
        resolve('promise1执行成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('promise2执行了');
        resolve('promise2执行成功');
        // reject('promise2执行失败');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('promise3执行了');
        resolve('promise3执行成功');
    }, 3000);
});

Promise.all([promise1, promise2, promise3])
    // 三个异步任务都执行成功，才会执行.then
    .then((res) => {
        console.log(JSON.stringify(res)); // 三个promise的成功结果
    })
	// 只要有一个异步任务执行失败，就会马上走到这里
    .catch((err) => {
        console.log(err);
    });

应用场景：多张图片上传时，当所有图片上传成功才提示“上传成功”

Promise.race()

定义：并发处理多个异步任务，返回的是第一个执行完成的 promise，且状态和第一个完成的任务状态保持一致。

demo：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('promise1执行了');
        resolve('promise1执行成功');
    }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('promise2执行了');
        resolve('promise2执行成功');
    }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('执行 promise3');
        resolve('promise3执行成功');
    }, 3000);
});

Promise.race([promise1, promise2, promise3])
    // 第一个完成的任务，如果执行成功，就会走到这里
    // 这里拿到的 res，是第一个成功的 promise 返回的结果，不是数组
    .then((res) => {
        console.log(JSON.stringify(res));
    })
	// 第一个完成的任务，如果执行失败，就会走到这里
    .catch((err) => {
        console.log(err);
    });

应用场景：图片加载（网络请求）超时，如果图片加载时长超过指定秒数，则按照异常处理。

通过Promise的静态方法可以看出，Promise除了解决异步任务的回调地狱问题之外，还可以处理多个异步任务的并发请求，让我们更简便的进行状态管理。