Niyə fetch-in üstündə təbəqə lazımdır

Kiçik demoda fetch('/api/users') kifayətdir. Real tətbiqdə isə hər sorğuda eyni işlər təkrarlanır: baza URL, Authorization başlığı, response.ok yoxlaması, JSON-un açılması, timeout, təkrar cəhd, xətaların bir formata salınması. Əgər bunlar 40 faylda kopyalanıbsa, tokenin formatını dəyişmək 40 yerdə redaktə deməkdir.

Həll: bütün sorğuların keçdiyi tək bir HTTP klienti. İki yol var: hazır kitabxana (Axios, ky, ofetch) və ya fetch üzərində 30-50 sətirlik öz sarğınız.

HTTP klientin konveyeri: request hook, şəbəkə, response hook
HTTP klientin konveyeri: request hook, şəbəkə, response hook

💡 Bu dərsdəki kodlar şəbəkəsiz işləyir: fetch əvəzinə saxta funksiya (fetchImpl) veririk. Eyni üsul testlərdə də lazım olacaq.

fetch və Axios

fetch brauzerdə və Node 18+ daxilində var, əlavə paket tələb etmir. Onun iki məlum xüsusiyyəti: 404 və 500-də promis rədd olunmur və timeout yoxdur. Axios bu boşluqları doldurur, amma bundle-a əlavə kod gətirir.

javascript
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Aysel' }),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const user = await res.json();

// Axios
import axios from 'axios';

const { data: user } = await axios.post('/api/users', {
  name: 'Aysel',
});
// non-2xx statuses reject the promise automatically
MövzufetchAxios
4xx/5xxrədd etmir, ok yoxlayınrədd edir (validateStatus ilə dəyişir)
JSONəlləavtomatik, response.data
TimeoutAbortControllertimeout seçimi
Interceptoryoxdurvar
Yükləmə irəliləyişiyoxduronUploadProgress

💡 Nəsihət: yeni və kiçik layihədə fetch + öz sarğınız, çox endpoint-li və interceptor tələb edən böyük tətbiqdə Axios və ya ky.

Axios instance və interceptor-lar

axios.create() ortaq konfiqurasiyası olan müstəqil nüsxə qaytarır. Interceptor-lar sorğu getməzdən əvvəl və cavab gələndən sonra işləyən funksiyalardır.

javascript
import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { Accept: 'application/json' },
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});