Asinxron Fetch API

Fetch API JavaScript’ga veb-serverdan resurslarni yuklab olish imkonini beradi.

U matnli fayllarni, JSON ma’lumotlarini, rasmlarni va boshqa ko‘plab turdagi resurslarni yuklash uchun ishlatilishi mumkin.

Yuklab olish asinxron.

JavaScript server javobini kutayotganda ishlashni davom ettirishi mumkin.

fetch() usuli Response obyektiga hal qiluvchi Promise qaytaradi.

Matn faylini olish

fetch()’dan eng oddiy foydalanish — matn faylini yuklab olish.

Misol

Code:

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(await response.text());
}

// Call the async function
loadText("demo.txt");

Text file:

<p>The Fetch API interface allows web browser to make HTTP requests to web servers.</p> <p>If you use the XMLHttpRequest Object, Fetch can do the same in a simpler way.</p>

O‘zingiz sinab ko‘ring »

Response obyekti

fetch() Response obyektiga resolve bo‘ladigan Promise qaytaradi.

Misol

Natija — Response obyekti.

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response);
}

O‘zingiz sinab ko‘ring »

Response obyekti server javobi haqidagi ma’lumotlarni o‘z ichiga oladi.

Property / Method	Tavsif
`ok`	So‘rov muvaffaqiyatli bo‘lsa, true.
`status`	HTTP holat kodi.
`statusText`	HTTP holat xabari.
`text()`	Javobni matn sifatida o‘qiydi.
`json()`	Javobni JSON sifatida o‘qiydi.
`blob()`	Javobni ikkilik ma’lumot sifatida o‘qiydi.
`bytes()`	Javobni bayt sifatida o‘qiydi.
`arrayBuffer()`	Javobni ArrayBuffer sifatida o‘qiydi

ok xususiyati

Misol

response.ok qiymati true bo‘lishi kerak.

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response.ok);
}

O‘zingiz sinab ko‘ring »

status xususiyati

Misol

response.status qiymati 200 bo‘lishi kerak.

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response.status);
}

O‘zingiz sinab ko‘ring »

url xususiyati

Misol

// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response.url);
}

O‘zingiz sinab ko‘ring »

JSON’ni olish

json() metodi JSON javobini JavaScript obyektiga aylantiradi.

Misol

async function loadCustomer() {
  const response = await fetch("customer.json");
  const customer = await response.json();
  myDisplayer(customer.name);
}

// Call the async function
loadCustomer();

O‘zingiz sinab ko‘ring »

Bir nechta faylni yuklash

Bir-biriga bog‘liq bo‘lmagan yuklashlar parallel bajarilishi mumkin.

Misol

// Async function to download files
async function loadData() {
  const [customerResponse, productsResponse, newsResponse] = await Promise.all([
    fetch("customer.json"),
    fetch("products.json"),
    fetch("news.json")
  ]);
  const customer = await customerResponse.json();
  const products = await productsResponse.json();
  const news = await newsResponse.json();
  myDisplayer("Custome name: " + customer.name);
  myDisplayer(products.length + " products");
  myDisplayer(news.length + " news items");
}

// Call the async function
loadData();

O‘zingiz sinab ko‘ring »

Xatolarni tekshirish

fetch() server javob berganda bajariladi (resolve).

404 (Not Found) kabi HTTP xatosi Promise’ni rad etmaydi.

Buning o‘rniga ok xususiyatini tekshiring.

Misol

// Async function to download a file
async function loadText(file) {
  const response = await fetch(file);
  if (!response.ok) {
    throw new Error(response.status + " " + response.statusText);
  }
  return await response.text();
}

O‘zingiz sinab ko‘ring »

Xatolarni qayta ishlash

Xatolarni qayta ishlash uchun try ... catch’dan foydalaning.

Misol

// Async function to download a file
async function loadText(file) {
  try {
    const response = await fetch(file);
    if (!response.ok) {
      throw new Error("HTTP Error " + response.status);;
    }
    myDisplayer(await response.text();
  } catch(err) {
    myDisplayer(err.message);
  }
}

Xatosiz urinish

// Call the async function
loadText("fetch.txt");

O‘zingiz sinab ko‘ring »

Xato bilan urinib ko‘ring

// Call the async function
loadText("missing.txt");

O‘zingiz sinab ko‘ring »

Muhim: HTTP xatolari

Yangi boshlanuvchilar uchun keng tarqalgan xato - bu 404 yoki 500 kabi Http xatolarida olib kelish muvaffaqiyatsiz bo‘lishini kutishdir.

Fetch faqat tarmoq xatolarida rad etiladi (reject).

404 javobi rad etilgan promise emas.

You must check response.ok.

Yuqoridagi misol HTTP xatolarini to‘g‘ri qayta ishlaydi.

Xulosa

fetch() metodi serverdan resurslarni yuklab oladi.
fetch() Response obyektiga hal qiluvchi Promise-ni qaytaradi.
Matnli javoblarni o‘qish uchun text()’dan foydalaning.
JSON javoblarni o‘qish uchun json()’dan foydalaning.
Bir nechta resursni parallel yuklab olish uchun Promise.all()’dan foydalaning.
Check response.ok to detect HTTP errors.
Xatolarni qayta ishlash uchun try...catch’dan foydalaning.

fetch bilan bog‘liq keng tarqalgan xatolar

await’ni unutsangiz, ma’lumot o‘rniga promise olasiz.

Misol

async function loadData() {
  let response = await fetch("data.json");
  let data = response.json();
  myDisplayer(data);
}

Bu promise’ni log qiladi.

JSONni olish uchun await dan foydalanishingiz kerak.

Misol

async function loadData() {
  let response = await fetch("data.json");
  let data = await response.json();
  myDisplayer(data);
}

Debug qilish bo‘yicha maslahat

Ko‘pgina xatolar JavaScript xatosi emas.

Ular yo‘l va javob muammolari.

Fetch ishlamasa, konsolni tekshiring.

So‘ng Network yorlig‘ini tekshiring.

Fayl yo‘li to‘g‘rimi?
Holat kodi 200 mi?
Javob JSON formatidami?

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish