十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

react获取服务器APi接口的数据:

react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

一、axios 获取Api数据

使用文档:https://www.npmjs.com/package/axios
git项目地址:https://github.com/axios/axios
axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)

1npm官网:https://www.npmjs.com,在其搜索:axios即可看到详细说明。接下来cmd运行: 2 31、安装axios模块 npm install axios --save / cnpm install axios --save 4(--save必加,表示把模块写入配置文件,否则别人无法运行;建议用cnpm 前者容易失败) 5 62、在哪里使用就在哪里引入 import axios from 'axios' 7 83、看文档使用 9 10

【调用api关键代码】:

1var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20'; 2axios.get(api) 3.then(function (response) { 4 console.log(response); 5}) 6.catch(function (error) { 7 console.log(error); 8}); 9 10

【axios完整示例】:

  1. 首先,在[ src/components/ ]目录下建两个文件:[home.js]、[axios.js];
  2. api示例地址:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20

//【 Api接口要在服务器上提前设置允许跨域,否则请求不到数据】
在这里插入图片描述

  1. 实现:从指定的Api接口获取数据展示出来

【home.js】

1import React,{Component} from 'react'; 2import Axios from './axios.js'; 3 4class Home extends Component{ 5 constructor(props){ 6 super(props); 7 8 this.state={ 9 title:'首页模块' 10 } 11 } 12 13 render(){ 14 return( 15 <div> 16 <h1 >从服务器Api接口获取数据示例</h1> 17 18 <Axios /> 19 </div> 20 ) 21 } 22} 23export default Home; 24 25

【axios.js】

1import React, { Component } from 'react'; 2import axios from 'axios'; //【1】获取axios模块(从服务器获取数据模块) 3 4class Axios extends Component { 5 constructor(props){ 6 super(props); 7 8 this.state={ 9 list:[] 10 } 11 } 12 13 //【2】获取Api数据函数 14 getApi=()=>{ 15 // Api接口要在服务器上提前设置允许跨域 16 let api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20'; 17 18 axios.get(api) //获取Api主函数 19 .then((response)=>{ //获取到则执行:(其下要用到this,所以要用箭头函数) 20 console.log(response); 21 //把获取到的数据设置到state的list里 22 this.setState({ 23 list:response.data.result 24 }) 25 }) 26 .catch((error)=>{//获取失败则执行 (其下要用this,所以用箭头函数) 27 console.log(error); 28 }); 29 } 30 31 render() { 32 //【3】视图部分:展示api数据 33 return ( 34 <div> 35 <button onClick={this.getApi}>获取服务器Api数据</button> 36 <br/><hr/> 37 <ul> 38 {this.state.list.map((value,key)=>{ 39 return <li key={key}>{value.title}</li> 40 }) 41 } 42 </ul> 43 </div> 44 ); 45 } 46 } 47 export default Axios; 48 49

【效果】:
在这里插入图片描述

二、fetch-jsonp 获取json数据

详细使用文档:https://www.npmjs.com/package/fetch-jsonp
git项目地址:https://github.com/camsong/fetch-jsonp

11、安装 npm install fetch-jsonp --save / cnpm install fetch-jsonp --save 22、import fetchJsonp from 'fetch-jsonp' 33、看文档使用 44、与axios区别,它可以读取jsonp数据,此数据支付跨域,不需要在服务器设置 5 6
1fetchJsonp('/users.jsonp') 2.then(function(response) { 3 return response.json() 4}).then(function(json) { 5 console.log('parsed json', json) 6}).catch(function(ex) { 7 console.log('parsing failed', ex) 8}) 9 10

fetch-jsonp项目实例

1、接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=myjsonp
2、接口首先要支持jsonp,测试方法在最后加 &callback=myjsonp,返回结果会变成如下:
在这里插入图片描述
3、和第一种明显区别就是请求地址多了个&callback=xxx
4、在[ src/components/ ]目录下建两个文件:[home.js]、[fetchjson.js];
【home.js】

1import React,{Component} from 'react'; 2import Fetchjson from './fetjson'; 3 4class Home extends Component{ 5 constructor(props){ 6 super(props); 7 8 this.state={ 9 title:'首页模块' 10 } 11 } 12 13 render(){ 14 return( 15 <div> 16 <h1 >从服务器jsonp接口获取数据示例</h1> 17 <Fetchjson /> 18 </div> 19 ) 20 } 21} 22export default Home; 23 24

【fetchjson.js】

1import React, { Component } from 'react'; 2import fetchJsonp from 'fetch-jsonp'; //【1】获取jsonp模块(从服务器获取数据模块) 3 4class Fetchjson extends Component { 5 constructor(props){ 6 super(props); 7 8 this.state={ 9 list:[] 10 } 11 } 12 13 //【2】获取jsonp数据函数 14 //api接口最后要有&callback=xxx。有些服务器会自动加,如不自动加就要手动在地址加上 15 getJsonp=()=>{ 16 //获取数据 17 var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20"; 18 fetchJsonp(api) 19 .then(function(response) {//先转化成json格式;固定写法 20 return response.json() 21 }).then((json)=> { //此处要用到this.所以加箭头函数; 22 console.log(json); 23 this.setState({ 24 list:json.result 25 }) 26 }).catch(function(ex) {// 获取失败报错 27 console.log('未成成功获取', ex) 28 }) 29 } 30 31 render() { 32 //【3】视图部分:展示数据 33 return ( 34 <div> 35 <button onClick={this.getJsonp}>获取服务器Jsonp数据</button> 36 <br/><hr/> 37 <ul> 38 {this.state.list.map((value,key)=>{ 39 return <li key={key}>{value.title}</li> 40 }) 41 } 42 </ul> 43 </div> 44 ); 45 } 46 } 47 export default Fetchjson; 48 49

【效果】:
在这里插入图片描述
【请求数据效果】可以看到虽然我们没加callback但服务器自己帮我们加上了:
在这里插入图片描述

三、其他请求数据的方法也可以…

  • 自己封装模块用原生js实现数据请求. 也可以…

远程测试API接口:

get请求:

1http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20 2 3

jsonp请求地址:

1http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=? 2 3

代码交流 2021