捕获React Native fetch错误而不用红色屏幕停止应用程序

Question

我正在制作一个React Native函数来拉取网页的HTML.如果URL存在并且我收到200状态代码,它可以正常工作.但是,当我在其中放入一个错误的URL(会收到404错误的内容)时,会显示一个红色屏幕,显示"网络请求失败".我想在没有整个应用暂停的情况下捕获错误并向用户显示警告.我怎么能这样做呢？

    fetchEvents() {
       fetch('http://www.wrongurl.com', {
         method: 'GET',
         redirect: 'follow'
       })
       .then(function(response) {
           if (response.status == 200) {
               let responseText = JSON.stringify(response.text());
               console.log(responseText);
           }
         else throw new Error('HTTP response status not code 200 as expected.');
       })
        .catch(function(error) {
           console.error(error);
           return error;
       });
    }

Answer 1

这就是我解决这个问题的方法,使得使用promises不会使应用程序崩溃的优雅错误:

在我的API服务类中:

  fetchEvents() {
    let thisCurrentAPIService = this;

    return new Promise(
      function (resolve, reject) {
        fetch('http://www.wrongurl.com');
        .then(
          function(response) {
            if (response.ok) {    
              let responseText = JSON.stringify(response.text());
              console.log(responseText);
            }
            else {
              reject(new Error(`Unable to retrieve events.\nInvalid response received - (${response.status}).`));
            }
          }
        )
        .catch(
          function(error) {
            reject(new Error(`Unable to retrieve events.\n${error.message}`));
          }
        );
      }
    ); 
  }

然后我从我的React组件中调用它.如果收到错误,我会在那里创建警报.

      this.state.apiService.fetchEvents()
      .then(
      function (value) {
        console.log('Contents: ' + value);
      },
      function (reason) {
        Alert.alert(`${reason.message}`);
      });

Answer 2

搞笑，快三年了，仍然没有正确的答案。然而， console.error(error) 这才是真正导致应用程序抛出红屏的原因。