Client cho ứng dụng trong Redux

Trong các bài học trước, chúng ta gần như đã hoàn thành phần công việc với phía máy chủ cho ứng dụng của mình, chúng ta sẽ bổ sung thêm một chút khi cần thiết trong các bài học tiếp theo. Bây giờ chúng ta cần tạo client cho ứng dụng, cái mà sẽ gửi các yêu cầu HTTP đến máy chủ.

Hãy mở ứng dụng sản phẩm của chúng ta và trong thư mục api tạo tệp client.js. Đầu tiên, chúng ta sẽ viết hàm client, cái mà sẽ hoạt động cho cả yêu cầu GET và POST. Tham số của nó sẽ nhận đường dẫn, loại và thân yêu cầu (trong trường hợp POST), nếu có:

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

Tiếp theo, chúng ta cần tạo đối tượng options, trong đó chúng ta sẽ truyền các thông tin khác nhau cho yêu cầu. Đó sẽ là loại yêu cầu và các tiêu đề:

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

Thuộc tính body của chúng ta là tùy chọn, chúng ta phải truyền nó nếu chúng ta có yêu cầu POST. Để làm điều này, bên trong client sau mã cho đối tượng options, hãy thêm nó vào options với thân yêu cầu ở định dạng JSON, nếu phương thức POST được chọn:

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

Sau đó, bên dưới trong mã client, hãy tổ chức khối try, trong dòng đầu tiên của nó sử dụng fetch để nhận phản hồi từ máy chủ. Trong trường hợp thất bại, chúng ta thông thường sẽ trả về một promise với lỗi:

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

Bây giờ chúng ta hãy viết tiếp mã trong khối try. Sau khi nhận được response, chúng ta cần xử lý nó. Hãy trích xuất từ nó dữ liệu ở dạng JSON và nếu trạng thái phản hồi báo hiệu cho chúng ta rằng mọi thứ đều ổn, thì trả về một đối tượng với dữ liệu và thông tin: trạng thái, tiêu đề và địa chỉ. Nếu trạng thái không phải là 'ok', thì hãy ném một ngoại lệ với văn bản trạng thái:

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)
}

Mã cho hàm client của chúng ta đã sẵn sàng, chỉ còn lại việc viết cách các phương thức GET và POST của chúng ta sẽ hoạt động khi được gọi. Hãy viết mã cho chúng sau hàm client. Phương thức client.get sẽ nhận đường dẫn làm tham số và gọi hàm client, truyền cho nó đường dẫn này và loại yêu cầu GET:

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

Và client.post phải truyền cho client đường dẫn, loại yêu cầu POST và thân yêu cầu:

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

Trên đây là tất cả, client nhỏ của chúng ta đã sẵn sàng làm việc với máy chủ.

Hãy mở ứng dụng sinh viên của bạn, tạo trong đó trong thư mục api tệp client.js. Sau khi xem xét tài liệu bài học, hãy viết (sao chép) mã hàm client và hai phương thức của nó client.get và client.post.