axios封装 手动取消接口请求

对于一些接口loading很久，用户想手动终止请求的需求，
并为了节约性能，当路由切换时，cancel掉还没有结束的接口

1.创建clearHttpRequest.js文件

文件路径：src/mixins/clearHttpRequest.js
文件内容：

export let httpRequestList = [];

export const clearHttpRequestingList = () => {
    if (httpRequestList.length > 0) {
        httpRequestList.forEach((item) => {
            item('interrupt')
        })
        httpRequestList = []
    }
}

2.封装的axios文件中使用

import axios from 'axios'
const { CancelToken } = axios;
import { httpRequestList } from '../mixins/clearHttpRequest';

  // axios拦截器
instance.interceptors.request.use(config => {
     ....
	config['cancelToken'] = new CancelToken(function executor(cancel) {
	  httpRequestList.push(cancel) //存储cancle      
	})
	....
    return config
  }, error => {
    if (params.loading) Spin.hide()
    return error
})

 instance.interceptors.response.use(res => {
 
   }, error => {
    if (error.message === 'interrupt') {
      console.log('请求中断');
      return Promise.reject(error.request);
    }
   ...
  })

  return instance(params)
}

3.vue文件中引入

1.import { clearHttpRequestingList } from '../../../mixins/clearHttpRequest.js'
2.

data() {
		return {
		       ...
			clearHttpRequestingList:clearHttpRequestingList
		}
	}

3.html中点击触发

<div @click="clearHttpRequestingList" class="cancel-btn">取消请求</div>

以上 手动触发取消接口请求完成 ===============

4. 路由切换使用

路由切换时，取消未完成的接口请求

1.引入：
import { clearHttpRequestingList } from '../mixins/clearHttpRequest'
2.前置守卫使用

// 前置守卫
router.beforeEach((to, form, next) => {
  //在进入另外一个页面前执行clearHttpRequestingList();方法，先将上一页的请求都撤销掉
  clearHttpRequestingList();
  ...
 })