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

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

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเราและในโฟลเดอร์ api สร้างไฟล์ client.js เริ่มแรกเราจะเขียนฟังก์ชัน client ซึ่งจะทำงานได้ทั้งสำหรับคำขอ GET และ POST พารามิเตอร์ของมันจะรับเส้นทาง ประเภท และเนื้อหาของคำขอ (ในกรณีของ POST) หากมี:

api/client.jsexport async function client(url, method, body = {}) {}

ถัดไปเราจำเป็นต้องสร้างออบเจ็กต์ options ซึ่งเราจะส่งข้อมูลต่างๆ สำหรับคำขอ นี่จะเป็นประเภทคำขอและส่วนหัว:

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

คุณสมบัติ body ของเราเป็นตัวเลือก เราควรส่งมันเมื่อเรามีคำขอ POST สำหรับสิ่งนี้ ภายใน client หลังจากโค้ดสำหรับออบเจ็กต์ options ให้เพิ่มมันลงใน options พร้อมกับเนื้อหาคำขอในรูปแบบ JSON หากเลือกเมธอด POST:

api/client.jsif (method === 'POST') {
  options.body = JSON.stringify(body)
}

จากนั้นด้านล่างในโค้ด client จัดระเบียบบล็อก try ในบรรทัดแรกโดยใช้ fetch เพื่อรับการตอบกลับจากเซิร์ฟเวอร์ ในกรณีที่ล้มเหลว เราจะส่งกลับพรอมิสที่มีข้อผิดพลาดตามธรรมเนียม:

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

ตอนนี้มาเขียนโค้ดเพิ่มเติมในบล็อก try หลังจากได้รับ response เราจำเป็นต้องประมวลผลมัน แยกข้อมูลออกมาในรูปแบบ JSON และหากสถานะการตอบกลับบอกเราว่าทุกอย่างเรียบร้อยดี ให้ส่งคืนออบเจ็กต์ที่มีข้อมูลและข้อมูล: สถานะ ส่วนหัว และที่อยู่ หากสถานะไม่ใช่ 'ok' ให้โยนข้อยกเว้นพร้อมข้อความสถานะ:

api/client.jstry {
  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 ไปให้:

api/client.jsclient.get = (url) => client(url, 'GET')

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

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

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