11

Author: squid-Xu

.vitepress/config.mts

@@ -56,6 +56,10 @@ export default defineConfig({
 				text: 'ECMAScript',
 				link: '/ecmascript/basics/No1',
 			},
+			{
+				text: 'Axios',
+				link: '/axios/basics/No1',
+			},
 			{
 				text: '项目案例',
 				link: '/case/No1',
@@ -304,6 +308,16 @@ export default defineConfig({
 					items: [{ text: '1、Array 支持从尾部查找', link: '/ecmascript/es14/No1' }],
 				},
 			],
+			'/axios/':[
+				{
+					text: '总结',
+					collapsed: false,
+					items: [
+						{ text: '1、axios封装', link: '/axios/basics/No1' },
+						{ text: '2、axios 是否可以取消请求', link: '/axios/basics/No2' },
+					],
+				},
+			],
 			'/case/': [
 				{ text: '家族图谱', link: '/case/No1' },
 				{ text: 'css实现围绕中心进行圆形旋转', link: '/case/No2' },

axios/basics/No1.md

@@ -0,0 +1,68 @@
+# axios封装
+
+
+```js
+import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
+import { TOKEN_KEY } from '@/enums/CacheEnum';
+
+//创建axios实例
+const service = axios.create({
+    baseURL: import.meta.env.VITE_APP_BASE_API,
+    timeout: 60000,
+    headers: { 'Content-Type': 'application/json;charset=utf-8' }
+});
+
+//请求拦截器
+service.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+        const accessToken = localStorage.getItem(TOKEN_KEY);
+        if (accessToken) {
+            config.headers.Authorization = accessToken;
+        }
+        return config;
+    },
+    (error: any) => {
+        return Promise.reject(error);
+    }
+);
+//响应拦截器
+service.interceptors.response.use(
+    (response: AxiosResponse) => {
+        // 检查配置的响应类型是否为二进制类型（'blob' 或 'arraybuffer'）, 如果是，直接返回响应对象
+        if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
+            return response;
+        }
+        const { code, data, msg } = response.data;
+        if (code === 200) {
+            return data;
+        }
+        ElMessage.error(msg || '系统出错');
+        return Promise.reject(new Error(msg || 'Error'));
+    },
+    (error: any) => {
+        // 异常处理
+        if (error.response.data) {
+            const { code, msg } = error.response.data;
+            if (code === 401) {
+                ElNotification({
+                    title: '提示',
+                    message: '您的会话已过期，请重新登录',
+                    type: 'info'
+                });
+                // useUserStoreHook()
+                //     .resetToken()
+                //     .then(() => {
+                //         location.reload();
+                //     });
+            } else {
+                ElMessage.error(msg || '系统出错');
+            }
+        }
+        return Promise.reject(error.message);
+    }
+);
+
+//对外暴露一个service对象
+export default service;
+
+```

axios/basics/No2.md

@@ -0,0 +1,48 @@
+# axios 是否可以取消请求
+
+- **关键词：** 取消请求
+
+> `Axios `可以取消请求。官方文档指出有两种方法可以取消请求，分别是`cancelToken`和`AbortController`，示例代码如下：
+
+- 使用`cancelToken`的方法一：
+
+```js
+const CancelToken = axios.CancelToken;
+const source = CancelToken.source();
+axios.post("/user/12345", { name: "new name" }, { cancelToken: source.token });
+source.cancel("Operation canceled by the user.");
+```
+
+- 使用 `cancelToken`的方法二：
+
+```js
+const CancelToken = axios.CancelToken;
+let cancel;
+axios.get("/user/12345", {
+  cancelToken: new CancelToken(function executor(c) {
+    cancel = c;
+  }),
+});
+cancel();
+```
+
+- 使用`AbortController`：
+
+```js
+const controller = new AbortController();
+axios.get("/foo/bar", { signal: controller.signal }).then(function (response) {
+  //...
+});
+controller.abort();
+
+```
+
+> 通过文档描述和示例代码，可以总结出以下功能点：
+
+- 支持`cancelToken`取消请求，`cancelToken`可以通过工厂函数产生，也可以通过构造函数生成；
+
+- 支持 `Fetch API` 的`AbortController`取消请求；
+
+- 一个`token/signal`可以取消多个请求，一个请求也可同时使用`token/signal`；
+
+- 如果在开始`axios request`之前执行了取消请求，则并不会发出真实的请求。