محولات API وبنية واجهة صريحة

async function loadCourse(fetchLike) {
  const response = await fetchLike();
  if (!response.ok) throw new Error("course HTTP failure");
  const data = await response.json();
  if (typeof data.title !== "string" || !Number.isInteger(data.seats) || data.seats < 0) {
    throw new TypeError("invalid course shape");
  }
  return { title: data.title, seats: data.seats };
}
const course = await loadCourse(async () => ({
  ok: true, json: async () => ({ title: "DOM", seats: 2 })
}));
console.log(course.title, course.seats);

DOM 2

توفر الاستجابة المحقونة بيانات معلومة، وتبقى حالة HTTP وفك JSON وفحص البنية خطوات منفصلة.

function transition(state, event) {
  if (event.type === "load") return { status: "loading", request: event.id };
  if (event.type === "success" && state.status === "loading" && state.request === event.id) {
    return { status: "ready", data: event.data };
  }
  return state;
}
let state = transition({ status: "idle" }, { type: "load", id: 2 });
state = transition(state, { type: "success", id: 1, data: "old" });
console.log(state.status);
state = transition(state, { type: "success", id: 2, data: "DOM" });
console.log(state.status, state.data);

loading
ready DOM

يتجاهل القديم بلا عرض وينتج الحالي حالة جاهزية غير مبهمة.