Fetch — browser va ayrim JavaScript runtime’larda HTTP request yuborish va response bilan ishlash uchun qo‘llanadigan Promise asosidagi API. U fetch() funksiyasi orqali ishlaydi va XMLHttpRequestga nisbatan zamonaviyroq, composable interfeys beradi.
Fetch requestni URL va optionlar bilan yuboradi, keyin Promise orqali Response obyektini qaytaradi.
Oddiy request
Eng sodda ko‘rinish:
const response = await fetch("/api/posts");
Default holatda GET request yuboriladi.
Response body’ni o‘qish uchun alohida method chaqiriladi:
const data = await response.json();
Promise
fetch() darhol Promise qaytaradi.
Promise network request tugaganda resolve yoki ayrim network xatolarida reject bo‘ladi.
HTTP 404 yoki 500 response kelishi odatda Promise reject bo‘ldi degani emas.
Status alohida tekshiriladi.
Response status
response.ok status 200–299 oralig‘ida ekanini ko‘rsatadi.
Masalan:
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
Application 401, 404, 422 va 500 kabi statuslarni o‘z semantikasiga ko‘ra boshqaradi.
Response body
Response body turli methodlar bilan o‘qiladi:
json();text();blob();arrayBuffer();formData().
Body stream bo‘lgani sabab odatda bir marta to‘liq iste’mol qilinadi.
Qayta ishlatish kerak bo‘lsa clone yoki stream strategiyasi talab qilinadi.
POST request
JSON yuborish misoli:
const response = await fetch("/api/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
Server content type va body schema’ni tekshiradi.
Headers
Headers obyektidan request va response headerlari bilan ishlash mumkin.
Browser ayrim xavfsizlikka oid headerlarni script orqali o‘zgartirishga ruxsat bermaydi.
CORS sabab boshqa origin response’ining faqat expose qilingan headerlari ko‘rinishi mumkin.
Credentials
Cross-origin requestda cookie va HTTP authentication yuborish credential policy’ga bog‘liq.
Optionlar:
omit;same-origin;include.
Credential bilan CORS ishlatilsa server aniq origin va credential ruxsatini ko‘rsatishi kerak.
Wildcard origin mos kelmasligi mumkin.
CORS
Fetch same-origin policy’ga bo‘ysunadi.
Cross-origin request simple bo‘lmasa browser preflight OPTIONS yuborishi mumkin.
qoidalarini belgilaydi.
CORS xatosida JavaScript ko‘pincha response detailini o‘qiy olmaydi.
Mode
Fetch mode request security behaviorini belgilashi mumkin:
cors;same-origin;no-cors;navigatega oid internal holatlar.
no-cors arbitrary cross-origin response body’ni o‘qishga ruxsat bermaydi.
U opaque response qaytarishi mumkin.
AbortController
Requestni bekor qilish uchun AbortController ishlatiladi.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();
Search, route change va timeoutga yaqin behaviorlarda eski request bekor qilinadi.
Timeout
Fetchning o‘zida barcha environment uchun universal timeout option mavjud emas.
AbortController va timer birga ishlatilishi mumkin.
Timeoutdan keyin client kutishni to‘xtatsa serverdagi operation allaqachon bajarilgan bo‘lishi ehtimoli bor.
Non-idempotent requestlar idempotency key talab qilishi mumkin.
Streaming
Response body ReadableStream sifatida bosqichma-bosqich o‘qilishi mumkin.
Bu:
uchun foydali.
JSONni to‘liq response.json() bilan o‘qish body tugashini kutadi.
Upload progress
Klassik browser Fetch API upload progressini XHR kabi oddiy event bilan bermasligi mumkin.
Environment va yangi streaming imkoniyatlar farq qiladi.
Upload progress zarur bo‘lsa XMLHttpRequest yoki maxsus upload protocol ishlatilishi mumkin.
Cache
Fetch browser HTTP cache bilan ishlaydi.
cache option:
kabi qiymatlarni qo‘llashi mumkin.
Server Cache-Control, ETag va boshqa headerlar orqali asosiy siyosatni beradi.
Redirect
Fetch redirectni avtomatik kuzatishi, xato deb qabul qilishi yoki manual mode’da qaytarishi mumkin.
Cross-origin redirect security qoidalariga bo‘ysunadi.
Sensitive Authorization header boshqa hostga ko‘chmasligi kerak.
Referrer
Request referrer policy orqali oldingi sahifa URLining qanchasi yuborilishini boshqaradi.
Sensitive query parameterlar referrer orqali boshqa saytga chiqib ketmasligi kerak.
Server va document umumiy Referrer-Policy headeridan foydalanishi mumkin.
Service Worker
Service Worker fetch event orqali requestni intercept qiladi.
U cache, offline fallback yoki custom response qaytarishi mumkin.
Sahifadagi fetch() requestlari ham service worker nazoratiga tushishi ehtimoli bor.
Fetch va XHR
Fetch:
- Promise asosida;
- stream bilan yaxshi integratsiya;
- cleaner request va response obyektlari;
- service worker bilan mos.
XHR:
- progress eventlari;
- eski browser compatibility;
- ayrim legacy imkoniyatlar.
Ikkalasi ham HTTP va browser security qoidalariga tayanadi.
Request obyekt
Request obyektida URL, method, header, body va boshqa optionlar saqlanadi. Uni service worker, cache yoki wrapper funksiyada qayta ishlatish mumkin. Body ishlatilgan requestni qayta yuborish uchun clone yoki yangi request talab qilinadi.
Keepalive
Sahifa yopilayotganda kichik analytics yoki yakuniy signal uchun keepalive option ishlatilishi mumkin. Browser body hajmi va vaqtni cheklaydi. Critical business transaction page unload signaliga tayanmaydi.
Error wrapper
Application Fetch ustiga umumiy wrapper yaratib status mapping, JSON parsing, timeout, trace header va authentication refreshni markazlashtirishi mumkin. Wrapper barcha xatoni bir xil qilib yashirmasdan transport va business errorlarni ajratadi.
Bog‘liq tushunchalar
Fetch API, Promise, Request, Response, Headers, AbortController, CORS, HTTP, ReadableStream, XMLHttpRequest