vue项目中axios的封装和接口的统一管理

在src下面新建一个axios文件夹和一个api文件夹，然后在axios里面新建index文件，index文件用于封装axios，在api文件夹里面按模块管理接口。

axios/index.js

1.引入
引入qs模块，用来序列化post类型的数据

2.环境的切换
我们的项目环境有开发环境、测试环境和生产环境，node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。

3.设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。

4.设置请求头
post请求需要请求头，我们设置了一个默认请求头application/x-www-form-urlencoded;charset=UTF-8

6.请求拦截

// 请求拦截    在发送之前做一些事情   比如在headers请求头中加字段
axios.interceptors.request.use(
    (req) => {                         
        if (req.method === 'post') {
            req.data = qs.stringify({ 'inputJson': JSON.stringify(optionObject) });
        }
        return req
    }, (error) => {
        Message.error({ message: '请求超时!' })
        Promise.reject(error)
    }
)

7.响应拦截

// 响应请求   在接受到响应后进行一些操作  比如服务器返回登录状态失效，需要重新登录时跳转到登录页
axios.interceptors.response.use(
    response => {
        return response
    }, err => {
        if (err.response.status == 404) {
            router.push('/mistaken');
        } else if (err.response.status == 401) {
            Message.warning({ message: '请重新登录!' });
            store.commit('userInfo', '')
            router.push('/LoginView');
        } else {};
        return Promise.reject(error.response);  
    }
)

8.封装get和post方法

export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

api/loginview.js（以登录模块为例）

首先引入get和post方法，然后通过export导出定义好的login方法

import { get, post } from '../axios/index'
export const Login = p => post('sm/admin/login', p);
export const DataCenterLogin = p => post(this.screenurl+'DataCenterLogin', p);

login.vue

在login引入login方法并调用

import {Login,DataCenterLogin} from '@/api/loginview';
Login(data).then((res) => {
    if(res.data.success == 1) {}              
}).catch((res) => {
    this.$message.error(res.data.msg);
})