在业务系统较大的项目上，每一个组件都单独一个axios请求接口数据，这样既难管理，也不易修改，也不太雅观。

初步结构

1、在vue项目根目录下我们创建API文件夹
2、在API文件夹下创建http.js
3、创建详细接口分布如登录注册功能我们定义为：login.js

文件结构
- API
-- http.js
-- login.js

http.js

import axios from 'axios';
const instance = axios.create({
  baseURL:'', //baseurl是axios的前置请求路径
  timeout: 12000 //12S超时
})
instance.interceptors.request.use(request=>{
    //这里可以填写你的axios请求前处理逻辑
    return request;
},function(error){
  return  Promise.reject(error);
})

/*
  拦截响应
*/
instance.interceptors.response.use(res=>{
  //拦截数据响应
    return res
},(error)=>{
    return  Promise.reject(error);
})

export default function (method,url,data = null){
    method = method.toLowerCase();
    switch(method){
        case "post" :
            return instance.post(url, data);
            break;
        case "get" :
            return instance.get(url, {params : data});
            break;
        case "delete" :
            return instance.delete(url, { params: data })
            break;
        case "put" :
            return instance.put(url,data)
            break;
        default :
            console.error("未知的请求方式！" + method);
            return false;
            break;
    };
};

login.js

import req from './http.js';
//登录
export const LOGIN = params=>req("请求方式","请求接口地址",params);
//注册
export const REGESIT= params=>req("请求方式","请求接口地址",params);

然后在组件中使用

//login.vue
import {LOGIN,REGESIT} from '@/API/login.js';
、、、
methods : {
  async login(){
    let res = await LOGIN({请求参数});
    、、、
  }
}

多个axois并发请求 遮罩怎么取消？

一个axios请求一个遮罩，但是如果一个页面中有多个请求呢？这样就会导致遮罩层一闪一闪，很不美观。
上述我们知道在http.js中创建axios请求拦截，那么我们请求拦截前以及响应后进行操作计数。

怎么做到避免每一个组件(功能)都进行import?

拓展：利用Vue原型链我们可以把各个接口挂载在Vue的原型上，这样就不用每个模块组件都import一次

main.js

import Vue from 'vue';
import {LOGIN,REGESIT} from '@/API/login.js';
Vue.prototype.LOGIN = LOGIN;
Vue.prototype.REGESIT= REGESIT;

在组件中直接this.LOGIN ({请求参数});这样就不用每次去导入了