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

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

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

export async function client(url, method, body = {}) {}

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

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

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

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

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

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

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

try {
	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を渡します：

client.get = (url) => client(url, 'GET')

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

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

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

学生管理アプリケーションを開き、そのapiフォルダ内にファイルclient.jsを作成してください。レッスンの教材を確認した上で、（コピーして）client関数とその2つのメソッド client.getおよびclient.postのコードを記述してください。