ES6 Promise详解

更新日期: 2022-08-17阅读: 866标签: Promise

前言

本文主要是对Promise本身的用法做一个全面解析而非它的原理实现,如果你对Promise的用法还不是很熟悉或者想加深你对Promise的理解,我相信这篇文章一定会帮到你。

首先让我们先了解一下JavaScript为什么会引入Promise

回调地狱

让我们先看这样一段代码jquery中ajax请求:

  $.ajax({
      url: "url1",
      data: {},
      success(res1) {
        //获取到第一个数据
        console.log(res1);
        //根据第一个数去去获取第二个数据
        $.ajax({
          url: "url2",
          data: {
            query: res1.xxx,
          },
          success(res2) {
            //获取到第二个数据
            console.log(res2);
            //根据第二个数去去获取第三个数据
            $.ajax({
              url: "url3",
              data: {
                query: res2.xxx,
              },
              success(res3) {
                //获取到第三个数据
                console.log(res3);
                //...
              },
            });
          },
        });
      },
      error(err) {
        console.log(err);
      },
    });

我们会发现这些回调一层又一层,这就被称为回调地狱(callback hell),尤其业务逻辑复杂的时候这些回调就会变得难以维护。于是Promise就出现了。我们再看一个使用promise封装的axios请求:

 axios
      .get(url1, {})
      .then((res1) => {
        //获取到第一个数据
        console.log(res1);
        //根据第一个数去去获取第二个数据
        return axios.get(url2, { query: res1.xxx });
      })
      .then((res2) => {
        //获取到第一个数据
        console.log(res2);
        //根据第二个数去去获取第三个数据
        return axios.get(url3, { query: res2.xxx });
      })
      .then((res3) => {
        //获取到第三个数据
        console.log(res3);
        //...
      })
      .catch((err) => {
        console.log(err);
      });

通过对比我们会发现Promise解决了传统的回调函数的回调地狱问题,使得业务逻辑显得更加清晰了。接下来我们就开始正式介绍Promise了。

概述

Promise是现代异步编程的基础,在Promise返回给我们的时候操作其实还没有完成,但Promise对象可以让我们操作最终完成时对其进行处理,无论成功还是失败。

Promise的返回有三种状态分别是等待(pending), 成功(fulfilled),拒绝(rejected),我们看以下示例(后续我们将用延时器setTimeout来代表我们的异步操作)

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1);
      },1000);
    });
    console.log(promise1);

此时我们可以看到我们获取的Promise是pending(等待的状态)。

同样当我们一秒钟过后再去获取Promise

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1);
      }, 1000);
    });
    setTimeout(() => {
      console.log(promise1);
    }, 1000);

它得到的就是成功(fulfilled)状态。

然后我们将resolve换成reject

const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(1);
      }, 1000);
    });
    setTimeout(() => {
      console.log(promise1);
    }, 1000);

它得到的便是拒绝(rejected)状态,同时给你抛出了一个错误。

基本使用

Promise构造函数只有一个函数作为参数,这个函数会在一个Promise被实例化出来后会被立即执行

 new Promise((resolve, reject) => {
      console.log(1);
    });
    console.log(2);

此时输出的结果是:1 2

Promise接收的函数有两个参数,分别是resolve和reject,其中resolve代表一切正常的时候所调用的函数,reject则代表我们程序异常的时候所调用的函数。resolve函数传入的参数用于向下一个then传递一个值,而reject函数传入的参数则会被.catch捕捉。而Promise.finally则是在Promise状态完成后触发的一个回调,即无论是resolve还是reject都会触发

    //成功示例
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功的值");
      });
    })
      .then((res) => {
        console.log(res); //成功的值
      })
      .catch((err) => {
        //不会触发
        console.log(err);
      })
      .finally(() => {
        console.log("end"); //end
      });

    //失败示例
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("失败的的值");
      });
    })
      .then((res) => {
        //不会触发
        console.log(res);
      })
      .catch((err) => {
        console.log(err); ////失败的值
      })
      .finally(() => {
        console.log("end"); //end
      });

以上便是Promise的基本使用,但是只掌握它的基本使用可不行,我们还需要对其更深入的研究

链式调用

当我们使用Promise的时候,只要我们在.then的回调函数中返回一个成功状态(resolve)的Promise,则在下一个.then的回调函数中便可获取到这个成功函数(resolve)的参数,基于这个特性便有了Promise的链式调用。

    new Promise((resolve, reject) => {
      //这里一般会有一个网络请求或其它异步操作
        resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return new Promise((resolve, reject) => {
        //这里一般会有一个网络请求或其它异步操作
          resolve("成功的值2");
        });
      })
      .then((res) => {
        console.log(res); //成功的值2
        return new Promise((resolve, reject) => {
          //这里一般会有一个网络请求或其它异步操作
          resolve("成功的值3");
        });
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此类推...
      });

我们可以对其进行简写,比如

    new Promise((resolve, reject) => {
      //这里一般会有一个网络请求或其它异步操作
      resolve("成功的值");
    });

可以简写为

Promise.resolve('成功的值')

所以我们的链式调用可以简写为

    new Promise((resolve, reject) => {
      //这里一般会有一个网络请求或其它异步操作
      resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return Promise.resolve("成功的值2");
      })
      .then((res) => {
        console.log(res); //成功的值2
        return Promise.resolve("成功的值3");
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此类推...
      });

同样的reject的简写方式也和resolve一样

    new Promise((resolve, reject) => {
      //这里一般会有一个网络请求或其它异步操作
      reject("失败的值");
    });
    
    //简写为
    Promise.reject('失败的值')

一般我们在实际项目中一般会这样写

      ...
      //网络请求中获取到数据后
      if(xxx){
        //成功
        return Promise.resolve('请求的值')
      }
      return Promise.reject('失败原因')
      ...

其实.then中也会自动返回Promise的封装,也就是说这个链式调用我们可以直接这样写

    new Promise((resolve, reject) => {
      //这里一般会有一个网络请求或其它异步操作
      resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return "成功的值2";
      })
      .then((res) => {
        console.log(res); //成功的值2
        return "成功的值3";
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此类推...
      });

以上便是Promise的链式调用,Promise的链式调用一般用于这些步骤间有先后顺序的操作,比如开头举的例子,需要使用前一个接口请求的数据作为参数去请求另一个接口的情形。

Promise中的all函数

在实际项目中你是否遇到过这样一个情况:你有A、B、C三个接口(或则更多),C接口的参数需要用到A和B两个接口的结果值,此时你为怎么做?

  • 做法1

先请求A接口再请求B接口最后再根据AB接口的结果去请求C接口

    new Promise((resolve, reject) => {
      //请求A接口,这里用setTimeout模拟请求
      setTimeout(() => {
        resolve("A的结果");
      }, 100);
    })
      .then((res) => {
        //根据A结果请求B接口
        setTimeout(() => {
          return "B的请求结果";
        }, 100);
      })
      .then((res) => {
        //根据A和B结果请求C接口
        setTimeout(() => {
          console.log("C的请求结果");
        }, 100);
      })
      .catch((err) => {
        //这里暂不做错误考虑
      });

这种写法逻辑上是没问题的,但是B和A的请求之间是完全没有交集的,而浏览器的http请求是可以同时发起多个请求的,所以这种写法很明显增加了接口请求时间

  • 做法2

在每个请求结束后都去调用请求C的函数,在这个函数中判断两个请求的数据是否都获取到了,然后再进行处理

    let isResultA = false;
    let isResultB = false;

    //请求A接口,这里用setTimeout模拟请求
    setTimeout(() => {
      isResultA = true;
      getC()
    }, 100);

    //请求B接口,这里用setTimeout模拟请求
    setTimeout(() => {
      isResultB = true;
      getC()
    }, 100);
    function getC() {
      if (isResultA && isResultB) {
        //根据A和B的结果请求C接口数据
        setTimeout(() => {
          console.log("C的请求结果");
        }, 100);
      }
    }

很显然这种在写法上是很麻烦的,所以Promise提供了all方法

  • 做法3

Promise.all接收一个iterable类型(Array,Map,Set 都属于 ES6 的 iterable 类型),可以放多个Promise实例,最后.then中获得的是这些输入的Promise的resolve回调的结果数组。同时只要任何一个输入的Promise的reject回调执行或者输入不合法的Promise就会立即抛出错误

    Promise.all([
      new Promise((resolve, reject) => {
        //请求A接口,这里用setTimeout模拟请求
        setTimeout(() => {
          resolve("A的结果");
        }, 2000);
      }),
      new Promise((resolve, reject) => {
        //请求B接口,这里用setTimeout模拟请求
        setTimeout(() => {
          resolve("B的结果");
        }, 1000);
      }),
    ])
      .then((res) => {
        console.log(res[0]); //A的结果
        console.log(res[1]); //B的结果
        //根据A和B的结果请求C接口数据
        setTimeout(() => {
          console.log("C的请求结果");
        }, 100);
      })
      .catch((err) => {
        console.log(err);
      });

Promise中的race函数

Promise.race方法返回一个promise,一旦迭代器中的某个promise完成,返回的promise就会被完成。简单来说就是它接收的promise实例中谁快就用谁的结果,不管你的结果是resove的还是reject

    Promise.race([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("结果1");
        }, 1000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("结果2");
        }, 500);
      }),
      new Promise((resolve, reject) => {
        //请求B接口,这里用setTimeout模拟请求
        setTimeout(() => {
          reject("结果3");
        }, 100);
      }),
    ])
      .then((res) => {
        //不会触发
        console.log(res);
      })
      .catch((err) => {
        console.log(err); //结果3
      });

上面示例很显然第三个Promise示例最先返回结果,所以Promise.race便使用了第三个Promise的结果

Promise中的any函数

Promise.any函数它也接收一个Promise实例的可迭代对象,只要其中的一个promise实例成功,就返回那个已经成功的promise,只有所有的promise实例都失败才会返回失败的(reject)的数组

    Promise.any([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("结果1");
        }, 1000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("结果2");
        }, 500);
      }),
      new Promise((resolve, reject) => {
        //请求B接口,这里用setTimeout模拟请求
        setTimeout(() => {
          reject("结果3");
        }, 100);
      }),
    ])
      .then((res) => {
        //不会触发
        console.log(res);
      })
      .catch((err) => {
        console.log(err); //AggregateError: All promises were rejected
      });

这个函数适用的场景可能不是很多,在这里我大概想到的一个场景就是:有三个接口A,B,C,这三个接口很不稳定但是它们返回的成功结果都一样,所以我们需要对这三个接口进行同时请求,只要它们其中有一个接口返回成功,那么我们便用这个接口的值。所以这三个接口只要有一个可用我们便可拿到想要的结果

async和await

async和await其实就是promise的语法糖形式,它可以让我们的异步代码包装成同步的形式理解。await顾名思义就是等待的意思,它必须使用在一个async的函数中,await后面跟的是一个实例化Promise,它返回的值则是这个Promise成功返回的 resolve 状态值。其实它的用法很简单,如下

      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("结果");
        }, 1000);
      });
    };

    const getData = async () => {
      const res = await promiseFun();
      console.log(res);//结果
    };
    getData();

如果我们把文章开头的axios请求例子改为async,await的形式它将会是这个样子

    const getAxiosData = async () => {
      try {
        const res1 = await axios.get(url1, {});
        const res2 = await axios.get(url2, { query: res1.xxx });
        const res3 = await axios.get(url2, { query: res2.xxx });
        console.log(res3);
      } catch (err) {
        console.log(err);
      }
    };
    getAxiosData();

此时的代码逻辑看起来就会清晰很多。


链接: https://fly63.com/article/detial/12013

你真的了解 Promise 吗?Promise 必知必会(十道题)

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类

本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。

Promise 原理解析与实现(遵循Promise/A+规范)

Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数

简单模仿实现 Promise 的异步模式

这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。

数组的遍历你都会用了,那Promise版本的呢

在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,

Promise使用时应注意的问题

最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因

es6 Promise 的基础用法

想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行

关于 Promise 的 9 个提示

你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve

手写一款符合Promise/A+规范的Promise

Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!