目前主要有两种方式：axios、fetch-jsonp
一、axios的使用
1.1安装
1.1.1使用NPM安装
npm install axios --save
1.1.2使用Yarn安装
$ yarn add axios
1.2引用
在哪里使用，在哪里引用
import Axios from 'axios'
1.3Axios示例
/**
* 获取服务器数据
*/
getData=()=>{
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
//.then(function (response) {
.then((response)=> {
console.log(response.data.result);
this.setState({
list:response.data.result
})
})
.catch(function (error) {
console.log(error);
});
//alert("获取服务器数据");
}
1.4DEMO示例
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
//定义组件
class Axios extends React.Component{
constructor(props){
super(props);
this.state={
list:[]
}
}
/**
* 获取服务器数据
*/
getData=()=>{
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
//.then(function (response) {
.then((response)=> {
console.log(response.data.result);
this.setState({
list:response.data.result
})
})
.catch(function (error) {
console.log(error);
});
//alert("获取服务器数据");
}
render() {
return (
<div>
<h2>axiox获取服务器数据</h2>
<button onClick={this.getData}>获取</button>
<hr/>
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}
export default Axios;//导出组件
1.5官网地址
https://www.npmjs.com/package/axios
二、fetch-jsonp的使用
2.1安装
npm install fetch-jsonp
2.2引用
import fetchJsonp from 'fetch-jsonp'
2.3fetch-jsonp示例
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)
})
}
2.4完整DEMO示例
import React from 'react';
import fetchJsonp from 'fetch-jsonp'
//定义组件
class Fecthjsonp extends React.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>你好
<h2></h2>
<button onClick={this.getData}>获取数据</button>
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}
export default Fecthjsonp;//导出组件
