在第二次请求的时候，取消第一次请求

问题：有两个tab来回切换，第一个tab的数据请求特别慢，导致切换到第二个tab的时候数据会被第一个的覆盖

方案：

let abortController = null as AbortController | null;

function getList() {
    if (abortController) {
        abortController.abort(); // 取消上一个请求
    }
    abortController = new AbortController();

    tableLoading.value = true;
    tableData.value = [];

　　// 接口请求，传入
    list(
　　　　　{}，
        abortController.signal,
    )
        .then((res) => {
            tableData.value = res.data
            tableLoading.value = false;
        })
        .catch((err) => {
　　　　　　　// 防止第一个请求导致tableLoading为false
            if (err.code !== 'ERR_CANCELED') {
                tableLoading.value = false;
            }
        });
}

// 取消请求
onBeforeUnmount(() => {
    if (abortController) {
        abortController.abort();
    }
});
　　

 

// 在接口中添加 signal 参数

export function list(
    params,
    signal: AbortSignal ,
) {
    return request({
        url: `/api/xxx`,
        method: 'get',
        params,
        signal
    });
}