feat(axios): 封装axios

Author: wenlan-coder

.env.development

@@ -1,8 +1,9 @@
 env = 'development'
 VITE_MODE_NAME=development
+VITE_APP_BASE_API =http://123.207.32.32:8000/
 VITE_APP_ID=123456
 VITE_AGENT_ID=123456
 VITE_LOGIN_TEST=true
-VITE_RES_URL=https://www.baidu.com
+VITE_RES_URL=v1.hitokoto.cn
 VITE_APP_TITLE=管理平台
 VITE_EDITOR=vscode

.env.production

@@ -3,6 +3,6 @@ VITE_MODE_NAME=production
 VITE_APP_ID="123456"
 VITE_AGENT_ID=123456
 VITE_LOGIN_TEST=false
-VITE_RES_URL=https://www.baidu.com
+VITE_RES_URL=v1.hitokoto.cn
 VITE_APP_TITLE=管理平台
 VITE_EDITOR=vscode

.env.test

@@ -2,6 +2,6 @@ VITE_MODE_NAME=test
 VITE_APP_ID=123456
 VITE_AGENT_ID=123456
 VITE_LOGIN_TEST=true
-VITE_RES_URL=https://www.baidu.com
+VITE_RES_URL=v1.hitokoto.cn
 VITE_APP_TITLE=管理平台
 VITE_EDITOR=vscode

src/env.d.ts

@@ -4,7 +4,7 @@
  * @Author: wenlan
  * @Date: 2022-01-13 15:26:43
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-16 14:42:44
+ * @LastEditTime: 2022-01-16 22:49:46
  */
 /// <reference types="vite/client" />
 
@@ -23,4 +23,5 @@ interface ImportMetaEnv {
   VITE_LOGIN_TEST: string
   VITE_RES_URL: string
   VITE_APP_TITLE: string
+  VITE_APP_BASE_API: string
 }

src/main.ts

@@ -4,14 +4,32 @@
  * @Author: wenlan
  * @Date: 2022-01-13 15:26:43
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-16 14:27:14
+ * @LastEditTime: 2022-01-18 16:12:43
  */
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
 import store from './store'
-import './service/axios_demo'
+import MyRequest from './service'
 const app = createApp(App)
 app.use(router) // 挂载之前
 app.use(store)
 app.mount('#app')
+MyRequest.request({
+  url: '/home/multidata',
+  method: 'GET',
+  interceptors: {
+    requestInterceptor: (config) => {
+      console.log('单独请求拦截')
+      return config
+    },
+    reponseInterceptor: (res) => {
+      console.log('单独响应拦截')
+      return res
+    }
+  }
+})
+// MyRequest.request({
+//   url: '/home/multidata',
+//   method: 'GET'
+// })

src/service/axios_demo.ts

@@ -0,0 +1,39 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-01-16 16:57:17
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-01-18 17:04:06
+ */
+import WDRequest from './request'
+import { TIME_OUT } from './request/config'
+//创建实例
+const MyRequest = new WDRequest({
+  timeout: TIME_OUT,
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  interceptors: {
+    requestInterceptor: (config) => {
+      // const token = ''
+      // //携带token
+      // if (token) {
+      //   config.headers['Authorization'] = 'Bearer ' + token
+      // }
+      console.log('实例请求拦截成功')
+      return config
+    },
+    requestIntetceptorCatch: (err) => {
+      console.log('实例请求拦截失败')
+      return err
+    },
+    reponseInterceptor: (config) => {
+      console.log('实例响应拦截成功')
+      return config
+    },
+    reponseInterceptorCatch: (err) => {
+      console.log('实例响应拦截失败')
+      return err
+    }
+  }
+})
+export default MyRequest

src/service/index.ts

@@ -0,0 +1,11 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-01-16 16:50:51
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-01-18 13:40:46
+ */
+//config
+const TIME_OUT = 10000
+export { TIME_OUT }

src/service/request/config.ts

@@ -0,0 +1,63 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-01-16 16:52:38
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-01-18 16:09:29
+ */
+import axios from 'axios'
+import type { AxiosInstance } from 'axios'
+import type { WDAxiosRequestConfig, WDRequestInterceptors } from './type'
+class WDRequest {
+  instance: AxiosInstance
+  interceptors?: WDRequestInterceptors
+  constructor(config: WDAxiosRequestConfig) {
+    this.instance = axios.create(config)
+    this.interceptors = config.interceptors
+    //实例拦截
+    this.instance.interceptors.request.use(
+      this.interceptors?.requestInterceptor,
+      this.interceptors?.requestIntetceptorCatch
+    )
+    this.instance.interceptors.response.use(
+      this.interceptors?.reponseInterceptor,
+      this.interceptors?.reponseInterceptorCatch
+    )
+    //默认拦截
+
+    this.instance.interceptors.request.use(
+      (config) => {
+        console.log('默认请求拦截成功')
+        return config
+      },
+      (err) => {
+        console.log('默认请求拦截失败')
+        return err
+      }
+    )
+    this.instance.interceptors.response.use(
+      (config) => {
+        console.log('默认响应拦截成功')
+        return config
+      },
+      (err) => {
+        console.log('默认响应拦截失败')
+        return err
+      }
+    )
+  }
+  request(config: WDAxiosRequestConfig): void {
+    //单独请求拦截
+    if (config.interceptors?.requestInterceptor) {
+      config = config.interceptors.requestInterceptor(config)
+    }
+    this.instance.request(config).then((res) => {
+      if (config.interceptors?.reponseInterceptor) {
+        res = config.interceptors.reponseInterceptor(res)
+      }
+      console.log(res)
+    })
+  }
+}
+export default WDRequest

src/service/request/index.ts

@@ -0,0 +1,19 @@
+/*
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-01-18 13:38:02
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-01-18 13:38:02
+ */
+import type { AxiosResponse, AxiosRequestConfig } from 'axios'
+export interface WDRequestInterceptors {
+  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
+  requestIntetceptorCatch?: (err: any) => any
+  reponseInterceptor?: (res: AxiosResponse) => AxiosResponse
+  reponseInterceptorCatch?: (err: any) => any
+}
+
+export interface WDAxiosRequestConfig extends AxiosRequestConfig {
+  interceptors?: WDRequestInterceptors
+}