Catch React Native fetch ошибка без остановки приложения с красным экраном

Я создаю собственную функцию React, которая тянет 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;
       });
    }
8
react-native

3 ответов

вот как я решил это, делая изящные ошибки, которые не сбой приложения с помощью обещаний:

в моем классе обслуживания 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}`);
      });
4

вы можете использовать компонент оповещения из react-native.

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) {
       Alert.alert(error);   // Using this line
   });
}

но я предпочитаю использовать тост, как на Android, чем alert.

0