Klien untuk Aplikasi di Redux

Pada pertemuan sebelumnya, kita hampir menyelesaikan bagian server untuk aplikasi kita, kita akan melengkapinya sedikit lagi sesuai kebutuhan pada pelajaran berikutnya. Sekarang kita perlu membuat klien untuk aplikasi, yang akan mengirimkan permintaan HTTP ke server.

Mari buka aplikasi produk kita dan pada folder api buatlah file client.js. Pertama-tama kita akan menulis fungsi client itu sendiri, yang akan bekerja untuk permintaan GET maupun POST. Parameternya akan menerima path, jenis, dan body permintaan (dalam kasus POST), jika ada:

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

Selanjutnya kita perlu membentuk objek options, di mana kita akan meneruskan berbagai informasi untuk permintaan. Ini akan menjadi jenis permintaan dan header:

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

Properti body bersifat opsional bagi kita, kita harus menyertakannya jika kita memiliki permintaan POST. Untuk itu, di dalam client setelah kode untuk objek options tambahkan ke dalam options dengan body permintaan dalam format JSON, jika metode POST dipilih:

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

Kemudian di bawah kode client, atur blok try, pada baris pertama di dalamnya dengan menggunakan fetch dapatkan respons dari server. Dalam kasus kegagalan, kita secara tradisional akan mengembalikan promise dengan kesalahan:

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

Sekarang mari kita lengkapi kode di dalam blok try. Setelah mendapatkan response, kita perlu memprosesnya. Ekstrak data darinya dalam JSON dan jika status respons memberi sinyal bahwa semuanya baik-baik saja, maka kembalikan objek dengan data dan informasi: status, header, 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)
}

Kode untuk fungsi client sudah siap, tinggal menulis bagaimana metode GET dan POST kita akan bekerja saat dipanggil. Mari tulis kode untuk mereka setelah fungsi client. Metode client.get akan menerima parameter path dan memanggil fungsi client, menyampaikan path tersebut dan jenis permintaan GET:

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

Dan client.post harus menyampaikan untuk client path, jenis permintaan POST, dan body permintaan:

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

Selesai, klien kecil kita sudah siap untuk bekerja dengan server.

Buka aplikasi Anda dengan data mahasiswa, buatlah di dalamnya pada folder api file client.js. Setelah mempelajari materi pelajaran, tulis (salin) kode fungsi client dan kedua metodenya client.get dan client.post.