主要是透過 創建一個對象 const controller = new AbortController();
以及把signal屬性賦值給axios的signal配置項 signal: controller.signal,
,後續調用controller.abort();
這個方法就能在任何地方中斷請求。假定在頁面上有個按鈕能取消請求,那就把controller.abort();
放進按鈕的點擊事件
setTimeout只是在模擬超時的情境,可忽略
if (e?.response?.data) { error.value = e.response.data; }
的意思是說,只有當e?.response?.data存在時,才給他賦值
onMounted(async () => {
loading.value = true;
const controller = new AbortController();
try {
setTimeout(() => {
controller.abort();
}, 500);
const res = await axios.get("/api/notes", {
signal: controller.signal,
});
notes.value = res.data;
} catch (e) {
if (e?.response?.data) {
error.value = e.response.data;
}
} finally {
loading.value = false;
}
});