axios的二次封装

// 对于axios进行二次封装
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress';
// start:进度条开始 done：进度条结束
// 进入进度条样式
import 'nprogress/nprogress.css'

// 引入store模块
import store from '@/store'

// 1:利用axios对象的方法create，去创建一个axios实例
// 2：requests就是axios，只不过稍微配置一下
const requests = axios.create({
    // process.env 获取环境变量文件中变量赋值
    // 如果运行'vue-cli-service serve 读取 .env.development 中变量'
    // 如果运行 vue-cli-service build 读取 .env.production 中变量
    // 测试方式
        // 1.测试开发环境 num run serve
        // 2.测试生产环境 npm run build:prod num run preview
    baseURL: process.env.VUE_APP_BASE_URL, // 配置请求的根路径
    timeout:5000, // 请求超时,服务器没有响应，执行错误异常
});
// 请求拦截器:再发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    // config：配置对象，对象里面有一个属性很重要，headers请求头
    nprogress.start(); // 进度条开始动
    if(store.state.detail.uuid_token){
        // 给请求头添加一个字段(uuid)，和后台老师商量好了
        config.headers.userTempId = store.state.detail.uuid_token
    }
    // 需要携带token带给服务器 
    if(store.state.user.token){
        config.headers.token = store.state.user.token
    }
    return config;
});

// 响应拦截器
requests.interceptors.response.use((res)=>{
    // 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    nprogress.done(); // 进度条结束
    return res.data;
},(error)=>{
    // 响应失败的回调函数
    return Promise.reject(new error('faile'));
})


// 对外暴露
export default requests;

配置请求的根路径要配合两个文件：

.env.development文件，文件配置如下

# 开发环境

VUE_APP_BASE_URL='http://localhost:9527'

.env.production文件，文件配置如下

# 生产环境有效

VUE_APP_BASE_URL=' http://192.168.218.16:9527'