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

网络请求取消

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

axios的取消方法

参考文档

新版本取消方法

v0.22.0开始 基于fetch API

#d 方法讲解 新版本的axios支持以fetch API的方式 AbortController 来取消请求

#e 取消案例

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。

#e 使用方法

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.');

原理讲解

参考文档

#c 拦截位置 对于请求的拦截, 可以分为下面三种情况:

1. 请求开始前进行拦截
2. 请求途中拦截
3. 请求完成后进行拦截 前后的拦截很简单, 只是请求途中的拦截, 需要多点手段

请求中拦截

#d xhr的拦截 xhr请求的拦截可以调用其实例的about方法进行取消

#d fetch的拦截 fetch请求的拦截, 可以通过AbortController来取消请求

#e 拦截器

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)