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仔细看打印的内容~