使用 Fetch 和 async/await 語法發送 HTTP 請求

Others
,

做法

使用 async/await 的方式，有順序性地等待 Fetch 回應。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
async function fetchData(url, defer) {
  // 使用 await 語法取得 response
  const response = await fetch(url);

  // 模擬回應時間
  await (() => new Promise((resolve) => setTimeout(() => resolve(), defer)))();

  // 使用 await 語法取得 data
  return await response.json();
}

(async () => {
  // 等待第一個請求回應，耗時 1 秒
  console.log(await fetchData('url_1', 1000));

  // 等待第二個請求回應，耗時 0.5 秒
  console.log(await fetchData('url_2', 500));

  // 等待第三個請求回應，耗時 0 秒
  console.log(await fetchData('url_3', 0));
})();

參考資料