Fetch APIとAbortControllerの検出

Fetch API検出

Fetch APIはXMLHttpRequestのモダンな代替であり、ブラウザからHTTPリクエストを行うためのクリーンなPromiseベースのインターフェースを提供します。

検出

const hasFetch = typeof fetch !== 'undefined';
const hasAbortController = typeof AbortController !== 'undefined';
const hasRequest = typeof Request !== 'undefined';
const hasResponse = typeof Response !== 'undefined';

基本的な使い方

async function fetchData(url) {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    },
  });
  if (!response.ok) {
    throw new Error(\`HTTP \${response.status}\`);
  }
  return response.json();
}

リクエストのキャンセル

function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(
    () => controller.abort(),
    timeout
  );

  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timeoutId));
}

ストリーミングレスポンス

async function fetchStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    processChunk(value);
  }
}

Fetch vs XMLHttpRequest

機能	Fetch	XMLHttpRequest
Promiseベース	はい	いいえ
ストリーミング	はい	いいえ
リクエストキャンセル	AbortController	xhr.abort()
アップロード進捗	いいえ（まだ）	はい
Cookie処理	設定可能	自動

認証情報とCORS

• credentials: 'same-origin'（デフォルト）- 同一オリジンのみCookieを送信
• credentials: 'include' - 常にCookieを送信
• mode: 'cors' - CORSヘッダー付きのクロスオリジンリクエストを有効化