perf: 新增请求示例

src/api/login/types.ts

@@ -1,9 +1,9 @@
-export type UserLoginType = {
+export interface UserLoginType {
   username: string
   password: string
 }
 
-export type UserType = {
+export interface UserType {
   username: string
   password: string
   role: string

src/api/request/index.ts

@@ -0,0 +1,32 @@
+import request from '@/config/axios'
+import { RequestResponse } from './types'
+
+export const request1 = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/1'
+  })
+}
+
+export const request2 = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/2'
+  })
+}
+
+export const request3 = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/3'
+  })
+}
+
+export const request4 = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/4'
+  })
+}
+
+export const request5 = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/5'
+  })
+}

src/api/request/types.ts

@@ -0,0 +1,3 @@
+export interface RequestResponse {
+  data: string
+}

src/config/axios/config.ts

@@ -82,13 +82,16 @@ const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
 }
 
 const defaultResponseInterceptors = (response: AxiosResponse<any>) => {
+  if ((response as any).code === 'ERR_CANCELED') {
+    return Promise.reject(response)
+  }
   if (response?.config?.responseType === 'blob') {
     // 如果是文件流，直接过
     return response
   } else if (response.data.code === config.code) {
     return response.data
   } else {
-    ElMessage.error(response.data.message)
+    ElMessage.error((response as any).message)
   }
 }
 ;(error: AxiosError) => {

src/locales/en.ts

@@ -175,7 +175,8 @@ export default {
     function: 'Function',
     multipleTabs: 'Multiple tabs',
     details: 'Details',
-    iconPicker: 'Icon picker'
+    iconPicker: 'Icon picker',
+    request: 'Request'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'

src/locales/zh-CN.ts

@@ -173,7 +173,8 @@ export default {
     function: '功能',
     multipleTabs: '多开标签页',
     details: '详情页',
-    iconPicker: '图标选择器'
+    iconPicker: '图标选择器',
+    request: '请求'
   },
   permission: {
     hasPermission: '请设置操作权限值'

src/router/index.ts

@@ -358,6 +358,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           canTo: true,
           activeMenu: '/function/multiple-tabs'
         }
+      },
+      {
+        path: 'request',
+        component: () => import('@/views/Function/Request.vue'),
+        name: 'Request',
+        meta: {
+          title: t('router.request')
+        }
       }
     ]
   },

src/views/Function/MultipleTabsDemo2.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { ContentWrap } from '@/components/ContentWrap'
-import { ElInput } from 'element-plus'
-import { ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useTagsView } from '@/hooks/web/useTagsView'
-
-const { setTitle } = useTagsView()
-
-const { query } = useRoute()
-
-const val = ref(query.id as string)
-
-setTitle(`详情页query-${val.value}`)
-</script>
-
-<template>
-  <ContentWrap> 获取参数： <ElInput v-model="val" /> </ContentWrap>
-</template>

src/views/Function/Request.vue

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElButton } from 'element-plus'
+import { request1, request2, request3, request4, request5 } from '@/api/request'
+import { ref } from 'vue'
+import request from '@/config/axios'
+
+const { t } = useI18n()
+
+const pending = ref<Set<string>>(new Set())
+
+const getRequest1 = async () => {
+  if (pending.value.has('/request/1')) {
+    return
+  }
+  try {
+    pending.value.add('/request/1')
+    const res = await request1()
+    console.log('【res】：', res)
+  } catch (error) {
+    console.log('【error】：', error)
+  }
+}
+
+const getRequest2 = async () => {
+  if (pending.value.has('/request/2')) {
+    return
+  }
+  try {
+    pending.value.add('/request/2')
+    const res = await request2()
+    console.log('【res】：', res)
+  } catch (error) {
+    console.log('【error】：', error)
+  }
+}
+
+const getRequest3 = async () => {
+  if (pending.value.has('/request/3')) {
+    return
+  }
+  try {
+    pending.value.add('/request/3')
+    const res = await request3()
+    console.log('【res】：', res)
+  } catch (error) {
+    console.log('【error】：', error)
+  }
+}
+
+const getRequest4 = async () => {
+  if (pending.value.has('/request/4')) {
+    return
+  }
+  try {
+    pending.value.add('/request/4')
+    const res = await request4()
+    console.log('【res】：', res)
+  } catch (error) {
+    console.log('【error】：', error)
+  }
+}
+
+const getRequest5 = async () => {
+  if (pending.value.has('/request/5')) {
+    return
+  }
+  try {
+    pending.value.add('/request/5')
+    const res = await request5()
+    console.log('【res】：', res)
+  } catch (error) {
+    console.log('【error】：', error)
+  }
+}
+
+const getAll = () => {
+  getRequest1()
+  getRequest2()
+  getRequest3()
+  getRequest4()
+  getRequest5()
+}
+
+const cancelAll = () => {
+  request.cancelAllRequest()
+  pending.value.clear()
+}
+
+// set转数组
+const setToArray = (set: Set<string>) => {
+  const arr: string[] = []
+  set.forEach((item) => {
+    arr.push(item)
+  })
+  return arr
+}
+
+const clickRequest1 = () => {
+  if (pending.value.has('/request/1')) {
+    request.cancelRequest('/request/1')
+    pending.value.delete('/request/1')
+    return
+  }
+  getRequest1()
+}
+
+const clickRequest2 = () => {
+  if (pending.value.has('/request/2')) {
+    request.cancelRequest('/request/2')
+    pending.value.delete('/request/2')
+    return
+  }
+  getRequest2()
+}
+
+const clickRequest3 = () => {
+  if (pending.value.has('/request/3')) {
+    request.cancelRequest('/request/3')
+    pending.value.delete('/request/3')
+    return
+  }
+  getRequest3()
+}
+
+const clickRequest4 = () => {
+  if (pending.value.has('/request/4')) {
+    request.cancelRequest('/request/4')
+    pending.value.delete('/request/4')
+    return
+  }
+  getRequest4()
+}
+
+const clickRequest5 = () => {
+  if (pending.value.has('/request/5')) {
+    request.cancelRequest('/request/5')
+    pending.value.delete('/request/5')
+    return
+  }
+  getRequest5()
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('router.request')">
+    <p>正在请求的接口：{{ setToArray(pending) }}</p>
+    <ElButton type="primary" @click="clickRequest1">请求/取消request1</ElButton>
+    <ElButton type="primary" @click="clickRequest2">请求/取消request2</ElButton>
+    <ElButton type="primary" @click="clickRequest3">请求/取消request3</ElButton>
+    <ElButton type="primary" @click="clickRequest4">请求/取消request4</ElButton>
+    <ElButton type="primary" @click="clickRequest5">请求/取消request5</ElButton>
+    <ElButton type="primary" @click="getAll">发送五个请求</ElButton>
+    <ElButton type="primary" @click="cancelAll">关闭所有请求</ElButton>
+  </ContentWrap>
+</template>