Vue 封装 Axios 插件

新建一个request.js

import axios from 'axios'             //引入 axios
import baseUrl from '../api/baseUrl'

// 创建 axios 实例
const service = axios.create({
  baseURL: baseUrl, // api 的 base_url
  timeout: 15000, // 请求超时时间
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default service

baseUrl.js（管理和区分生产环境和本地开发环境）

let baseUrl = "";
switch (process.env.NODE_ENV) { //注意变量名是自定义的
  case 'development':
    baseUrl = "http://127.0.0.1:8000"  //开发环境url
    break
  case 'production':
    baseUrl = "https://yun.guanacossj.com"   //生产环境url
    break
}

export default baseUrl;

执行npm run dev 的时候会请求 127.0.0.1

执行npm run build 的时候会请求yun.guanacossj.com

使用示例

import request from '@/utils/request'

async checkLogin() {
  try {
    let ans = await request({
      url: "yunprophet/api/v1/check-login",
      headers: {
      'token': localStorage.getItem('Authorization')
    }});
    if (ans.data.code === 200) {
      await this.getDownList();
      // await this.getToDOList();
      await this.getToDOListNew();
    } else {
      this.$message.error({
        message: '凭证已过期，请重新登录！',
        center: true
      });
      await this.$router.push({
        path: "/login",
      });
    }
  } catch (e) {
    this.$message.error({
      message: '页面出错了，请稍后再试！',
      center: true
    });
  }
},