Promise.all、Promise.race、Promise.allSettled方法使用

在平常使用promise中最常用的就是.then和.catch 今天也来补充一下其他方法的使用

调用接口公共代码

<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
  function getText(options) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: options.url,
        success: function (res) {
        // 成功使用resolve 失败使用reject
          res.code == 1 ? resolve(res.content) : reject(res.msg);
        },
      });
    });
  }

  let url = "https://api.uomg.com/api/rand.qinghua";
  const p1 = getText({ url });
  const p2 = getText({ url: url + "1" }); // 特意使接口报错
  const p3 = getText({ url: url + "2" }); // 特意使接口报错
</script> 

一、Promise.all

Promise.all()参数可以传递一个数组，数组中记录所有的 promise 异步处理

返回值是一个 Promise 的实例对象 then 方法可以获取到所有的 promise 异步处理的结果，一旦有某一个调用执行了 reject，则终止进入 catch

  Promise.all([p1, p2, p3]).then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });

因为代码中故意调用了两个错误地址 所以走入catch

二、 Promise.race

只返回第一个最快的结果 不管成功还是失败 成功就进入.then  失败就进入.catch

  Promise.race([p1, p2, p3]).then((res) => {
    console.log(res);
  }).catch((err) => {
      console.log(err);
    });

当前代码 不确定进入.then还是.catch  谁返回的快优先进入对应的代码中

三、Promise.allSettled

不管状态成功还是失败都会进入.then  并把每个状态和对应的值返回出来

  Promise.allSettled([p1, p2, p3]).then((res) => {
    console.log(res);
  });

执行结果：