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

àì夳堔傛蜴生んèń 2022-04-10 12:49 417阅读 0赞

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

# Promise.all() #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript异步</title>
    </head>
    <body>
    <script src="https://unpkg.com/axios@0.18.0/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)

输出:

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

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

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

![在这里插入图片描述][20190107121346727.png]  
如果有一个返回失败（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出错了!')
            })

输出：  
![在这里插入图片描述][20190107123055889.png]  
通过输出我们发现  
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的执行与状态无关")
            });

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

友情链接：[点击查看所有文章目录][Link 1]

友情链接：[点击查看　JavaScript异步系列文章目录][JavaScript]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]: /images/20220330/a91a7301742e485896682296f7fbf339.png
[20190107111215288.png]: /images/20220330/7022a0d7ab824eb29b3c3663d05e3686.png
[20190107115135349.png]: /images/20220330/0edcab9c1f7c4799b3647484e68b74a3.png
[20190107121346727.png]: /images/20220330/2a701abf9890465ca8687dc50c89c11f.png
[20190107123055889.png]: /images/20220330/aef881bd3b644ea0a909eadb686d834e.png
[20190107124020983.png]: /images/20220330/578a71e540474bf58e14f6bfdec56f67.png
[Link 1]: https://blog.csdn.net/qq_42911663/article/details/86365901
[JavaScript]: https://blog.csdn.net/qq_42911663/article/details/86369813