React Native 基础之网络请求

React Native 提供了和 web 标准一致的​​Fetch API​​，用于满足开发者访问网络的需求。

Fetch 语法

使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，然后根据具体的实际情况处理。

fetch("http://baidu.com")
.then(function(response){
// ...
})

说明:
在请求后的 Response 中，常常有如下返回情况：

• Response.status 也就是 StatusCode，如成功就是 200 ；
• Response.statusText 是 StatusCode 的描述文本，如成功就是 OK ；
• Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为 200-299 。

Fetch 请求方式

1. get方式

fetch('http://nero-zou.com/test', {
method: 'GET'
}).then(function(response) {
//获取数据,数据处理
}).catch(function(err) {
//错误处理
});

2. post方式

let param = {user:'xxx',phone:'xxxxxx'};
fetch(url, {
method: 'post',
body: JSON.stringify(param)
}).then(function(response) {
//获取数据,数据处理
});

对Fetch进行封装

（1）这里我们对 Fetch 进行一个封装，实现一个支持 POST 请求的简单 API。

//带参数的POST请求
function postRequest(url, data, callback) {
var opts = {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: JSON.stringify(data)
}

fetch(url, opts)
.then((resonse) => resonse.text())
.then((responseText) => {
//将返回的JSON字符串转成JSON对象，并传递到回调方法中
callback(JSON.parse(responseText));
});
}

（2）使用样例

var data = {id:123, name:'hangge.com'};
postRequest('https://httpbin.org/post', data, function(result){
alert("请求成功！");
console.log(result);
})

实例

1.逻辑代码

import React, {Component} from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';

var REQUEST_URL =
"https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
movies: null,
};
this.fetchData = this.fetchData.bind(this);
}

componentDidMount() {
this.fetchData();
}

fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
movies: responseData.movies,
});
});
}

render() {
if(!this.state.movies) {
return this.renderLoadingView();
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
}

renderLoadingView() {
return (
<View style = {styles.container}>
<Text>loading...</Text>
</View>
);
}

renderMovie(movie) {
return(
<View style = {styles.container}>
<Image
style = {styles.thumbnail}
source = {{uri: movie.posters.thumbnail}}
/>

<View style = {styles.rightContainer}>
<Text style = {styles.title}>{movie.title}</Text>
<Text style = {styles.year}>{movie.year}</Text>
</View>

</View>
);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 100,
height: 80
},
rightContainer: {
flex: 1
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center'
},
year: {
textAlign:'center'
}
});

2. 效果图