Klien untuk Aplikasi dalam Redux

Dalam pelajaran lepas, kami hampir menyelesaikan kerja dengan bahagian pelayan untuk aplikasi kami, kami akan menambahnya sedikit mengikut keperluan dalam pelajaran seterusnya. Sekarang kami perlu mewujudkan klien untuk aplikasi, yang akan menghantar permintaan HTTP ke pelayan.

Mari buka aplikasi produk kami dan dalam folder api buat fail client.js. Sebagai permulaan, kami akan menulis fungsi client, yang akan berfungsi untuk kedua-dua permintaan GET dan POST. Ia akan menerima laluan, jenis dan badan permintaan (dalam kes POST) sebagai parameter, jika ada:

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

Seterusnya, kami perlu membentuk objek options, di mana kami akan menghantar pelbagai maklumat untuk permintaan. Ini akan menjadi jenis permintaan dan pengepala:

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

Sifat body adalah pilihan bagi kami, kami harus menghantarnya jika ia adalah permintaan POST. Untuk itu, dalam client selepas kod untuk objek options, tambahkannya ke dalam options dengan badan permintaan dalam format JSON, jika kaedah POST dipilih:

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

Kemudian, dalam kod client di bawah, uruskan blok try, di baris pertama yang mana dengan menggunakan fetch kami akan mendapat respons daripada pelayan. Jika gagal, kami secara tradisional akan mengembalikan janji dengan ralat:

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

Sekarang mari kita tambah kod dalam blok try. Selepas mendapat response, kami perlu memprosesnya. Ekstrak data daripadanya dalam JSON dan jika status respons menandakan semuanya baik, maka kembalikan objek dengan data dan maklumat: status, pengepala dan alamat. Jika status bukan 'ok', maka lemparkan pengecualian dengan teks status:

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

Kod untuk fungsi client sudah siap, tinggal hanya menulis bagaimana kaedah GET dan POST kami akan berfungsi apabila dipanggil. Mari tulis kod untuk mereka selepas fungsi client. Kaedah client.get akan menerima laluan sebagai parameter dan memanggil fungsi client, menghantarnya laluan ini dan jenis permintaan GET:

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

Dan client.post harus menghantar untuk client laluan, jenis permintaan POST dan badan permintaan:

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

Itu sahaja, klien kecil kami sudah sedia untuk bekerja dengan pelayan.

Buka aplikasi pelajar anda, buat fail client.js dalam folder api di dalamnya. Setelah mengkaji bahan-bahan pelajaran, tulis (salin) kod fungsi client dan dua kaedahnya client.get dan client.post.