啥也不说了直接记录代码吧
fetch('https://facebook.github.io/react-native/movies.json',{
method:'GET',//如果为GET方式,则不要添加body,否则会出错 GET/POST
header:{//请求头
},
// body:{//请求参数
// 'key1':'value1',
// 'key2':'value2'
// }
})
.then((response) => response.json())//将数据转成json,也可以转成 response.text、response.html
.then((responseJson) => {//获取转化后的数据responseJson、responseText、responseHtml
/*return responseJson.movies; */
console.log(responseJson);
}).catch((error) => {
console.log(error);
});
所有的代码就这么多,比起iOS来少的不是一星半点啊,超级简单
当然啦,喜欢封装的自然少不了封装一下下,下面也仅仅是简单简单简单的封装了一小下而已
注释的也是很6的
FetchRequest
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class FetchRequest extends Component {
//定义接收请求地址,当然也可以添加请求参数
//parames 尽量是{'key1':'value1','key2':'value2'}
//static request(url,parames,callBackSuccess,callBackError){
static request(url,loadCallBack,callBackSuccess,callBackError){
//请求发送中回调,可以加一些loading效果
loadCallBack();
fetch(url,{
method:'GET',//如果为GET方式,则不要添加body,否则会出错 GET/POST
header:{//请求头
},
// body:parames//请求参数
})
.then((response) => response.json())//将数据转成json,也可以转成 response.text、response.html
.then((responseJson) => {//获取转化后的数据responseJson、responseText、responseHtml
/*return responseJson.movies; */
//成功回调
callBackSuccess(JSON.stringify(responseJson));//JSON.stringify()避免出现烦人的[object object]
}).catch((error) => {
//失败回调
callBackError(error);
});
}
}
使用就更简单了
import Request from './FetchRequest'
request(){
//调用封装起来的方法
Request.request('https://facebook.github.io/react-native/movies.json',
()=>{
console.log('请求发送中...')
},
(responseData)=>{
this.requestSuccess(responseData);
},
(error)=>{
this.requestError(error);
})
}
网友评论