JS Fetch API
Fetch API interfeysi veb-serverdan ma’lumotlarni yuklab olish (fetch) imkonini beradi.
await fetch() — HTTP serverdan ma’lumot olish uchun zamonaviy API.
XMLHttpRequest() HTTP serveridan ma’lumotlarni olish uchun eski eski API edi.
Fetch API nima
JavaScript Fetch API - bu veb-serverlarga asinxron tarmoq so‘rovlarini yuborish uchun ishlatiladigan zamonaviy brauzer interfeysi.
Fetch eski XMLHttpRequest obyektini osonroq va kuchliroq almashtirishdir.
Fetch toza asinxron kod uchun standart JavaScript Promise’laridan foydalanadi.
Matn faylini olish
fetch()’ni namoyish qilishning eng oddiy usuli — matn faylini yuklab olish.
Misollar
// Fetch a file
fetch(file)
.then(function(response) {
return response.text();
})
.then(function(data) {
myDisplayer(data);
});
O‘zingiz sinab ko‘ring »
Yoki (strelkali funksiyalar yordamida)
// Fetch a file
fetch(file)
.then(response => response.text())
.then(data => myDisplayer(data));
O‘zingiz sinab ko‘ring »
Asinxron funksiyadan foydalanish
// Async function to fetch a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(await response.text());
}
O‘zingiz sinab ko‘ring »
Response obyekti
fetch() usuli Response obyektiga hal qiluvchi Promise qaytaradi.
Response obyekti server javobi haqidagi ma’lumotlarni (xususiyatlarni) o‘z ichiga oladi.
| Xususiyat | Tavsif |
|---|---|
| ok | So‘rov muvaffaqiyatli bo‘lsa, true |
| status | HTTP holat kodi |
| statusText | HTTP holat xabari |
| url | HTTP url manzili |
Misol
Natija — Response obyekti [object Response].
// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response);
}
O‘zingiz sinab ko‘ring »
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 »
Asinxron natija
JavaScript server javobini kutayotganda ishlashni davom ettirishi mumkin.
Misol
// Async function to download a file
async function loadText(file) {
const response = await fetch(file);
myDisplayer(response.url);
}
loadText("fetch.txt");
myDisplayer("JavaScript continues.");
O‘zingiz sinab ko‘ring »
Eslatma
Avval "JavaScript continues." ko‘rsatiladi.
U loadText() fetch() bajarilishini kutayotgan paytda ko‘rsatiladi.
Response obyekti metodlari
Response obyektida server javobini o‘qish usullari mavjud.
| Metod | Tavsif |
|---|---|
| text() | Javobni matn sifatida o‘qiydi |
| json() | Javobni JSON sifatida o‘qiydi |
| blob() | Javobni ikkilik ma’lumot sifatida o‘qiydi |
| bytes() | Javobni baytlar sifatida o‘qiydi |
| arrayBuffer() | Javobni ArrayBuffer sifatida o‘qiydi |
Batafsil...
JSON fayllarini so‘rash uchun fetch() dan qanday foydalanishni bilib oling:
HTTP xatolarini tekshirish
fetch() server javob berganda bajariladi (resolve).
Keng tarqalgan yangi boshlovchilar xatosi — fetch() HTTP xatolarida muvaffaqiyatsiz tugashini kutish.
404 topilmadi kabi HTTP xatosi Promise-ni rad etmaydi.
Fetch faqat tarmoq xatolarida rad etiladi (reject).
404 javobi rad etilgan promise emas.
Siz har doim ok xususiyatini tekshirishingiz kerak.
Misol
async function loadText(file) {
const response = await fetch(file);
if (!response.ok) {
myDisplayer(response.status + " " + response.statusText);
return;
}
myDisplayer(await response.text());
}
O‘zingiz sinab ko‘ring »
Eslatma
Ko‘p yuklash xatolar JavaScript xatosi emas.
Ular ko‘pincha yo‘l va javob muammolari.
Fetch ishlamasa, konsolni tekshiring.
So‘ng Network yorlig‘ini tekshiring.
- Fayl nomi to‘g‘rimi?
- Fayl yo‘li to‘g‘rimi?
- Holat kodi 200 mi?
Fetch API va XMLHttpRequest (XHR)
| Xususiyat | Fetch | XHR |
|---|---|---|
| Sintaksis | Promise-based | Callback-based |
| Error Handling | Tarmoq nosozligida rad etiladi | Needs manual checking |
| Streams | Supports streams | Oqimlarni qo‘llab-quvvatlamaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!