React学习12----请求接口数据
react获取服务器APi接口的数据:
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
我们使用 axios 插件,来请求接口数据
使用如下:
查看文档: axios https://www.npmjs.com/package/axios
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from ‘axios’
3、看文档使用
4、测试接口:
var api=‘http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20’;
axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域),就是说:
axios不能完成jsonp的跨域请求,需要在接口端设置为允许跨域
这里演示了,get请求,post在文档中自己看
具体例子如下:项目结构:
Axios.js中 请求接口数据:
import React from 'react';
import axios from 'axios';
/**
react获取服务器APi接口的数据:
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
1、axios https://www.npmjs.com/package/axios
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
4、测试接口:
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域),就是说:
axios不能完成jsonp的跨域请求,需要在接口端设置为允许跨域
这里演示了,get请求,post在文档中自己看
*/
class Axios extends React.Component{
constructor(props){
super(props);
//定义数据
this.state = {
title:'Axios',
list:[],
}
}
getData=()=>{
let url ='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(url)
.then((response)=> {
//请求成功
console.log(response);
// 把请求到的数据,赋值给构造函数的数据
this.setState({
list:response.data.result,
})
})
.catch(function (error) {
//请求失败
console.log(error);
});
}
//渲染数据
render() {
return (
<div>
{this.state.title}
<br/><br/>
<button onClick={this.getData}>拿到接口数据</button>
{/* 把请求到的数据循环显示 */}
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}//class
// 暴露出去,供外部调用
export default Axios;
axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域),就是说:
axios不能完成jsonp的跨域请求,需要在接口端设置为允许跨域
fetch-jsonp 插件,能完成跨域请求:
具体使用如下:
查看文档: fetch-jsonp https://www.npmjs.com/package/fetch-jsonp
1、安装:npm install fetch-jsonp --save
2、引入:import fetchJsonp from ‘fetch-jsonp’
3、看文档使用
4、测试接口:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
jsonp请求会在后面拼接一个 callback
5、其他请求数据的方法也可以…自己封装模块用原生js实现数据请求也可以…
FetchJsonp.js 中使用:
import React from 'react';
import fetchJsonp from 'fetch-jsonp';
/**
*
fetch-jsonp https://www.npmjs.com/package/fetch-jsonp
1、安装:npm install fetch-jsonp --save
2、引入:import fetchJsonp from 'fetch-jsonp'
3、看文档使用
4、测试接口:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
jsonp请求会在后面拼接一个 callback
5、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...
*/
class FetchJsonp extends React.Component{
constructor(props){
super(props);
//定义数据
this.state = {
title:'FetchJsonp',
list:[],
}
}
getData=()=>{
// 请求数据:
var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchJsonp(url)
.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>
{this.state.title}
<br/><br/>
<button onClick={this.getData}>拿到接口数据</button>
<br/><br/>
{/* 把请求到的数据循环显示 */}
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
)
}
}//class
// 暴露出去,供外部调用
export default FetchJsonp;
ok,完了
源码下载:
https://download.csdn.net/download/zhaihaohao1/10980372
rdemo12