axios拦截器封请求装

src/main.js

@@ -7,14 +7,14 @@ import "./registerServiceWorker";
 import iView from 'iview';
 import 'iview/dist/styles/iview.css';
 
-import Axios from 'axios';
+import axiosPlugin from "./utils/axios";
 
 Vue.use(iView);
 
-Vue.prototype.$http = Axios;
-
 Vue.config.productionTip = false;
 
+Vue.use(axiosPlugin);
+
 new Vue({
   router,
   store,

src/utils/axios.js

@@ -0,0 +1,110 @@
+import Vue from "vue";
+import Axios from "axios";
+//axios配置 start
+
+//请求拦截
+let $Message;
+Axios.interceptors.request.use(config => {
+        // 在发送请求之前做某件事
+
+        // 若是有做鉴权token , 就给头部带上token
+        // if (localStorage.token) {
+        // config.headers.Authorization = localStorage.token;
+        // }
+        $Message = config.message;
+        return config;
+    },
+    error => {
+        $Message.error({
+            content: error,
+            duration: 10,
+            closable: true
+        });
+        return Promise.resolve(error);
+    }
+);
+
+//响应拦截
+Axios.interceptors.response.use(response => {
+    return response;
+}, error => { // 这里是返回状态码不为200时候的错误处理
+    let status = error.response.status;
+    // 登录失效 跳转登录页面
+    if (status == 403 || status == 401) {
+
+    }
+    return Promise.resolve(error);
+});
+
+Axios.defaults.withCredentials = true; //允许跨域携带cookie
+Axios.defaults.timeout = 100000; //超时时间
+Axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //标识这是一个 ajax 请求
+
+/*
+  url    
+  params JSON对象
+  type   json || form
+  method get || post
+*/
+let ajax = (url, params, type = 'json', method = 'get', thisObj) => {
+    let getData = method === 'get' ? params : {};
+    let postData = method === 'post' ? params : {};
+    let headers = type == 'form' ? {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+    } : {
+        "Accept": "application/json",
+        "Content-Type": "application/json; charset=UTF-8"
+    };
+
+    return new Promise(function (resolve, reject) {
+        Axios({
+            method: method,
+            url: url,
+            params: getData,
+            data: postData,
+            headers: headers,
+            withCredentials: true,
+            message: thisObj.$Message
+        }).then((res) => {
+            let status = res.status;
+            if (status >= 200 && status < 300) {
+                resolve(res.data.data || res.data);
+            } else {
+                $Message.error({
+                    content: "服务异常：" + res.message,
+                    duration: 10,
+                    closable: true
+                });
+            }
+        }).catch((response) => {
+            $Message.error({
+                content: "服务异常(catch)：" + response.message,
+                duration: 10,
+                closable: true
+            });
+
+        })
+
+    })
+}
+
+Vue.prototype.$http = Axios;
+
+// get请求
+Vue.prototype.$get = function (url, params) {
+    return ajax(url, params, '', 'get', this);
+}
+
+// post请求
+Vue.prototype.$post = function (url, params, type) {
+    return ajax(url, params, type, 'post', this);
+}
+
+
+export default {
+    install: function (Vue, Option) {
+        Object.defineProperty(Vue.prototype, "$http", {
+            value: Axios
+        });
+    }
+};