首页组件
/*
react获取服务器APi接口的数据：
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
1、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
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)
})
3、其他请求数据的方法也可以...自己封装模块用原生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=?
*/
import React, { Component } from 'react';
import '../assets/css/index.css';
import Axios from './Axios';
import FetchJsonp from './FetchJsonp'
class Home extends Component {
constructor(props){
super(props);
this.state={
title:'首页组件'
}
}
render() {
return (
<div>
<Axios />
<br />
<FetchJsonp />
</div>
);
}
}
export default Home;
axios
import React, { Component } from 'react';
import axios from 'axios';
class Axios extends Component {
constructor(props) {
super(props);
this.state = {
list:[]
};
}
getData=()=>{
//通过axios获取服务器数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20'; //接口后台允许了跨域
axios.get(api)
.then((response)=> {
console.log(response.data.result);
//用到this要注意this指向
this.setState({
list:response.data.result
})
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div>
<h2>axios获取服务器数据</h2>
<button onClick={this.getData}>获取服务器api接口数据</button>
<hr />
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
}
export default Axios;
FetchJsonp
import React, { Component } from 'react';
import fetchJsonp from 'fetch-jsonp';
class FetchJsonp extends Component {
constructor(props) {
super(props);
this.state = {
list:[]
};
}
getData=()=>{
//获取数据
var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchJsonp(api)
.then(function(response) {
return response.json()
}).then((json)=> {
// console.log(json);
this.setState({
list:json.result
})
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
render() {
return (
<div>
<h2>FetchJsonp 获取服务器jsonp接口的数据</h2>
<button onClick={this.getData}>获取服务器api接口数据</button>
<hr />
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
}
export default FetchJsonp;
