ชนิดข้อมูล Fetch API และเจเนอริกของ Response.json()

บทนำ

fetch พื้นฐาน

async function getText() {
  const res = await fetch("/hello.txt");
  const text = await res.text();
  console.log(text);
}

ค่าเริ่มต้นของ res.json()

async function getData() {
  const res = await fetch("/data.json");
  const data = await res.json();
  console.log(data);
}

res.json<T>()

interface User { id: number; name: string }

async function getUser() {
  const res = await fetch("/user.json");
  const user = await res.json<User>();
  console.log(user.id, user.name);
}

ความปลอดภัยด้านชนิดข้อมูล

interface Product { id: number; price: number }

async function getProduct() {
  const res = await fetch("/product.json");
  const p = await res.json<Product>();
  // console.log(p.unknown); // Error: unknown does not exist
}

การกำหนดชนิดข้อมูลให้แถวลำดับ

interface Todo { id: number; done: boolean }

async function getTodos() {
  const res = await fetch("/todos.json");
  const todos = await res.json<Todo[]>();
  todos.forEach(t => console.log(t.id, t.done));
}

การตรวจสอบ json<T>()

สรุปทบทวน