axios 取消相同接口的上一次的请求

有些接口的时间跨度太久，导致接口返回时间很长，切换回其他时间想取消上一次的请求，则可以用到axios的cancelToken。(CancelToken已弃用，#Axios推荐用AbortController取代) 代码如下

//index.ts
import type { CancelTokenSource } from 'axios';
import axios from 'axios';

export default defineComponent({
    name: 'component',
    components: {
    },
    props: {},
    setup() {]
        const cancelToken = ref<CancelTokenSource>(); // 添加取消令牌
        onMounted(async () => {
            getStatisticsData();
        });
        
        async function getStatisticsData() {
            statisticsData.value = {};
            statisticsDataLoading.value = true;
            // 取消之前的请求
            if (cancelToken.value) {
                cancelToken.value.cancel('取消之前的请求');
            }

            // 创建新的取消令牌
            cancelToken.value = axios.CancelToken.source();
            const params = getParam({
                areaCode: currentCityCode.value,
            });
            const res: any = await service.getStatisticsData<any>(params, {
                cancelToken: cancelToken.value.token // 传入取消令牌
            });
            if (res?.result?.length) {
                statisticsData.value = res.result[0];
            }
            statisticsDataLoading.value = false;
        }
    }
    
})

service.ts
import type { AxiosRequestConfig } from 'axios';

public getStatisticsData<T>(params: object, config?: AxiosRequestConfig) {
        return this.http.post<T>('/xxxxx', params, { ...config, title: '数据', headers: { 'Content-Type': 'application/json' }});
    }