前端封装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 根据运行环境读取对应配置文件的apitimeout: 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 debugconsole.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-loginMessageBox.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,});
}