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 method ကို ရွေးချယ်ထားပါက JSON format ဖြင့် တောင်းဆိုချက်ကိုယ်ထည်ဖြင့် 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 ဖြင့် အချက်အလက်များကို ထုတ်ယူပြီး အကြောင်းပြန်ချက်၏ status သည် အရာအားလုံးကောင်းမွန်ကြောင်း အချက်ပြပါက၊ အချက်အလက်များနှင့် သတင်းအချက်အလက်များ ပါဝင်သော အရာဝတ္ထုကို ပြန်ပေးပါမည်။ status၊ headers နှင့် url တို့ ဖြစ်ပါသည်။ သို့သော် status သည် 'ok' မဖြစ်ပါက၊ status text ဖြင့် ခြွင်းချက်တစ်ခုကို ပစ်ပါမည်။

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 method များသည် ခေါ်ယူသည့်အခါ မည်သို့အလုပ်လုပ်မည်ကိုသာ ရေးရန် ကျန်နေပါသည်။ client လုပ်ဆောင်ချက်ပြီးနောက် ၎င်းတို့အတွက် ကုဒ်ကို ရေးကြပါစို့။ client.get method သည် လမ်းကြောင်းတစ်ခုအား parameter အဖြစ်လက်ခံပြီး client လုပ်ဆောင်ချက်ကို ခေါ်ယူကာ ထိုလမ်းကြောင်းနှင့် GET တောင်းဆိုချက်အမျိုးအစားကို ပေးပို့ပါမည်။

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

ထို့အပြင် client.post သည် client အတွက် လမ်းကြောင်း၊ POST တောင်းဆိုချက်အမျိုးအစားနှင့် တောင်းဆိုချက်၏ ကိုယ်ထည်ကို ပေးပို့ရန် လိုအပ်ပါသည်။

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

ဤတွင် အရာအားလုံးပြီးဆုံးပါပြီ၊ ကျွန်ုပ်တို့၏ သေးငယ်သော ကလိုင်းယင့်သည် ဆာဗာနှင့် အလုပ်လုပ်ရန် အဆင်သင့်ဖြစ်နေပါပြီ။

သင့်ကျောင်းသားများပါသော အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ၊ ၎င်းတွင်ရှိသော api ဖိုလ်ဒါအတွင်း client.js ဖိုင်ကို ဖန်တီးပါ။ သင်ခန်းစာ၏ ပစ္စည်းများကို လေ့လာပြီးနောက် client လုပ်ဆောင်ချက်နှင့် ၎င်း၏ method နှစ်ခုဖြစ်သော client.get နှင့် client.post တို့၏ ကုဒ်ကို ရေးပါ (ကူးယူပါ)။