react--axios请求数据

axios是独立的ajax插件，不依赖于react，在VUE中甚至原生JS开发的项目中也可以用，现在已经是前端主流的ajax插件。

首先安装axios    npm install axios --save

axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

以上是get和post请求的例子，区别是参数格式不一样，接下来我们在项目中请求下模拟数据

新增public/mock.json, pages/AxiosTest.js

public/mock.json内容

{ "code": 200, "data": [ {"id": "1", "name": "张三", "grade": "大二"}, {"id": "2", "name": "李四", "grade": "大三"}, {"id": "3", "name": "王五", "grade": "大一"}, {"id": "4", "name": "赵六", "grade": "大二"} ] }

pages/AxiosTest.js内容

import React from 'react'; import Axios from 'axios'; export default class AxiosTest extends React.Component { constructor(props){ super(props); this.state = { data: [] } } componentWillMount(){ Axios.get('http://localhost:3000/mock.json', {}) .then(res => { if(res.data.code === 200){ this.setState({data: res.data.data}) } }) } render(){ return( <div> {this.state.data ?
                    this.state.data.map(el => { return (<p key={el.id}>{el.name} => {el.grade}</p>)
 }) : null} </div>
 ) } }

在路由配置中引入/AxiosTest.js

import React from 'react'; import {Switch, Route} from "react-router-dom"; import asyncComponent from '../lazy'; import Home2 from '../pages/Home2'; import OnePage from '../pages/OnePage'; import TwoPage from '../pages/TwoPage'; import This from '../pages/This'; import Mount from '../pages/Mount'; import HooksTest1 from '../hooks/test1'; import AxiosTest from '../pages/AxiosTest'; //import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState')); const Routers = ( <Switch>
        <Route path="/" exact component={Home2} />
        <Route path="/onePage" component={OnePage} />
        <Route path="/twoPage/:id" component={TwoPage} />
        <Route path="/this" component={This} />
        <Route path="/mount"  component={Mount} />
        <Route path="/hooksTest1" component={HooksTest1} />
        <Route path="/axiosTest" component={AxiosTest} />
        <Route path="/hooksUseState" component={HooksUseState} />
    </Switch>
); export default Routers

 

启动项目之后打开浏览器http://localhost:3000/#/axiosTest

很简单吧，需要注意的是react默认路径是public文件夹，所以要把mock.json放在这里，geturl不需要public文件路径 http://localhost:3000/mock.json

OK~  axios在项目中使用次数是相当高的，所以大部分开发人员会封装下在实际应用中引入封装好的axios配置就可以啦

新增axios/index.js

axios/index.js内容

/** * * ajax全局配置 * */ import axios from 'axios'; // axios 配置
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.get['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.delete['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.put['Content-Type'] = 'application/json'; //配置请求头

// 当实例创建时设置默认配置
axios.defaults.baseURL = 'http://localhost:3000'; //http request 拦截器
axios.interceptors.request.use((config) => { // config.setHeaders([
    // // 在这里设置请求头与携带token信息
    // ]);
    return config }, (error) => { return Promise.reject(error); }); //http response 拦截器:返回状态判断（添加响应拦截器）
axios.interceptors.response.use( response => { if (response.data.code === 40008) { // 40008 说明 token 验证失败
            // 可以直接跳转到登录页面，重新登录获取 token
            window.location.reload();//刷新页面，如果该页面需要登录，则会自动跳转到登录页面
            return { code:12000, message:"登录过时,退出请重新登录" }; } return response.data; }, error => { return Promise.reject(error.response) // 返回接口返回的错误信息
 } ); export default axios;

修改AxiosTest.js

import React from 'react'; import axios from '../axios'; export default class AxiosTest extends React.Component { constructor(props){ super(props); this.state = { data: [] } } componentWillMount(){ axios.get('/mock.json', {}) .then(res => { if(res.code === 200){ this.setState({data: res.data}) } }) } render(){ return( <div> {this.state.data ?
                    this.state.data.map(el => { return (<p key={el.id}>{el.name} => {el.grade}</p>)
 }) : null} </div>
 ) } }

注意 封装的axios返回的是response.data 所以组件里调用res内部少了一层data，一定要注意，如果没成功页面也没提示请打断点或console仔细看打印的内容~