如何在获取承诺中的错误时捕获网络错误

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