前端封装axios请求

         基于vue-element-admin的请求封装，进行部分修改和记录。如果使用vue脚手架搭建的项目可以先安装axios包

npm install axios@0.18.1 -S 

  request.js

import axios from "axios";
import { MessageBox, Notification } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";

// 创建axios
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url 根据运行环境读取对应配置文件的api
  timeout: 5000, // 请求时长，超时则视为请求失败
});

// 请求拦截器 可以在请求发送前做一些处理
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      //token保存的请求头，后端读取做JWT做身份校验
      config.headers["Authorization"] = getToken();
    }
    return config;
  },
  (error) => {
    // 请求发送错误
    console.log(error);
    return Promise.reject(error);
  }
);

// 返回体拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;
    const status = response.status;
    // 返回体一般可分为正常的请求返回体和blob类型的二进制数据流，如图片，文件等。
    // 这里判断如果是blob类型则直接返回
    if (status == 200 && response.data instanceof Blob) {
      return response;
    }
    if (res.code !== 200) {
      Notification.error({
        title: "错误",
        message: res.message || "服务器维护中...",
        duration: 5 * 1000,
      });

      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err:" + error); // for debug
    console.log(error);
    let { message } = error;
    if (message == "Network Error") {
      message = "服务器维护中...";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }

    Notification.error({
      title: "错误",
      message: message,
      duration: 5 * 1000,
    });

    const err = error.response.status;
    // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
    if (err === 508 || err === 512 || err === 514) {
      // to re-login
      MessageBox.confirm("用户token失效，跳转至登录页面。", "确定登出", {
        confirmButtonText: "重新登录",
        type: "warning",
      }).then(() => {
        store.dispatch("user/resetToken").then(() => {
          location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
      });
    }

    return Promise.reject(error);
  }
);

export default service;

使用：
 

import request from "@/utils/request";

export function updateUnit(data) {
  return request({
    url: "/unit",
    method: "put",
    data,
  });
}