所以我有这个 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>
)
}
}
这工作正常。我得到了项目列表,当我点击选择器时,我可以选择项目。我想做的是,如果在获取数据时出现任何错误(例如服务器已关闭),我想获取该错误并将其显示为错误(这只是更改 error< 的状态
和 displayError
)。但是我不知道如果有一个将它设置在错误状态下如何得到错误。
最佳答案
不要在 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});
});
}
关于javascript - 如何在获取 promise 中的错误时捕获网络错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38929549/