在第二次請求的時候,取消第一次請求
問題:有兩個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
});
}
浙公網安備 33010602011771號