优化fetch封装

陈鑫 · 陈鑫 · commit 034376f5aa3c · 2020-12-24T17:46:34.000+08:00
diff --git a/src/api/users.ts b/src/api/users.ts
@@ -1,25 +1,28 @@
-import { Post, Get } from "@/utils/fetch"
+import service from "@/utils/fetch"
 import qs from 'qs'
 
 //用户登录
-export const login = (params: any) => {
-  return Post({
+export const login = (params: any): any => {
+  return service({
+    method: "post",
     url: '/login',
     data: params
   })
 }
 
 //用户登出
 export const logout = (params: any) => {
-  return Get({
+  return service({
+    method: "get",
     url: '/logout',
     data: params
   })
 }
 
 //获取权限列表
 export const getPermissionsList = (params: any) => {
-  return Get({
+  return service({
+    method: "get",
     url: "/navPerson",
     data: qs.stringify(params)
   })
diff --git a/src/layouts/LevelBasicLayout.vue b/src/layouts/LevelBasicLayout.vue
@@ -7,8 +7,10 @@
         <div class="user-info">
           <a-dropdown>
             <div>
-              <img src="../assets/user.png" class="user-head" />
-              <a @click="e => e.preventDefault()" class="user-name">{{userName}}</a>
+              <img src="../assets/user.png"
+                   class="user-head" />
+              <a @click="e => e.preventDefault()"
+                 class="user-name">{{userName}}</a>
             </div>
             <a-menu slot="overlay">
               <a-menu-item key="0">
@@ -52,7 +54,7 @@ import { Layout, Dropdown, Menu, Icon, Modal } from "ant-design-vue";
     AMenu: Menu,
     AMenuItem: Menu.Item,
     AMenuDivider: Menu.Divider,
-  }
+  },
 })
 export default class LevelBasicLayout extends Vue {
   @Ref() readonly updatePass!: UpdatePass;
@@ -79,15 +81,13 @@ export default class LevelBasicLayout extends Vue {
       class: "my-modal",
       cancelText: "取消",
       onOk: async () => {
-        let { code } = await logout({});
-        if (code == 200) {
-          sessionStorage.clear();
-          this.$router.push("/login");
-        }
+        let { data } = await logout({});
+        sessionStorage.clear();
+        this.$router.push("/login");
       },
       onCancel: () => {
         console.log("Cancel");
-      }
+      },
     });
   }
 }
diff --git a/src/layouts/VerticalBasicLayout.vue b/src/layouts/VerticalBasicLayout.vue
@@ -4,17 +4,20 @@
     <global-header @goToHome="goToHome">
       <template slot="rightCon">
         <div class="user-info">
-          <a-select :default-value="lang" size="small" @change="toggleChangeLang" class="lang-box">
-            <a-select-option
-              v-for="(item, index) in Languages"
-              :value="item.value"
-              :key="item.value"
-            >{{$t(item.label)}}</a-select-option>
+          <a-select :default-value="lang"
+                    size="small"
+                    @change="toggleChangeLang"
+                    class="lang-box">
+            <a-select-option v-for="(item, index) in Languages"
+                             :value="item.value"
+                             :key="item.value">{{$t(item.label)}}</a-select-option>
           </a-select>
           <a-dropdown>
             <div>
-              <img src="../assets/user.png" class="user-head" />
-              <a @click="e => e.preventDefault()" class="user-name">{{userName}}</a>
+              <img src="../assets/user.png"
+                   class="user-head" />
+              <a @click="e => e.preventDefault()"
+                 class="user-name">{{userName}}</a>
             </div>
             <a-menu slot="overlay">
               <a-menu-item key="1">
@@ -28,11 +31,17 @@
 
     <!-- layout content -->
     <a-layout-content>
-      <div class="left-menus" :style="{width:collapsed ? '60px' : '220px'}">
+      <div class="left-menus"
+           :style="{width:collapsed ? '60px' : '220px'}">
         <Menus mode="inline"></Menus>
-        <div class="tootip" @click="collapseExpand">
-          <a-icon v-if="!collapsed" class="icon" type="left" />
-          <a-icon v-else class="icon" type="right" />
+        <div class="tootip"
+             @click="collapseExpand">
+          <a-icon v-if="!collapsed"
+                  class="icon"
+                  type="left" />
+          <a-icon v-else
+                  class="icon"
+                  type="right" />
         </div>
       </div>
       <div class="main-con">
@@ -62,8 +71,8 @@ import { GlobalHeader, Menus } from "@/components/GlobalHeader";
     AMenuItem: Menu.Item,
     AMenuDivider: Menu.Divider,
     ASelect: Select,
-    ASelectOption: Select.Option
-  }
+    ASelectOption: Select.Option,
+  },
 })
 export default class VerticalBasicLayout extends Vue {
   @Inject() reload!: any;
@@ -100,15 +109,13 @@ export default class VerticalBasicLayout extends Vue {
       class: "my-modal",
       cancelText: "取消",
       onOk: async () => {
-        let { code } = await logout({});
-        if (code == 200) {
-          sessionStorage.clear();
-          this.$router.push("/login");
-        }
+        let { data } = await logout({});
+        sessionStorage.clear();
+        this.$router.push("/login");
       },
       onCancel: () => {
         console.log("Cancel");
-      }
+      },
     });
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -5,6 +5,7 @@ import { getToken } from "@/utils/token";
 import { getPermissionsList } from "@/api/users";
 import { isURL } from "@/utils/util";
 import { RouteLayout } from "@/layouts";
+import { AxiosResponse } from 'axios';
 
 //是否需要动态路由   true:是  false:否
 const DYNROUTER = true;
diff --git a/src/types/axios.d.ts b/src/types/axios.d.ts
@@ -0,0 +1,7 @@
+import * as axios from 'axios'
+
+declare module 'axios' {
+  interface AxiosInstance {
+    (config: AxiosRequestConfig): Promise<any>
+  }
+}
diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts
@@ -1,95 +1,24 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosRequestConfig, AxiosResponse, AxiosInstance } from "axios";
 import { getToken, removeToken } from "@/utils/token";
 import { Modal } from "ant-design-vue";
 import { Message, Notification } from "@/utils/resetMessage";
 import router from "@/router";
 
-/**
- * post请求封装
- * @param params
- */
-export function Post(params: StoreState.FetchParams) {
-  return axios({
-    ...params,
-    method: "post",
-    url: params.url,
-    data: params.data
-  })
-    .then(res => {
-      return Promise.resolve(res.data);
-    })
-    .catch(err => {
-      return Promise.reject(err.data);
-    });
-}
-
-/**
- * delete请求封装
- * @param params
- */
-export function Delete(params: StoreState.FetchParams) {
-  return axios({
-    ...params,
-    method: "delete",
-    url: params.url,
-    data: params.data
-  })
-    .then(res => {
-      return Promise.resolve(res.data);
-    })
-    .catch(err => {
-      return Promise.reject(err.data);
-    });
-}
-
-/**
- * get请求封装
- * @param params
- */
-export function Get(params: StoreState.FetchParams) {
-  return axios({
-    ...params,
-    method: "get",
-    url: params.url,
-    params: params.data
-  })
-    .then(res => {
-      return Promise.resolve(res.data);
-    })
-    .catch(err => {
-      return Promise.reject(err.data);
-    });
-}
-
-/**
- * patch请求封装
- * @param params
- */
-export function Patch(params: StoreState.FetchParams) {
-  return axios({
-    ...params,
-    method: "patch",
-    url: params.url,
-    data: params.data
-  })
-    .then(res => {
-      return Promise.resolve(res.data);
-    })
-    .catch(err => {
-      return Promise.reject(err.data);
-    });
-}
+// create an axios instance
+const service: AxiosInstance = axios.create({
+  baseURL: "/api", // 正式环境
+  timeout: 60 * 1000,
+  headers: {}
+})
 
 /**
  * 请求拦截
  */
-axios.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
-    config.headers.common["Authorization"] = getToken(); // 请求头带上token
-    config.headers.common["token"] = getToken();
-    config.baseURL = "/api";
-    return config;
-  },
+service.interceptors.request.use((config: AxiosRequestConfig) => {
+  config.headers.common["Authorization"] = getToken(); // 请求头带上token
+  config.headers.common["token"] = getToken();
+  return config;
+},
   error => {
     return Promise.reject(error);
   }
@@ -98,72 +27,73 @@ axios.interceptors.request.use(
 /**
  * 响应拦截
  */
-axios.interceptors.response.use(
-  (response: AxiosResponse) => {
-    if (response.status == 201 || response.status == 200) {
-      let { code, status, msg, data } = response.data;
-      if (code == 401) {
-        Modal.warning({
-          title: "token出错",
-          content: "token失效，请重新登录！",
-          onOk: () => {
-            removeToken();
-            router.push("/login");
-          }
-        });
-      } else if (code == 200) {
-        if (status) {
-          //接口请求成功
-          msg && Message.success(msg); //后台如果返回了msg，则将msg提示出来
-          return Promise.resolve(response); //返回成功数据
-        } else {
-          //接口异常
-          msg && Message.warning(msg); //后台如果返回了msg，则将msg提示出来
-          return Promise.reject(response); //返回异常数据
+service.interceptors.response.use((response: AxiosResponse) => {
+  if (response.status == 201 || response.status == 200) {
+    let { code, status, msg } = response.data;
+    if (code == 401) {
+      Modal.warning({
+        title: "token出错",
+        content: "token失效，请重新登录！",
+        onOk: () => {
+          removeToken();
+          router.push("/login");
         }
+      });
+    } else if (code == 200) {
+      if (status) {
+        //接口请求成功
+        msg && Message.success(msg); //后台如果返回了msg，则将msg提示出来
+        return Promise.resolve(response.data); //返回成功数据
       } else {
         //接口异常
-        msg && Message.error(msg);
-        return Promise.reject(response);
+        msg && Message.warning(msg); //后台如果返回了msg，则将msg提示出来
+        return Promise.reject(response.data); //返回异常数据
       }
+    } else {
+      //接口异常
+      msg && Message.error(msg);
+      return Promise.reject(response.data);
     }
-    return response;
-  },
+  }
+  return response;
+},
   error => {
     if (error.response.status) {
       switch (error.response.status) {
         case 500:
           Notification.error({
-            message: "Forbidden",
-            description: error.response.data
+            message: "温馨提示",
+            description: "服务异常，请重启服务器！"
           });
           break;
         case 401:
           Notification.error({
-            message: "Forbidden",
-            description: "暂无权限"
+            message: "温馨提示",
+            description: "服务异常，请重启服务器！"
           });
           break;
         case 403:
           Notification.error({
-            message: "Forbidden",
-            description: "登录过期，请重新登录"
+            message: "温馨提示",
+            description: "服务异常，请重启服务器！"
           });
           break;
         // 404请求不存在
         case 404:
           Notification.error({
-            message: "Forbidden",
-            description: "网络请求不存在"
+            message: "温馨提示",
+            description: "服务异常，请重启服务器！"
           });
           break;
         default:
           Notification.error({
-            message: "Forbidden",
-            description: error.response.data.msg
+            message: "温馨提示",
+            description: "服务异常，请重启服务器！"
           });
       }
     }
     return Promise.reject(error.response);
   }
 );
+
+export default service
