2020-04-25一点前端——Promise.all和Promise.race的使用场景和用法

不谈使用场景直接说用法那是耍流氓：
Promise.all
场景：这里举一个我工作遇到的案例，需求是使用html2canvas插件（这是一个截屏js插件，异步返回截屏结果图片）将一个页面若干部分截屏生成图片，再把这些图片作为参数调用接口生成pdf。这里涉及两个点，获取的图片顺序得知道，然后得等所有图片都获取完毕了才能组装参数调用接口，Promise.all完美符合需求。

Promise.all用于多个异步结果合并到一起，且Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，注意，如果有任何一个失败，该Promise失败，返回值是第一个失败的子Promise的结果。

Promise.race
场景：把异步操作和定时器放到一起，如果定时器先触发，认为超时，告知用户。

Promise.race是哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

---

上代码：

      
      let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("成功1");
        }, 2000);
      });

      let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("成功2");
        }, 5000);
      });

      let p3 = Promise.reject("失败");
      
//Promise.all

      Promise.all([p1, p2]).then(
        (success) => {
          console.log(success);
        },
        (fail) => {
          console.log(fail);
        }
      );//结果为:[成功1，成功2]

      Promise.all([p1, p2, p3]).then(
        (success) => {
          console.log(success);
        },
        (fail) => {
          console.log(fail);
        }
      );//结果为:失败

//Promise.race
        Promise.race([p1, p2]).then((result) => {
            console.log(result);
        })
        .catch((error) => {
            console.log(error);
        });//结果为:成功1