在ReactNative
使用Fetch
,不需要安装,是一个全局的,直接使用即可
1、使用get请求获取数据
<View style={styles.container}>
<Text style={{fontSize:20}} onPress={()=>this.onLoad('http://rap.taobao.org/mockjsdata/11793/test')}>获取数据</Text>
<Text>得到的数据:{this.state.result}</Text>
</View>
当点击获取数据
的时候请求网络地址,调用onLoad
方法,代码如下:
onLoad(url){
fetch(url)
.then(response=>response.json())
.then(result=>{
this.setState({
result:JSON.stringify(result)
})
})
.catch(error=>{//捕获异常
this.setState({
result:JSON.stringify(error)
})
})
}
在这之前要先初始化result
为一个空字符串
constructor(props) {
super(props);
this.state = {result:''}
}
运行截图:
2、使用POST提交数据,模拟登陆
<View style={styles.container}>
<Text style={{fontSize:20}} onPress={()=>this.onSubmit('http://rap.taobao.org/mockjsdata/11793/submit',{userName:"小明",password:"123456"})}>提交数据,模拟登陆</Text>
<Text>返回结果:{this.state.result}</Text>
</View>
点击提交数据,模拟登陆
之后调用onSubmit
方法:
onSubmit(url,data){
fetch(url,{
method:'POST',
header:{
'Accept':"application/json",
'Content-Type':"application/json"
},
body:JSON.stringify(data)
})
.then(response=>response.json())
.then(result=>{
this.setState({
result:JSON.stringify(result)
})
})
.catch(error=>{
this.setState({
result:JSON.stringify(error)
})
})
}
1、使用Post
提交的时候,fetch
需要传递三个参数,第一个参数method
,第二个参数header
,第三个参数body
(即传递的数据)
2、onSubmit
方法传递两个参数,一个url
,一个是要传递的数据data
,运行截图:
3、对Fetch的一个封装
- 新建一个
HttpUtil.js
类
/**
* Created by Dell on 2018/3/7.
*/
export default class HttpUtil{
static get(url){
return new Promise((resolve,reject)=>{
fetch(url)
.then(response=>response.json())
.then(result=>{
resolve(result)
})
.catch(error=>{
reject(error)
})
})
}
static post(url,data){
return new Promise((resolve,reject)=>{
fetch(url,{
method:'POST',
header:{
'Accept':"application/json",
'Content-Type':"application/json"
},
body:JSON.stringify(data)
})
.then(response=>response.json())
.then(result=>{
resolve(result)
})
.catch(error=>{
reject(error)
})
})
}
}
- 使用的时候直接导入该类
import HttpUtil from './HttpUtil'
调用get方法
onLoad(url) {
HttpUtil.get(url)
.then(result => {
this.setState({
result: JSON.stringify(result)
})
})
.catch(error => {
this.setState({
result: JSON.stringify(error)
})
})
}
调用post方法
onSubmit(url, data) {
HttpUtil.post(url,data)
.then(result => {
this.setState({
result: JSON.stringify(result)
})
})
.catch(error => {
this.setState({
result: JSON.stringify(error)
})
})
}
相比之下,在封装fetch
工具类之后,代码减少了很多,这样代码维护起来也很方便