Comment attraper l'erreur réseau lors de l'extraction de l'erreur en promettant

Question

J'ai donc ce composant Picker, et pour les articles, je récupère les données du serveur et le mappage lorsque l'état est changé.

//api.js 
var api = { 
    getBooks() { 
     var url = 'http://192.168.43.14:8080/api/books/' 
     var headers = new Headers(); 
     headers.append('Accept', 'application/json'); 
     return fetch(url, headers) 
      .then((res) => res.json()) 
      .catch(function(err) { 
       console.log('Fetch Error :-S', err); 
       throw Error(err); 
      }); 
    } 
} 

//RegisterMobile.js 
import api from '../utilities/api' 

export default class RegisterMobile extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      books: [], 
      book: '', 
      mobile: '', 
      displayError: false, 
      error: 'Please provide a valid mobile number' 
     } 
    } 

    componentWillMount() { 
     api.getBooks().then((res) => { 
      this.setState({ 
       books: res 
      }) 
     }) 
    } 

    render() { 
     return(
      <View> 
       <View style={styles.selecBook}> 
        <Picker selectedValue={this.state.book} onValueChange={this.changeBook}> 
         {this.state.books.map((book) => {return <Picker.Item value={book.name} label={book.name} key={book.id} />})} 
        </Picker> 
       </View> 
       {this.state.displayError ? <Text style={styles.error}>{this.state.error}</Text> : null} 
      </View> 
     ) 
    } 
} 

Cela fonctionne très bien. Je reçois la liste des articles et quand je clique sur le sélecteur, je peux sélectionner les articles. Ce que je veux faire est, s'il y avait une erreur tout en récupérant les données (par exemple, le serveur est en panne), je voudrais obtenir cette erreur et l'afficher comme erreur (qui serait juste de changer l'état de error et displayError). Mais je ne sais pas comment obtenir l'erreur s'il y en avait une pour la mettre dans l'état de l'erreur.

Answer 1

Ne pas intercepter l'erreur dans l'API. Faites-le où vous voulez utiliser le résultat de l'opération asynchrone. Quelque chose comme ça ...

//api.js 
var api = { 
    getBooks() { 
     var url = 'http://192.168.43.14:8080/api/books/' 
     var headers = new Headers(); 
     headers.append('Accept', 'application/json'); 
     return fetch(url, headers) 
      .then((res) => res.json()); 

    } 
} 

//RegisterMobile.js 
import api from '../utilities/api' 

export default class RegisterMobile extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      books: [], 
      book: '', 
      mobile: '', 
      displayError: false, 
      error: 'Please provide a valid mobile number' 
     } 
    } 

    componentWillMount() { 
     api.getBooks() 
      .then((res) => { this.setState({books: res}) }) 
      .catch(function(err) { 
       console.log('Fetch Error :-S', err); 
       this.setState({books: [], book: null, displayError: true, error:err}); 
      }); 
    }