今天我们讲一下es6对Promise的扩展,我们使用axios进行ajax请求来演示一下，
首先我先准备了3个接口：
在这里插入图片描述

Promise.all()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script>
    const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
        .then(res => {
            console.log('promise1成功了!');
            return res.data.data
        })

    const promise2 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise2')
        .then(res => {
            console.log('promise2成功了!');
            return res.data.data
        })

    const promise3 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise3')
        .then(res => {
            console.log('promise3成功了!');
            return res.data.data
        })

    const promise = Promise.all([promise1, promise2, promise3])
        .then(res=> {
            console.log(res);
            console.log('Promise.all成功了!');
        })
        .catch(err=>{
            console.log(err)
            console.log('Promise.all出错了!');
        })
</script>
</body>
</html>

我们知道axios返回的是一个promise对象,我们可以打印一下：

console.log(promise1)

输出:

在这里插入图片描述
Promise.all就是用于将多个 Promise 实例，包装成一个新的 Promise 实例
Promise.all,接收的参数是一个可迭代对象，比如：Array、String等，我们这个例子是接收了一个数组，数组的每一项都返回Promise实例

promise1,promise2,promise3都是返回promise实例，如果他们都返回成功的状态，Promise.all则返回成功的状态，输出一个数组，是promise1,promise2,promise3的返回值，数组的顺序和他们的执行顺序无关，和他们作为参数排列的顺序有关
看下我们例子的输出:
在这里插入图片描述
我们将promise1做一下改动，使promise1报错:

    const promise1 = axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promise1')
        .then(res => {
            console.log('promise1成功了!');
            return err
        })

在这里插入图片描述
如果有一个返回失败（reject），Promise.all则返回失败（reject）的状态，此时第一个被reject的实例的返回值，会传递给promise的回调函数。
promise的执行结果依赖于promise1,promise2,promise3的执行结果，全部成功，Promise.all就返回成功，有一个失败，Promise.all就返回失败
Promise.all只关心集体的执行结果

Promise.race()

Promise中的竞态，用法和Promise.all类似，对应参数也与Promise.all相同是个可迭代对象
race() 返回一个 Promise，谁执行的快，就返回谁的执行结果，不管是成功还是失败

const promise = Promise.race([promise1, promise2, promise3])
        .then(res => {
          console.log(res);
          console.log('Promise.all成功了!');   
        })
        .catch(err=>{
          console.log(err);
          console.log('Promise.all出错了!')
        })

输出：
在这里插入图片描述
通过输出我们发现
promise2是第一个完成的，所以promise的返回结果就是promise2的执行结果
而且就算完成，但是进程不会立即停止，还会继续执行下去。

Promise.finally()

finally() 方法返回一个Promise，在promise执行结束时，无论结果是成功或者是失败，在执行then()和catch()后，都会执行finally指定的回调函数,该方法是 ES9 引入标准的。

      const promise = Promise.race([promise1, promise2,promise3])
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => {
          console.log("finally的执行与状态无关")
        });

在这里插入图片描述
如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时，finally() 方法可能是有用的。

JavaScript异步Promise.all()、Promise.race()以及Promise.finally()

Promise.all()

Promise.race()

Promise.finally()

猜你喜欢