前端發送請求到後端且尚未回傳時，觸發後端取消執行

前端

====

const 查詢Controller = ref<AbortController | null>(null);

const 查詢 = () => {

    // 取消上一個尚未完成的 request

    查詢Controller.value?.abort();

    const controller = new AbortController();

    查詢Controller.value = controller;

    busy.value = true;

    axios.get(process.env.BASE_URL + 'api/xxx', { params: {  }, signal: controller.signal, })

        .then(function (response) {

           //...

        }).finally(() => {

            if (查詢Controller.value === controller) {

                查詢Controller.value = null;

                busy.value = false;

            }

        });

}

onUnmounted(() => {

    查詢Controller.value?.abort();

});

後端

====

[HttpGet("[action]")]

public async Task<IActionResult> xxx(CancellationToken ct)

{

        ct.ThrowIfCancellationRequested();

var aaa=await _context1.xxx.Select(a => new {  }).ToListAsync(ct);

foreach (var 待辦工項 in 待辦工項s)

{

ct.ThrowIfCancellationRequested();

//...

}

//...

}