如何在獲取承諾中的錯誤時捕獲網絡錯誤

Question

所以我有這個Picker組件，並且對於這些項目，我從服務器獲取數據並在狀態發生更改時將其映射。

//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> 
     ) 
    } 
} 

這工作正常。我得到物品清單，當我點擊Picker時，我可以選擇物品。我想要做的是，如果在獲取數據時發生任何錯誤（例如，服務器已關閉），我希望得到該錯誤並將其顯示爲錯誤（這隻會改變error和displayError的狀態）。但是我不知道如果有錯誤將其設置爲錯誤狀態，如何獲取錯誤。

Answer 1

不要捕捉api中的錯誤。在想要使用異步操作結果的位置執行此操作。事情是這樣的......

//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}); 
      }); 
    }