# 网络请求取消
> 此文用于记录网络请求取消相关的知识点

## 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)

```