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 요청인 경우에만 전달해야 합니다. 이를 위해 client 내부에서 options 객체 코드 이후에 POST 메서드가 선택된 경우 JSON 형식의 요청 본문과 함께 options에 추가하겠습니다:

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

그런 다음 client 코드 아래에서 try 블록을 구성하고, 그 첫 번째 줄에서 fetch를 사용하여 서버로부터 응답을 받습니다. 실패할 경우 일반적으로 오류와 함께 프로미스를 반환합니다:

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

이제 try 블록에 코드를 추가해 보겠습니다. response를 받은 후 처리해야 합니다. 여기서 JSON 데이터를 추출하고 응답 상태가 정상임을 나타내면 데이터와 정보(상태, 헤더, 주소)가 포함된 객체를 반환합니다. 상태가 '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 메서드는 매개변수로 경로를 받고 이 경로와 GET 요청 유형을 전달하여 client 함수를 호출합니다:

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

client.post는 client에 경로, POST 요청 유형 및 요청 본문을 전달해야 합니다:

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

여기까지입니다. 우리의 작은 클라이언트가 서버와 작업할 준비가 되었습니다.

학생 애플리케이션을 열고, api 폴더에 client.js 파일을 생성하세요. 수업 자료를 검토한 후 함수 client와 두 메서드 client.get 및 client.post의 코드를 작성(또는 복사)하세요.