Async JavaScript

Fetch API คืออะไร

`fetch()` คือ browser API สำหรับส่ง request ไปยัง URL และรับ response กลับมา `fetch()` return Promise จึงใช้กับ `.then()` หรือ `async / await` ได้โดยตรง ใช้บ่อยเมื่อหน้าเว็บต้องโหลดข้อมูลจาก server เช่น รายการสินค้า โปรไฟล์ผู้ใช้ หรือผลการค้นหา

async function loadPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const post = await response.json();
  console.log(post.title);
}

loadPost();

response ไม่ได้แปลว่าสำเร็จเสมอ

`fetch()` จะ reject เมื่อเกิดปัญหา network เช่น ต่อ server ไม่ได้ แต่ถ้า server ตอบกลับเป็น HTTP 404 หรือ 500 โดยทั่วไป Promise ยังถือว่า fulfilled ดังนั้นควรตรวจ `response.ok` ก่อนอ่านข้อมูล ถ้าไม่ ok ให้ throw error เอง

async function loadUser() {
  const response = await fetch("/api/user");

  if (!response.ok) {
    throw new Error("โหลดข้อมูลผู้ใช้ไม่สำเร็จ");
  }

  return response.json();
}

ส่งข้อมูลด้วย fetch

ถ้าต้องการส่งข้อมูลไป server ให้ส่ง option object เป็น argument ที่สอง เช่น `method`, `headers`, และ `body` เมื่อส่ง JSON ต้องแปลง object เป็น string ด้วย `JSON.stringify()` และตั้ง `Content-Type` ให้ server รู้ว่า body เป็น JSON

async function createNote(note) {
  const response = await fetch("/api/notes", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(note),
  });

  if (!response.ok) {
    throw new Error("บันทึก note ไม่สำเร็จ");
  }

  return response.json();
}

รูปแบบที่ใช้บ่อย

Lab 1: ตรวจ response.ok ก่อนอ่าน JSON