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

今天我们讲一下es6对Promise的扩展,我们使用axios进行ajax请求来演示一下,
首先我先准备了3个接口:
JavaScript异步Promise.all()、Promise.race()以及Promise.finally()_第1张图片

Promise.all()


<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)
输出:

JavaScript异步Promise.all()、Promise.race()以及Promise.finally()_第2张图片
Promise.all就是用于将多个 Promise 实例,包装成一个新的 Promise 实例
Promise.all,接收的参数是一个可迭代对象,比如:Array、String等,我们这个例子是接收了一个数组,数组的每一项都返回Promise实例

promise1,promise2,promise3都是返回promise实例,如果他们都返回成功的状态,Promise.all则返回成功的状态,输出一个数组,是promise1,promise2,promise3的返回值,数组的顺序和他们的执行顺序无关,和他们作为参数排列的顺序有关
看下我们例子的输出:
JavaScript异步Promise.all()、Promise.race()以及Promise.finally()_第3张图片
我们将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出错了!')
        })

输出:
JavaScript异步Promise.all()、Promise.race()以及Promise.finally()_第4张图片
通过输出我们发现
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的执行与状态无关")
        });

JavaScript异步Promise.all()、Promise.race()以及Promise.finally()_第5张图片
如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时,finally() 方法可能是有用的。

友情链接:点击查看所有文章目录

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

你可能感兴趣的:(JavaScript异步)