React网络请求

郑长生 發表於 2020-3-14 17:51:00

<div class="cnblogs_code">
<pre>/*
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 />

 

 <FetchJsonp />

 </div>
 );
}
}

export default Home;
</pre>
</div>
<div class="cnblogs_code">
<pre>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;</pre>
</div>
<div class="cnblogs_code">
<pre>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;</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！ 
来源：https://www.cnblogs.com/loaderman/p/11556037.html

頁: [1]

琼殿技术论坛's Archiver

React网络请求