封装axios请求拦截器

在现在的项目中，axios的使用是非常高的，随之而来的各种http请求状态拦截也是必然的操作，所以这里封装了一个基于axios的HTTP请求，并进行全局状态的拦截和状态的信息的返回。

首先在我们src下建立一个service文件夹，分别建立三个js文件：api.js，http.js，index.js，

　　首先将请求的路径进行处理和获取，在api.js中进行处理并暴露该方法：

const prefix = 'http://xxx:xxxx';

export default(config => {
    return Object.keys(config).reduce((copy, name) => {
        copy[name] = `${prefix}${config[name]}`;
        return copy
    }, {})
})
({
    "_login": "/api/xxx",
    "_getMenus":"/app-auth/auth/visible/menu"
})

　　然后再对我们的aiox做一个全局的拦截器，并暴露出去，这一步我们放到http.js中进行处理

import axios from 'axios'

axios.defaults.timeout = 100000;
// axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.interceptors.request.use(config => {
    // console.log(config,'config')
    return config
});


axios.interceptors.response.use(response => {
     // 这里的code根据服务端返回的结构进行获取和配置，具体获取可以打印response查看
    if (response.data.code === 10002 || response.data.code === 10004 || response.data.code === 10001 || response.data.code === 10005 || response.data.code === 0) {
        return response.data
    } else {
        // 非200请求
        throw Error(response.data.msg || '服务异常')
    }
}, error => {
    console.log(error);
    
});

export default axios

　　最后我们在index.js中进行使用：

import http from './http.js' // 导入我们封装好的axios对象
import api from './api.js' // 导入我们封装好的api对象
import qs from 'qs'

export function _getMenus(params={}){
    // console.log(params,'params,菜单id')
    return  http.get(`${api._getMenus}?userId=${params.userId}`, ) // return对应的get/post方法，第一个填路径，第二个给参数对象
}
export function _login(params={}){
    // console.log(params,'登陆接口出传入的参数')
    return  http.post(api._login, qs.stringify(params.data)) // return对应的get/post方法，
}

　　这样就可以了，最后是我们的如何使用：(此处仅为在react中的示范)

import {_getMenus} from "./servers/index.js"; // 通过inport 引入暴露的方法


 _getMenus({传入的参数名称: 参数}).then(data => {
                    if (data.code === 0 && data.data.list) {
                        _this.setState({
                           list:data.list
                        })
                    }
                }).catch(err => {
                    alert(err)
                })