Question

我正在创建一个React Native函数来拉取网页的HTML。如果URL存在并且我收到200状态代码，它可以正常工作。但是，当我在其中放入一个错误的URL（会收到404错误的内容）时，会显示一个红色屏幕，显示“＃34;网络请求失败。”＃34;我想在没有整个应用停止的情况下捕获错误并向用户显示警报。我怎么能这样做？

    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

这就是我解决这个问题的方法，使得使用承诺不会让应用程序崩溃的优美错误：

在我的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)实际上是导致应用程序显示红屏的原因。

Answer 3

console.warn（'这是我的错误'）;

如果这只是开发者可能有所帮助。它明确地使用小警告吐司来提供您需要的任何反馈。注意：这绝对不适合生产使用。

Answer 4

您可以使用react-native中的Alert组件。

0, 50, 100

但我喜欢在Android上使用Toast而不是警告。

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

4 个答案: