fetch 逾時怎麼處理：用 AbortSignal.timeout() 取消慢請求

1
async function loadProfile() {
2
  try {
3
    const response = await fetch('/api/profile', {
4
      signal: AbortSignal.timeout(8_000),
5
    });
6

7
    if (!response.ok) {
8
      throw new Error(`HTTP ${response.status}`);
9
    }
10

11
    return await response.json();
12
  } catch (error) {
13
    if (error.name === 'TimeoutError') {
14
      throw new Error('讀取逾時，請稍後再試');
15
    }
16
    throw error;
17
  }
18
}

1
let activeController;
2

3
async function search(query) {
4
  activeController?.abort();
5
  activeController = new AbortController();
6

7
  const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
8
    signal: activeController.signal,
9
  });
10

11
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
12
  return response.json();
13
}

1
let activeController;
2

3
async function search(query) {
4
  activeController?.abort();
5

6
  const controller = new AbortController();
7
  const timeoutSignal = AbortSignal.timeout(8_000);
8
  activeController = controller;
9
  const signal = AbortSignal.any([controller.signal, timeoutSignal]);
10

11
  try {
12
    const response = await fetch(
13
      '/api/search?q=' + encodeURIComponent(query),
14
      { signal },
15
    );
16

17
    if (!response.ok) throw new Error('HTTP ' + response.status);
18
    return await response.json();
19
  } catch (error) {
20
    if (signal.aborted && signal.reason === timeoutSignal.reason) {
21
      throw new Error('搜尋逾時，請縮小關鍵字或稍後再試');
22
    }
23

24
    if (signal.aborted && signal.reason === controller.signal.reason) {
25
      return null;
26
    }
27

28
    throw error;
29
  } finally {
30
    if (activeController === controller) {
31
      activeController = undefined;
32
    }
33
  }
34
}

1
import assert from 'node:assert/strict';
2
import http from 'node:http';
3

4
const server = http.createServer((request, response) => {
5
  response.writeHead(200, { 'Content-Type': 'application/json' });
6
  response.write('{"ready":');
7
  const timer = setTimeout(() => response.end('true}'), 1_000);
8
  response.on('close', () => clearTimeout(timer));
9
});
10
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
11
const url = `http://127.0.0.1:${server.address().port}/`;
12

13
try {
14
  const signal = AbortSignal.timeout(500);
15
  const response = await fetch(url, { signal });
16
  assert.equal(response.status, 200);
17
  // headers 已收到，但本文尚未完整下載。
18
  await assert.rejects(response.json(), { name: 'TimeoutError' });
19
  assert.equal(signal.reason.name, 'TimeoutError');
20

21
  // 已中止的 signal 無法重新開始；重試要建立新 signal。
22
  await assert.rejects(fetch(url, { signal }), { name: 'TimeoutError' });
23

24
  const manual = new AbortController();
25
  const deadline = new AbortController();
26
  const combined = AbortSignal.any([manual.signal, deadline.signal]);
27
  manual.abort();
28
  deadline.abort(new DOMException('late deadline', 'TimeoutError'));
29
  assert.equal(combined.reason, manual.signal.reason);
30
  assert.equal(deadline.signal.aborted, true);
31
  console.log('fetch timeout checks passed');
32
} finally {
33
  server.closeAllConnections();
34
  await new Promise((resolve) => server.close(resolve));
35
}