feat(axios): 完成axios封装

Author: wenlan-coder

src/main.ts

@@ -4,7 +4,7 @@
  * @Author: wenlan
  * @Date: 2022-01-13 15:26:43
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-18 16:12:43
+ * @LastEditTime: 2022-01-18 23:03:01
  */
 import { createApp } from 'vue'
 import router from './router'
@@ -14,10 +14,15 @@ import MyRequest from './service'
 const app = createApp(App)
 app.use(router) // 挂载之前
 app.use(store)
+interface dataType {
+  data: any
+  returnCode: string
+  success: boolean
+}
 app.mount('#app')
-MyRequest.request({
+MyRequest.get<dataType>({
   url: '/home/multidata',
-  method: 'GET',
+  showLoading: true,
   interceptors: {
     requestInterceptor: (config) => {
       console.log('单独请求拦截')
@@ -28,6 +33,8 @@ MyRequest.request({
       return res
     }
   }
+}).then((res) => {
+  console.log(res)
 })
 // MyRequest.request({
 //   url: '/home/multidata',

src/service/index.ts

@@ -4,7 +4,7 @@
  * @Author: wenlan
  * @Date: 2022-01-16 16:57:17
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-18 17:04:06
+ * @LastEditTime: 2022-01-18 19:19:11
  */
 import WDRequest from './request'
 import { TIME_OUT } from './request/config'

src/service/request/index.ts

@@ -4,18 +4,25 @@
  * @Author: wenlan
  * @Date: 2022-01-16 16:52:38
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-18 16:09:29
+ * @LastEditTime: 2022-01-18 23:02:05
  */
 import axios from 'axios'
 import type { AxiosInstance } from 'axios'
 import type { WDAxiosRequestConfig, WDRequestInterceptors } from './type'
+import { ElLoading } from 'element-plus'
+const DEFAULT_LOADING = true
 class WDRequest {
   instance: AxiosInstance
+  showLoading: boolean
   interceptors?: WDRequestInterceptors
+  loading?: any
   constructor(config: WDAxiosRequestConfig) {
+    //创建axios实例
     this.instance = axios.create(config)
+    this.showLoading = config.showLoading ?? true
     this.interceptors = config.interceptors
-    //实例拦截
+
+    //实例拦截操作
     this.instance.interceptors.request.use(
       this.interceptors?.requestInterceptor,
       this.interceptors?.requestIntetceptorCatch
@@ -24,40 +31,93 @@ class WDRequest {
       this.interceptors?.reponseInterceptor,
       this.interceptors?.reponseInterceptorCatch
     )
-    //默认拦截
 
+    //默认类的拦截（全局拦截）
+
+    //请求拦截
     this.instance.interceptors.request.use(
       (config) => {
         console.log('默认请求拦截成功')
+        if (this.showLoading) {
+          this.loading = ElLoading.service({
+            lock: true,
+            text: '数据加载中',
+            background: 'rgba(0, 0, 0, 0.7)',
+            fullscreen: true
+          })
+        }
         return config
       },
       (err) => {
         console.log('默认请求拦截失败')
         return err
       }
     )
+    //响应拦截
     this.instance.interceptors.response.use(
-      (config) => {
-        console.log('默认响应拦截成功')
-        return config
+      (res) => {
+        setTimeout(() => {
+          this.loading.close()
+        }, 3000)
+        const data = res.data
+        if (data.returnCode === '-1000') {
+          console.log('请求失败')
+        } else {
+          return data
+        }
       },
       (err) => {
+        if (err.response.status === 404) {
+          console.log('返回状态码错误为404')
+        }
         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)
+
+  request<T>(config: WDAxiosRequestConfig): Promise<T> {
+    return new Promise((resolve, reject) => {
+      //单独请求拦截
+      if (config.interceptors?.requestInterceptor) {
+        config = config.interceptors.requestInterceptor(config)
+      }
+      if (config.showLoading === false) {
+        this.showLoading = config.showLoading
       }
-      console.log(res)
+      this.instance
+        .request<any, T>(config)
+        .then((res) => {
+          if (config.interceptors?.reponseInterceptor) {
+            res = config.interceptors.reponseInterceptor(res)
+          }
+          //确保不会影响下一个请求
+          this.showLoading = DEFAULT_LOADING
+          resolve(res)
+        })
+        .catch((err) => {
+          //确保不会影响下一个请求
+          this.showLoading = DEFAULT_LOADING
+          reject(err)
+        })
     })
   }
+
+  //GET
+  get<T>(config: WDAxiosRequestConfig): Promise<T> {
+    return this.request<T>({ ...config, method: 'GET' })
+  }
+  //PUT
+  put<T>(config: WDAxiosRequestConfig): Promise<T> {
+    return this.request<T>({ ...config, method: 'PUT' })
+  }
+  //POST
+  post<T>(config: WDAxiosRequestConfig): Promise<T> {
+    return this.request<T>({ ...config, method: 'POST' })
+  }
+  //DEL
+  delete<T>(config: WDAxiosRequestConfig): Promise<T> {
+    return this.request<T>({ ...config, method: 'DELETE' })
+  }
 }
 export default WDRequest

src/service/request/type.ts

@@ -4,16 +4,17 @@
  * @Author: wenlan
  * @Date: 2022-01-18 13:38:02
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-18 13:38:02
+ * @LastEditTime: 2022-01-18 22:52:35
  */
-import type { AxiosResponse, AxiosRequestConfig } from 'axios'
+import type { AxiosRequestConfig } from 'axios'
 export interface WDRequestInterceptors {
   requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
   requestIntetceptorCatch?: (err: any) => any
-  reponseInterceptor?: (res: AxiosResponse) => AxiosResponse
+  reponseInterceptor?: (res: any) => any
   reponseInterceptorCatch?: (err: any) => any
 }
 
 export interface WDAxiosRequestConfig extends AxiosRequestConfig {
   interceptors?: WDRequestInterceptors
+  showLoading?: boolean
 }

src/views/Main.vue

@@ -4,17 +4,39 @@
  * @Author: wenlan
  * @Date: 2022-01-15 16:43:51
  * @LastEditors: wenlan
- * @LastEditTime: 2022-01-15 23:16:23
+ * @LastEditTime: 2022-01-18 21:07:30
 -->
-<script lang="ts"></script>
-
 <template>
-  <h2>main</h2>
-  <el-button>hello world!</el-button>
-  <el-alert title="success alert" type="success" effect="dark"> </el-alert>
-  <el-alert title="info alert" type="info" effect="dark"> </el-alert>
-  <el-alert title="warning alert" type="warning" effect="dark"> </el-alert>
-  <el-alert title="error alert" type="error" effect="dark"> </el-alert>
+  <el-button
+    v-loading.fullscreen.lock="fullscreenLoading"
+    type="primary"
+    @click="openFullScreen1"
+  >
+    As a directive
+  </el-button>
+  <el-button type="primary" @click="openFullScreen2"> As a service </el-button>
 </template>
 
-<style scoped></style>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElLoading } from 'element-plus'
+
+const fullscreenLoading = ref(false)
+const openFullScreen1 = () => {
+  fullscreenLoading.value = true
+  setTimeout(() => {
+    fullscreenLoading.value = false
+  }, 2000)
+}
+
+const openFullScreen2 = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+  setTimeout(() => {
+    loading.close()
+  }, 2000)
+}
+</script>