Reduxアプリケーションのクライアント

前回のレッスンで、私たちはアプリケーションのサーバー側の作業をほぼ完了しました。 次のレッスンで必要に応じて少し追加します。 これから、サーバーにHTTPリクエストを送信するアプリケーション用のクライアントを作成する必要があります。

商品管理アプリケーションを開き、 apiフォルダ内にファイルclient.jsを作成します。 まず、GETリクエストとPOSTリクエストの両方に対応する client関数自体を記述します。 パラメータとして、パス、メソッドタイプ、および（POSTの場合の）リクエストボディ（存在する場合）を受け取ります：

api/client.jsexport async function client(url, method, body = {}) {}

次に、リクエストに関する様々な情報を渡すための optionsオブジェクトを構築する必要があります。 これにはリクエストメソッドとヘッダーが含まれます：

api/client.jsexport async function client(url, method, body = {}) {
  const options = {
    method: method,
    headers: {
      'Content-Type': 'application/json',
    },
  }
}

bodyプロパティはオプションです。POSTリクエストの場合にのみ渡す必要があります。 そのために、optionsオブジェクトのコードの後に、client関数内で、 メソッドがPOSTの場合にJSON形式のリクエストボディを含めてoptionsに追加します：

api/client.jsif (method === 'POST') {
  options.body = JSON.stringify(body)
}

次に、clientのコードの下にtryブロックを構築します。 その最初の行でfetchを使用してサーバーからの応答を取得します。 失敗した場合は、従来通りエラーを含むPromiseを返します：

api/client.jslet data
try {
  const response = await window.fetch(url, options)
} catch (err) {
  return Promise.reject(err.message ? err.message : data)
}

では、tryブロック内のコードを完成させましょう。 responseを取得した後、それを処理する必要があります。 そこからJSONデータを抽出し、応答ステータスが正常であることを示している場合は、 データと情報（ステータス、ヘッダー、URL）を含むオブジェクトを返します。 ステータスが'ok'でない場合は、ステータステキストを含む例外をスローします：

api/client.jstry {
  const response = await window.fetch(url, options)
  data = await response.json()
  if (response.ok) {
    return {
      status: response.status,
      headers: response.headers,
      url: response.url,
      data,
    }
  }
  throw new Error(response.statusText)
}

client関数のコードはこれで完了です。あとは、 呼び出されたときにGETメソッドとPOSTメソッドがどのように動作するかを記述するだけです。 client関数の後にそれらのコードを書きましょう。 client.getメソッドはパスをパラメータとして受け取り、 client関数を呼び出して、そのパスとリクエストタイプGETを渡します：

api/client.jsclient.get = (url) => client(url, 'GET')

一方、client.postは、clientに対して、 パス、リクエストタイプPOST、およびリクエストボディを渡す必要があります：

api/client.jsclient.post = (url, body) => client(url, 'POST', body)

以上です。私たちの小さなクライアントはサーバーとの通信準備が整いました。