ไคลเอ็นต์สำหรับแอปพลิเคชันใน Redux

ในบทเรียนที่ผ่านมาเราเกือบจะทำงานส่วนเซิร์ฟเวอร์สำหรับแอปพลิเคชันของเราเสร็จแล้ว เราจะเพิ่มเติมเล็กน้อยตามความจำเป็นในบทเรียนถัดไป ตอนนี้เราจำเป็นต้องสร้างไคลเอ็นต์สำหรับแอปพลิเคชัน ซึ่งจะส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเราและในโฟลเดอร์ api สร้างไฟล์ client.js เริ่มแรกเราจะเขียนฟังก์ชัน client ซึ่งจะทำงานได้ทั้งสำหรับคำขอ GET และ POST พารามิเตอร์ของมันจะรับเส้นทาง ประเภท และเนื้อหาของคำขอ (ในกรณีของ 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 ให้เพิ่มมันลงใน options พร้อมกับเนื้อหาคำขอในรูปแบบ JSON หากเลือกเมธอด POST:

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 จะรับเส้นทางเป็นพารามิเตอร์และเรียกฟังก์ชัน client ส่งเส้นทางนั้นและประเภทคำขอ GET ไปให้:

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

และ client.post ควรส่งสำหรับ client คือ เส้นทาง ประเภทคำขอ POST และเนื้อหาคำขอ:

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

เพียงเท่านี้ ไคลเอ็นต์เล็กๆ ของเราพร้อมทำงานกับเซิร์ฟเวอร์แล้ว

เปิดแอปพลิเคชันนักเรียนของคุณ สร้างไฟล์ client.js ในโฟลเดอร์ api ของแอปพลิเคชันนั้น หลังจากศึกษาวัสดุบทเรียนแล้ว เขียน (คัดลอก) โค้ดของฟังก์ชัน client และสองเมธอดของมัน client.get และ client.post