axios取消上传

在项目中使用了axios
上传大文件时会有取消的操作
这个时候就需要中断掉xml请求

这里记录一下在axios中的实现方法

import axios from "axios";

//第一次初始化
var CancelToken = axios.CancelToken
var source = CancelToken.source()

var AxiosFile = axios.create({
    baseURL: fileUrl,
    cancelToken: source.token
});

//正常情况下对发送和接收数据的拦截器处理
AxiosFile.interceptors.request.use(
	config => {
        //todo
        return config;
    },
    error => {
        //todo
        return Promise.reject(error);
    }
)
AxiosFile.interceptors.response.use(
    response => {
       //todo
       return response.data
    },
    error => {
        //todo
        return Promise.reject(error)
    }
);


/*
这里需要重点写一下，因为在使用过程中 canceltoken 使用一次后这个axios 好像是被销毁了，之后就不能正常发起请求
因此在调用了 source.cancel() 方法之后，又重新初始化了axios 实例。
*/ 

const cancleUpload = ()=>{
    source.cancel();
    
    //此处向下为重新创建实例
    CancelToken = axios.CancelToken
    source = CancelToken.source()
    
    AxiosFile = axios.create({
        baseURL: fileUrl,
        cancelToken: source.token
    });
    
	AxiosFile.interceptors.request.use(
		config => {
	        //todo
	        return config;
	    },
	    error => {
	        //todo
	        return Promise.reject(error);
	    }
	)
	AxiosFile.interceptors.response.use(
	    response => {
	       //todo
	       return response.data
	    },
	    error => {
	        //todo
	        return Promise.reject(error)
	    }
	);
    
}

export {
    cancleUpload,
}