主要是透過 創建一個對象 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;
  }
});