在react中,没有提供专门的请求数据的模块,所以我们可以采用第三方请求数据的模块进行数据请求,常见的有axios和fetch-jsonp,下面来总结这两种方式的用法。
axios
查看文档
创建项目
1,使用npx create-react-app react-router创建项目,
2,在src文件夹下新建components文件夹和assets文件夹,在assets文件夹中新建css文件夹和images文件夹,并将src文件夹下的相关文件进行归类。
安装和使用
1,在项目的根目录中执行命令:npm install axios --save进行安装
2,在components文件夹下面新建Axios.js组件,并在App.js中引入该组件。
3,在需要进行数据请求的页面引入axios,所以在Axios.js文件下面通过import引入axios。
4,通过生命周期函数或者相关事件触发数据请求。
5,渲染数据
下面贴出相关代码:axios.js
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) // 箭头函数改变this指向 .then((res)=> { this.setState({ list:res.data.result }) }) .catch(function (error) { console.log(error); }); } render() { return ( <div> <button onClick={this.getData}>获取服务器api接口数据</button> <br /> <br /> <ul> { this.state.list.map((value,key)=>{ return <li key={key}>{value.title}</li> }) } </ul> </div> ); } } export default Axios;
fetch-jsonp
查看文档
创建项目
还是上面的项目,继续在components文件夹下面新建fetchJsonp.js文件,并在根组件App.js中引入。
安装和使用
1,在项目根目录执行命令:npm install fetch-jsonp --save进行安装
2,在FetchJsonp.js中引入
3,通过生命周期函数或者相关事件触发数据请求。
4,渲染数据
下面贴出fetchJsonp.js的代码
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)=> { this.setState({ list:json.result }) }).catch(function(ex) { console.log('parsing failed', ex) }) } render() { return ( <div> 这是fetch-jsonp组件 <br /> <button onClick={this.getData}>获取服务器api接口数据</button> <ul> { this.state.list.map((value,key)=>{ return <li key={key}>{value.title}</li> }) } </ul> </div> ); } } export default FetchJsonp;
代码下载:点这里