Fetch APIを使ったGET, POSTテンプレート

Fetch APIを利用してGET, POST通信する際にコピペで利用できるようにメモ
(TypeScript, json responseを想定)
any型については臨機応変に指定しましょう。

fetch本体

デフォルトのmethodはGETとして、GETの場合は URLSearchParams() でendpointにqueryパラメータを、POSTの場合は bodyパラメータにJSON.stringify()したオブジェクトを付与します。

const api = async (url: string, method: string = 'GET', params?: any): Promise<any> => {
  let endpoint = url;
  if (method === 'GET') {
    endpoint = `${endpoint}?${new URLSearchParams(params)}`
  }

  return await fetch(endpoint, {
    method,
    body: method === 'POST' ? JSON.stringify(params) : null,
    headers: {
      accept: 'application/json',
    },
  });
}

GET呼び出し元

export const getData = async (page: number = 1, pageSize: number = 50, data?: any): Promise<any> => {
  const response = await api(
    'https://httpbin.org/',
    'GET',  // <- optional
    { page, pageSize, data }
  );

  return response.json();
}

POST呼び出し元

export const postData = async (data: any): Promise<any> => {
  const response = await api(
    'https://httpbin.org',
    'POST',
    data
  );

  return response.json();
}

Related Posts