feat: 请求取消

1. 记录axios等网络请求取消方法

前端知识/网络相关/请求取消.md

@@ -0,0 +1,99 @@
+# 网络请求取消
+> 此文用于记录网络请求取消相关的知识点
+
+## axios的取消方法
+> [参考文档](https://axios-http.com/zh/docs/cancellation)
+
+### 新版本取消方法
+> v0.22.0开始
+> 基于fetch API
+
+#d 方法讲解
+新版本的`axios`支持以`fetch API`的方式
+`AbortController` 来取消请求
+
+#e 取消案例
+```js
+const controller = new AbortController();
+axios.get('/foo/bar', {
+   signal: controller.signal
+}).then(function(response) {
+   console.log(response);
+   
+});
+
+// 取消请求
+controller.abort();
+```
+
+### 旧版本取消方法
+> v0.22.0 开始被弃用
+> 基于被撤销 [cancelable promises proposal。](https://github.com/tc39/proposal-cancelable-promises)
+
+#e 使用方法
+```js
+const CancelToken = axios.CancelToken;
+const source = CancelToken.source();
+
+axios.get('/user/12345', {
+  cancelToken: source.token
+}).catch(function (thrown) {
+  if (axios.isCancel(thrown)) {
+    console.log('Request canceled', thrown.message);
+  } else {
+    // 处理错误
+  }
+});
+
+axios.post('/user/12345', {
+  name: 'new name'
+}, {
+  cancelToken: source.token
+})
+
+// 取消请求（message 参数是可选的）
+source.cancel('Operation canceled by the user.');
+```
+
+## 原理讲解
+> [参考文档](https://juejin.cn/post/7284417436752265277?searchId=202411222318162393F5B8210886EEDE6D)
+
+#c 拦截位置
+对于请求的拦截, 可以分为下面三种情况:
+1. 请求开始前进行拦截
+2. 请求途中拦截
+3. 请求完成后进行拦截
+前后的拦截很简单, 只是请求途中的拦截, 需要多点手段
+
+### 请求中拦截
+#d xhr的拦截
+`xhr`请求的拦截可以调用其实例的`about`方法进行取消
+
+#d fetch的拦截
+`fetch`请求的拦截, 可以通过`AbortController`来取消请求
+
+#e 拦截器
+```js
+const controller = new AbortController();
+const { signal } = controller;
+
+fetch("/test", { signal }).then(response => {
+    console.log('请求成功');
+}).catch(err => {
+  if(err.name === "AbortError") {
+		// 请求被手动取消
+	} else {
+    // 处理错误
+  }
+});
+
+setTimeout(() => {
+  // 手动取消请求
+  controller.abort();
+}, 1000)
+
+```
+
+
+
+