Promise.all和Promise.race区别

Promise.all

Promise.all将多个Promise实例包装成一个新的Promise实例

Promise.all([p1,p2,p3])
情况1：存在返回失败的Promise时

let s1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s1");
        resolve('输出success')
    }, 1000);

})
let s2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s2");
        resolve('输出success2')
    }, 2000);

})
let f1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f1");
        reject('输出failed1')
    }, 100);
})
let f2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f2");
        reject('输出failed2')
    }, 2000);
})

// 执行Promise存在失败的情况
Promise.all([s1, f2, f1, 123])
    .then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error); //failed1
    })

输出

执行了f1
输出failed1
执行了s1
执行了s2
执行了f2

结果可以看到，如果有任何一个失败，该Promise失败，返回值是第一个失败的子Promise的结果。函数都会被调用，只返回第一个失败的值。

情况2：返回都是成功的Promise

let s1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s1");
        resolve('输出success')
    }, 1000);

})
let s2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s2");
        resolve('输出success2')
    }, 2000);

})
Promise.all([s2, s1])
    .then(result => {
        console.log(result); //[ 'success2', 'success' ]
    })
    .catch(error => {
        console.log(error);
    })
Promise.all([s1, s2])
    .then(result => {
        console.log(result); //[ 'success', 'success2' ]
    })
    .catch(error => {
        console.log(error);
    })

控制台输出

执行了s1
执行了s2
[ '输出success2', '输出success' ]
[ '输出success', '输出success2' ]

结果可以看出执行顺序可以自己控制，返回的值是每个执行结果组成的数组，返回值的数组顺序和Promise.all（）参数的数组顺序一样。

Promise.race

例子1：把f1设置200毫秒的延迟，四个任务中先执行f1

let s1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s1");
        resolve('输出success')
    }, 1000);

})
let s2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s2");
        resolve('输出success2')
    }, 2000);

})
let f1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f1");
        reject('输出failed1')
    }, 200);
})
let f2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f2");
        reject('输出failed2')
    }, 2000);
})
Promise.race([s1, s2,f1,f2])
    .then(result => {
        console.log(result); //输出了success
    })
    .catch(error => {
        console.log(error);
    })

输出

执行了f1
输出failed1
执行了s1
执行了s2
执行了f2

情况2：先执行成功函数的情况

let s1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s1");
        resolve('输出success')
    }, 0);

})
let s2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了s2");
        resolve('输出success2')
    }, 2000);

})
let f1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f1");
        reject('输出failed1')
    }, 200);
})
let f2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("执行了f2");
        reject('输出failed2')
    }, 2000);
})
Promise.race([s1, s2,f1,f2])
    .then(result => {
        console.log(result); 
    })
    .catch(error => {
        console.log(error);
    })

输出

执行了s1
输出success
执行了f1
执行了s2
执行了f2

结论：Promise.race有任意一个返回成功(无论返回resolve还是reject)，就算完成，返回值为第一个完成的任务，但是 进程不会立即停止。