当前位置：首页 > article >正文

处理被拒绝的promise

article 2024/12/27 7:01:37

处理被拒绝的promise

至少到目前为止，我们所有的promise都能正常获取到值，现在就来看一下如果处理被拒绝的promise；

客户端网络异常

当我们客户端网络异常的时候，去请求服务端的话，是没有任何的错误提示的；

第一种方法就是使用按钮的方式

btn.addEventListener('click', function () {
  getCountryData('Russia');
});

当我们客户端离线的时候，我们就能收到一个promise获取失败的错误信息；

在这里插入图片描述

通过fetch捕获错误

我们可以通过then来捕获错误，让客户端突然离线的话通过alter的方式进行提示

fetch(`https://restcountries.com/v2/name/${country}`)
    .then(
      response => response.json(),
      err => alert(err)
    )

在这里插入图片描述

通过catch进行捕获

那么如果现在第一个请求成功了，在请求邻国信息的时候突然网络中断了，再邻国的地方添加捕获错误信息不太合适了，这时候可以通过catch的方法来对整个调用链条进行进行捕获；

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];
      if (!neighbour) return;
      return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
    .then(response => response.json())
    .then(data => renderCountry(data, 'neighbour'))
    .catch(err => alert(err));
};

在这里插入图片描述

但是在实际生活的网站中，这种弹窗肯定是不合适的，我们不仅需要在控制台中打印错误供排查人员使用，也需要提供一些错误信息给用户进行尝试；先写一个错误信息的函数功能；

const renderError = function (msg) {
  countriesContainer.insertAdjacentText('beforeend', msg);
  countriesContainer.style.opacity = 1;
};

然后再catch进行调用

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];
      if (!neighbour) return;
      return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
    .then(response => response.json())
    .then(data => renderCountry(data, 'neighbour'))
    .catch(err => {
      console.error(`${err} ⚠⚠⚠ `);
      renderError(`出现了一些意外！⚠⚠ ${err.message}. 请再次尝试！`);
    });
};

在这里插入图片描述

这里再介绍一下finally方法，这个方法无论在promise正确或者错误的情况都会被调用，所以前面对于透明度的设置可以删除，可以添加到finally方法中，因为不管是错误还是正确，透明度总会被设置为1

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];
      if (!neighbour) return;
      return fetch(`https://restcountries.com/v2/alpha/${neighbour}`);
    })
    .then(response => response.json())
    .then(data => renderCountry(data, 'neighbour'))
    .catch(err => {
      console.error(`${err} ⚠⚠⚠ `);
      renderError(`出现了一些意外！⚠⚠ ${err.message}. 请再次尝试！`);
    })
    .finally(() => {
      countriesContainer.style.opacity = 1;
    });
};