JavaScript үндэс / Fetch API

Fetch API

Fetch API нь хөтчид суурилагдсан бэлэн хэрэгсэл бөгөөд серверт хүсэлт (request) илгээж, хариу (response) авахад хэрэглэнэ. Нэмэлт сан суулгах шаардлагагүй — хөтөч дотор байна. Өмнөх хичээлд сурсан async/await-тэй хамт ашиглана.

Анхны fetch

fetch() нь URL авч, Promise буцаана. await ашиглан хариуг хүлээнэ:

javascript
async function мэдээлэл авах() {
  const хариу = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const өгөгдөл = await хариу.json();
  console.log(өгөгдөл);
}

мэдээлэл авах();

Хоёр алхам байгааг анзаарна уу: эхлээд хариу объект ирнэ, дараа нь .json() ашиглан дотроос өгөгдлийг задална.

Хариуг шалгах

Сервер амжилтгүй хариу буцааж болно — 404 (олдсонгүй), 500 (серверийн алдаа) гэх мэт. fetch нь эдгээрт алдаа гаргадаггүй тул хариу.ok-г өөрөө шалгах хэрэгтэй:

javascript
async function хэрэглэгч авах(id) {
  try {
    const хариу = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);

    if (!хариу.ok) {
      throw new Error(`Хэрэглэгч олдсонгүй. Код: ${хариу.status}`);
    }

    const хэрэглэгч = await хариу.json();
    console.log(хэрэглэгч.name);
  } catch (алдаа) {
    console.log("Алдаа:", алдаа.message);
  }
}

хэрэглэгч авах(1);  // Leanne Graham
хэрэглэгч авах(999); // Хэрэглэгч олдсонгүй. Код: 404

POST хүсэлт — өгөгдөл илгээх

fetch-ийн хоёр дахь аргумент options объект бөгөөд method, header, body тохируулна. Өгөгдөл илгээхдээ POST method ашиглана:

javascript
async function нийтлэл үүсгэх(гарчиг, агуулга) {
  try {
    const хариу = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: гарчиг,
        body: агуулга,
        userId: 1
      })
    });

    const шинэ нийтлэл = await хариу.json();
    console.log("Үүсгэсэн ID:", шинэ нийтлэл.id);
  } catch (алдаа) {
    console.log("Алдаа:", алдаа.message);
  }
}

нийтлэл үүсгэх("Миний анхны нийтлэл", "Агуулга энд байна...");

JSON.stringify() нь JavaScript объектийг JSON текст болгон хөрвүүлнэ — сервер текст хэлбэрээр хүлээн авдаг.

HTTP методууд

Вэбийн API-тай ажиллахад дөрвөн үндсэн method хэрэглэнэ:

javascript
// GET  — өгөгдөл унших (анхны тохиргоо)
await fetch("/api/нийтлэлүүд");

// POST — шинэ өгөгдөл үүсгэх
await fetch("/api/нийтлэлүүд", { method: "POST", body: ... });

// PUT  — өгөгдлийг бүрэн солих
await fetch("/api/нийтлэлүүд/1", { method: "PUT", body: ... });

// DELETE — өгөгдөл устгах
await fetch("/api/нийтлэлүүд/1", { method: "DELETE" });

Loading болон алдааны төлөв

Жинхэнэ аппликейшнд хэрэглэгчид fetch явагдаж байгааг мэдэгдэх хэрэгтэй:

javascript
async function нийтлэлүүд авах() {
  let ачааллаж = true;
  console.log("Ачааллаж байна...");

  try {
    const хариу = await fetch("https://jsonplaceholder.typicode.com/posts");
    const нийтлэлүүд = await хариу.json();
    console.log(`${нийтлэлүүд.length} нийтлэл олдлоо`);
  } catch (алдаа) {
    console.log("Сервертэй холбогдож чадсангүй:", алдаа.message);
  } finally {
    ачааллаж = false;
    console.log("Ачааллалт дууслаа");
  }
}

нийтлэлүүд авах();

try/catch/finally хослол нь fetch-тэй хамт стандарт загвар болдог — амжилт, алдаа, дуусгавар гурвыг зохицуулна.

Дараагийн хичээлд:

DOM гэж юу болох, JavaScript хэрхэн HTML-тэй харилцдагийг үзнэ. Хөтчийн хуудасны элементүүдийг JavaScript-ээр удирдаж эхлэх — энэ л вэб программчлалын зүрх юм.

← Өмнөх хичээлAsync/AwaitДараах хичээл →DOM гэж юу вэ?