@ablogcms/fetch-client

CSRF トークン（window.csrfToken）を自動付与する fetch ベースの HTTP クライアントと、 アップロード進捗を扱える XHR ベースのアップロード関数を提供するパッケージ。

使い方

import { fetchClient, isFetchError } from '@ablogcms/fetch-client';

try {
  const { data } = await fetchClient.get<MyResponse>(url, { params: { page: 1 } });
} catch (error) {
  if (isFetchError(error)) {
    console.error(error.status, error.statusText);
  }
}

await fetchClient.post(url, formData);

• fetchClient.get(url, config?) / fetchClient.post(url, body?, config?): リクエストを送り、 { data, status, statusText, headers } を返す。config.params はクエリ文字列に変換される。
• FetchError: レスポンスが ok でない場合に throw されるエラー。isFetchError(error) で判別できる。
• isAbortError(error): AbortSignal による中断エラーかどうかを判別する。

import { xhrUpload } from '@ablogcms/fetch-client/xhr-upload';

await xhrUpload(url, formData, {
  onUploadProgress: ({ loaded, total }) => console.log(loaded / total),
});

• xhrUpload(url, formData, options?): XMLHttpRequest でアップロードする。onUploadProgress で 進捗を受け取れる（fetch の Request/Response では進捗イベントが取得できないため XHR を使う）。