vue请求封装

1.创建环境文件.env.development和.env.production

// 开发环境
# 页面标题
VUE_APP_TITLE = 'Blog'

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '开发环境域名'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

// 生产环境
# 页面标题
VUE_APP_TITLE = 'Blog'

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '生产环境域名'

2.二次封装请求

// 1.引入 axios
import axios from 'axios';
import { Message } from 'element-ui';
// 引入 cookie
import { getCookie } from './cookie';

// 2.创建 axios 实例
const service = axios.create({
  // 3.配置
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 60 * 1000 //请求的超时时间
})

// 4.请求拦截
service.interceptors.request.use(
  config => {
      config.baseURL = process.env.VUE_APP_FastAdmin_API;

    //设置 token
    if (localStorage.getItem('token')) {
      config.headers.token = localStorage.getItem('token');//token  代表从后台传过来的token的令牌
    } else {
      config.headers.token = getCookie('token');//token  代表从后台传过来的cookie的令牌
      if (getCookie('token')) {
        localStorage.setItem('Token', getCookie('token'))
      }
    }
    if (config.method === 'get' && config.params) {
      let url = config.url + '?';
      let keys = Object.keys(config.params);
      for (let key of keys) {
        url += `${key}=${encodeURIComponent(config.params[key])}&`;
      }
      // let url = config.url + '?' + tansParams(config.params);
      url = url.slice(0, -1);
      config.params = {};
      config.url = url
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
)

// 5.响应拦截
service.interceptors.response.use(
  res => {
    // console.log(res);
    const data = res.data;
    //如果后台返回的报错码和报错信息的话
    if (data.code === 1 || (data.code >= 200 && data.code <= 299)) {
      return data;
    } else if (data.code == 0) {
      Message({
        type: "error",
        message: data.msg,
        duration: 2000
      });
      return data;
    }
  },
  err => {
    console.log(err);
    if (err.response.data.code === 401) {
      localStorage.removeItem("UserInfo");
      localStorage.removeItem("myInfo");
      localStorage.removeItem("Token");
      Message({
        type: "error",
        message: '请先登录',
        duration: 2000
      })
    } else if (err.response.data.code === 50003) {
      Message({
        type: "error",
        message: '服务器维护中',
        duration: 2000
      })
    } else {
      Message({
        type: "error",
        message: err,
        duration: 2000
      })
    }
  }
)

// 6.导出
export default service;

3.cookie配置

// 封装了cookie
import Cookies from "js-cookie";

// 创建cookie
export function setCookie(key, value, expires) {
    return Cookies.set(key, value, { expires: expires })
}

// 获取 cookie
export function getCookie(key) {
    return Cookies.get(key);
}

// 删除cookie
export function removeCookie(key) {
    return Cookies.remove(key);
}