Reactjs之Axios、fetch-jsonp获取后台数据

/**
Axios获取服务器数据(无法跨域，只能让后台跨域获取数据)
react获取服务器APi接口的数据：
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
axios介绍: https://github.com/axios/axios axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域）
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); 2、fetch-jsonp https://github.com/camsong/fetch-jsonp
fetch-jsonp请求:返回url会带回一个callback=
1、安装 npm install fetch-jsonp --save
2、import fetchJsonp from 'fetch-jsonp'
3、看文档使用
fetchJsonp('/users.jsonp')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
4、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以... 远程测试API接口：
get请求：
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20
jsonp请求地址:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
*/

class Home12 extends React.Component{
constructor(props){
console.log("组件加载，首先加载构造方法---1")
super(props);
this.state={
msg:"HOME12 组件信息",
list:[],
listjson:[]
}
}
componentWillMount() {
console.log("构造函数加载完成后，会加载componentWillMount(组件将要挂载)----2")
}
getData=()=>{
//通过axios获取数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
alert("获取数据");
axios.get(api).then((response)=> {
console.log(response.data.result); //接口返回数据
this.setState({
//用到this,要用到this取向
list:response.data.result
})
}).catch(function (error) {
console.log(error);//捕获异常数据
})
}
getfetchjsonpData=()=>{
//通过fetchjsonp获取数据
var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchJsonp(api)
.then(function(response) {
return response.json()//返回的json数据
}).then((json) =>{
//console.log('parsed json', json)
this.setState({
listjson:json.result
})
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
render() {
console.log("数据将要渲染---3")
return(
<div>
<h2>HOME12组件首页</h2>
<h1>axios获取数据</h1>
<button onClick={this.getData}>获取服务器api接口数据</button>
<hr/>
<ul>
{
this.state.list.map( (value,key) =>{
return(<li key={key}>{value.title}</li>)
})
}
</ul>
<hr/>
<h1>fetch-jsonp获取数据</h1>
<button onClick={this.getfetchjsonpData}>获取服务器api接口数据</button>
<hr/>
<ul>
{
this.state.listjson.map( (value,key) =>{
return(<li key={key}>{value.title}</li>)
})
}
</ul>
</div>
)
}
//生命的周期函数---组件加载完成
componentDidMount() {
console.log("组件加载完成---4")
this.getData();
}
}