fetchでタイムアウト処理を実装したサンプル (10000ms版)

<button onclick="getProductJSON()">getProductJSON()</button>
<pre id="result"></pre>

async function getProductJSON() {
  const controller = new AbortController()
  const result = document.getElementById('result')
  result.textContent = 'loading...'
  await setTimeout(() => controller.abort(), 10000)

  try {
    const res = await fetch(`https://dummyjson.com/products/1`, {
      signal: controller.signal
    })
    const json = await res.json()
    await new Promise(p => setTimeout(p, 3000))

    if (res.ok) {
      result.innerHTML = JSON.stringify(json, null, '  ')
    } else {
      result.textContent = json
    }
  } catch(e) {
    if (e.name === 'AbortError') {
      result.textContent = 'タイムアウトエラー'
    } else {
      result.textContent = 'ネットワークエラー'
    }
  }
}

元記事を表示する