HTTP sorğuları və JSON

Uğurlu bağlantı həmişə uğurlu cavab deyil

fetch şəbəkə xətasında rədd edilə bilər, amma HTTP 404 və 500 cavabları üçün ayrıca status yoxlamaq lazımdır. JSON oxumaq da asinxron əməliyyatdır.

async function loadProducts() {
  const response = await fetch('/products.json');
  if (!response.ok) throw new Error('Məlumat yüklənmədi');
  return response.json();
}

Bu funksiyanı çağıran hissədə try/catch ilə xətanı tut və istifadəçiyə mesaj göstər. JSON-un gözlənilən quruluşda olduğunu ayrıca yoxla. Frontend koduna gizli API açarları yerləşdirmə: brauzerə göndərilən kod görünür.

JSON, resurslar və sorğu parametrləri

HTTP cavabı status, başlıqlar və gövdədən ibarətdir. 2xx uğurlu cavabları, 4xx müştəri sorğusu ilə bağlı, 5xx serverlə bağlı xətaları bildirir. HTTPS bağlantını TLS ilə qoruyur. JSON mətn formatıdır: JSON.parse onu dəyərə, JSON.stringify dəyəri JSON mətninə çevirir.

API sənədindən endpoint-i, metodu, gözlənilən parametrləri və cavab quruluşunu oxu. Swagger kimi təsvirlər bu müqaviləni araşdırmağa kömək edir. Sorğu parametrini əl ilə birləşdirmək əvəzinə kodlaşdırılmış URL qur:

const params = new URLSearchParams({ search: 'qırmızı çanta' });
const url = `/api/products?${params}`;

Məlumat yaratmaq, yeniləmək və silmək

POST adətən yeni resurs yaradır, PUT resursu verilmiş təqdimatla yeniləyir, DELETE silir. Dəqiq davranışı API müqaviləsindən yoxla. JSON göndərərkən başlıq və gövdə uyğun olmalıdır.

async function createProduct(product) {
  const response = await fetch('/api/products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(product)
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.status === 204 ? null : response.json();
}

Bu kod /api/products endpoint-i olan ayrıca təlim serverini fərz edir; roadmap.az özü API təqdim etmir. DELETE cavabı gövdəsiz ola bilər: belə cavabı avtomatik JSON kimi oxuma. Tokenin göndərilmə qaydasını API sənədindən götür. Əvvəlki nümunə açarları və başqasına aid tokenləri istifadə etmə.

Promise, taymerlər və paralel sorğular

Promise gözlənilən əməliyyatın nəticəsini təmsil edir: pending, fulfilled və ya rejected. then nəticəni, catch xətanı emal edir; async/await eyni modeli ardıcıl görünən sintaksislə ifadə edir.

const delay = milliseconds => new Promise(resolve => {
  setTimeout(resolve, milliseconds);
});
async function loadTogether() {
  const results = await Promise.all([
    fetch('/products.json').then(readJSON),
    fetch('/categories.json').then(readJSON)
  ]);
  return results;
}
function readJSON(response) {
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

Promise.all nəticələri giriş sırası ilə qaytarır; biri rədd edilərsə ümumi Promise rədd edilir, digər əməliyyatlar avtomatik ləğv olunmur. setInterval təkrar işi planlayır; lazım olmadıqda clearInterval ilə dayandır. Taymerin gecikməsi dəqiq icra anına zəmanət vermir.

Mövzu üzrə praktika

Layihəndə products.json faylı yarat və fetch ilə oxu. Məhsul kartları göstər; fayl tapılmayanda anlaşılan xəta mesajı çıxar.

response.ok yoxlanılır, yüklənmə göstəricisi var və sorğu uğursuz olduqda səhifə çökmür.

Mövzunun yoxlama siyahısı

• GET və POST sorğularını fərqləndir
• JSON məlumatını oxu
• async/await və fetch istifadə et
• Yüklənmə, boş nəticə və xəta vəziyyətlərini göstər
• JSON.parse, JSON.stringify və HTTP statusları
• REST, Swagger, ID və query parametrləri
• POST, PUT, DELETE, başlıqlar və tokenlər
• Promise.all, setTimeout və setInterval