SOURCE

const app = new Vue({
    el: '#app',
    methods: {
        async handleClick() {
            try {
                const data = await http('https://baidu.com')
                console.log(data)
            } catch(e) {
                console.warn(e)
            }
            
        }
    }
})

let axiosMap = new Map()

const CancelToken = axios.CancelToken

function http(url) {
    let cancel

    axios(url, {
        cancelToken: new CancelToken(function extc(c) {
            cancel = c
        })
    })
    // Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        console.log(axiosMap)
        cancel()
        if(axiosMap.has(config.url)) {
            axiosMap.get(config.url)()
        }
        axiosMap.set(config.url, cancel)
        return config;
    }, function (error) {
        // Do something with request error
        return Promise.reject(error);
    });

    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
        console.log(response)
        axiosMap.delete(response.url)
        return response;
    }, function (error) {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response 
        console.log(error.config)
        axiosMap.delete(error.config.url)
        return Promise.reject(error);
    });


}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>


<div id="app">
    <button @click='handleClick'>getUser</button>
</div>