在react中，没有提供专门的请求数据的模块，所以我们可以采用第三方请求数据的模块进行数据请求，常见的有axios和fetch-jsonp，下面来总结这两种方式的用法。
axios
查看文档
创建项目
1，使用npx create-react-app react-router创建项目，
2，在src文件夹下新建components文件夹和assets文件夹，在assets文件夹中新建css文件夹和images文件夹，并将src文件夹下的相关文件进行归类。
安装和使用
1，在项目的根目录中执行命令：npm install axios --save进行安装
2，在components文件夹下面新建Axios.js组件，并在App.js中引入该组件。
3，在需要进行数据请求的页面引入axios，所以在Axios.js文件下面通过import引入axios。
4，通过生命周期函数或者相关事件触发数据请求。
5，渲染数据
下面贴出相关代码：axios.js
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)
// 箭头函数改变this指向
.then((res)=> {
this.setState({
list:res.data.result
})
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div>
<button onClick={this.getData}>获取服务器api接口数据</button>
<br />
<br />
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
}
export default Axios;
fetch-jsonp
查看文档
创建项目
还是上面的项目，继续在components文件夹下面新建fetchJsonp.js文件，并在根组件App.js中引入。
安装和使用
1，在项目根目录执行命令：npm install fetch-jsonp --save进行安装
2，在FetchJsonp.js中引入
3，通过生命周期函数或者相关事件触发数据请求。
4，渲染数据
下面贴出fetchJsonp.js的代码
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)=> {
this.setState({
list:json.result
})
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
render() {
return (
<div>
这是fetch-jsonp组件
<br />
<button onClick={this.getData}>获取服务器api接口数据</button>
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
}
export default FetchJsonp;
代码下载：点这里