React网络请求
/* 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;
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;
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;
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2020-03-14 17:51 LoaderMan 阅读(2678) 评论(0) 编辑 收藏 举报