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,
}