前端在请求完成前终止此次请求

需求1：上传文件过大时，耗时过久，在上传到50%的时候，用户要取消上传。

需求2：当登录信息失效时阻止其他请求。

以比较常用的请求方法为例

Fetch请求终止

使用 AbortController 构造器

当 fetch 请求 (opens new window) 初始化时，我们将 AbortSignal 作为一个选项传递进入请求的选项对象中（下面的 {signal}）。这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用 AbortController.abort() (opens new window) 去中止它.

let controller;
const url = 'video.mp4';

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', () => {
  if (controller) {
    controller.abort();
    console.log('中止下载');
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log('下载完成', response);
    })
    .catch((err) => {
      console.error(`下载错误：${err.message}`);
    });
}

Axios请求终止

使用 axios.CancelToken Api

const CancelToken = axios.CancelToken
const sourse = CancelToken.source()

// 异常拦截处理器
const errorHandler = (error) => {
  if (axios.isCancel(error)) {
    // 终止
    return new Promise(() => { })
  }
  return Promise.reject(error)
}

request.interceptors.request.use((config) => {
	// config中全局配置 cancelToken
	config.cancelToken = sourse.token
	return config
 },errorHandler)
                                 
request.interceptors.response.use((response) => {
    const { code } = response.data
    // 登录失效
  	if (code === 401) { 
        // 取消正在进行的其他请求
     	sourse.cancel()
    }
},errorHandler)