Müsahibəyə hazırlıq: API və asinxronluq

Sorğu və cavab barədə suallar

HTTP necə işləyir? Müştəri metod, URL, başlıq və bəzən gövdə göndərir; server status, başlıq və gövdə qaytarır.
HTTP və HTTPS fərqi? HTTPS TLS vasitəsilə ötürülməni qoruyur; təkbaşına hər tətbiq məntiqini təhlükəsiz etmir.
JSON nədir? Dilə bağlı olmayan mətn formatıdır; JavaScript obyektinə parse edilməlidir.
REST nədir? Resursları və əməliyyatları əlaqəli HTTP prinsipləri ilə təşkil edən arxitektura üslubudur.
GET, POST, PUT və DELETE? Oxuma, yaratma, təqdimatı yeniləmə və silmə üçün geniş istifadə edilən metodlardır; API sənədinə əsaslan.
fetch nə qaytarır? Response üçün Promise; gövdənin oxunması da asinxrondur. 404 avtomatik catch demək deyil.
Sorğunu necə qoruyursan? HTTPS, serverdə autentifikasiya/avtorizasiya və validasiya; gizli server açarını frontend-də saxlamamaqla.

Asinxronluq barədə suallar

Promise-in üç vəziyyətini, callback ilə Promise zəncirinin fərqini, async funksiyanın qaytardığı tipi izah et. setTimeout və setInterval fərqini göstər. map callback-i yeni dəyər qaytarır; spread dəyərləri açır, rest toplayır. Əlavə mövzu kimi closure və call/apply/bind üçün bir nümunə hazırla.

async function readJSON(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
async function load() {
  const [users, posts] = await Promise.all([
    readJSON('/examples/frontend/users.json'),
    readJSON('/examples/frontend/posts.json')
  ]);
  console.log(users, posts);
}
load().catch(console.error);

Nümunə

Beş praktik tapşırıq

İstifadəçilər siyahısını GET ilə gətir və adları DOM-da textContent ilə göstər.
JSONPlaceholder sınaq xidmətinə yeni post üçün POST göndər; simulyasiya olunan cavabla daimi saxlanmanı qarışdırma.
Saniyə qəbul edib sonra done göstərən funksiya yaz; mənfi giriş üçün qayda qoy.
İki GET sorğusunu Promise.all ilə paralel başlat; nəticə sırasını və bir xəta halını yoxla.
setTimeout-u Promise qaytaran funksiyaya çevir və onu await ilə çağır.

HTML/CSS təkrarı üçün padding/margin, ölçü vahidləri, mövqeləşmə, sinif/psevdosinif, block/inline və Flexbox oxlarını nümunə ilə izah et.

Əlavə qeydlər və mənbələr

HTTP, JSON, REST və fetch suallarını əvvəlki modullarla əlaqələndir. Promise, taymerlər və async barədə cavabını sorğunun başlayıb nəticənin ekrana gəldiyi ardıcıllıqla izah et.

Niyə vacibdir?

API tətbiqlərin bir-biri ilə məlumat mübadiləsi aparması üçün razılaşdırılmış interfeysdir.

Əvvəlki biliklər

DOM və brauzer hadisələri

Bu mövzuda

HTTP, HTTPS, JSON və REST
Promise, async və taymerlər
Paralel GET və POST tapşırıqları

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Cavabın statusunu yoxla

Xəta cavabını ayrıca emal et, sonra uğurlu cavabı oxu.

Prosesi son vəziyyətə çatdır.

Sorğu hazırdır
Cavab gözlənilir
HTTP 404
HTTP 200
Məlumat oxundu

Sorğu hazırdır

Məlumatı yükləməyə başla.

fetch("/users.json")

Bu məşq prosesi modelləşdirir.

Özün sına

İstifadəçilər üçün GET və yeni post üçün POST sorğusu qur. İki sorğunu paralel gözlə və saniyələrdən sonra tamamlanan Promise yaz.

Nəticəni necə yoxlayım?

GET, POST, gecikmə və paralel sorğu tapşırıqları işləyir; HTTP xətası ilə şəbəkə xətası ayrılır.

Gözlənilən nəticə

GET nəticəsində üç ad DOM-da təhlükəsiz mətnlə göstərilir.
POST cavabı sınaq nəticəsidir, daimi saxlanma deyil. İki GET paralel başlayır və delay done mesajını göstərir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

GET və POST eyni deyil: biri oxuyur, digəri sınaq resursu yaradır. Lokal fayllar yalnız oxuma nümunəsidir; POST üçün test xidməti istifadə olunur.

index.html

<ul id="users"></ul><p id="status" role="status"></p>
<script type="module" src="main.js"></script>

main.js

async function read(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
function delay(seconds) {
  if (!Number.isFinite(seconds) || seconds < 0) return Promise.reject(new RangeError('Etibarsız saniyə'));
  return new Promise(resolve => setTimeout(() => resolve('done'), seconds * 1000));
}
async function run() {
  const [users, posts] = await Promise.all([
    read('/examples/frontend/users.json'), read('/examples/frontend/posts.json')
  ]);
  for (const user of users) {
    const item = document.createElement('li'); item.textContent = user.name;
    document.querySelector('#users').append(item);
  }
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: 'Təlim', body: 'Nümunə', userId: 1 })
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  console.log(await response.json(), posts.length);
  document.querySelector('#status').textContent = await delay(1);
}
run().catch(error => { document.querySelector('#status').textContent = error.message; });

qisa-cavablar.txt

1. HTTP necə işləyir? Müştəri metod, URL, başlıq və bəzən gövdə göndərir; server status, başlıq və gövdə qaytarır.

2. HTTP və HTTPS fərqi? HTTPS TLS vasitəsilə ötürülməni qoruyur; təkbaşına hər tətbiq məntiqini təhlükəsiz etmir.

3. JSON nədir? Dilə bağlı olmayan mətn formatıdır; JavaScript obyektinə parse edilməlidir.

4. REST nədir? Resursları və əməliyyatları əlaqəli HTTP prinsipləri ilə təşkil edən arxitektura üslubudur.

5. GET, POST, PUT və DELETE? Oxuma, yaratma, təqdimatı yeniləmə və silmə üçün geniş istifadə edilən metodlardır; API sənədinə əsaslan.

6. fetch nə qaytarır? Response üçün Promise; gövdənin oxunması da asinxrondur. 404 avtomatik catch demək deyil.

7. Sorğunu necə qoruyursan? HTTPS, serverdə autentifikasiya/avtorizasiya və validasiya; gizli server açarını frontend-də saxlamamaqla.

examples/frontend/users.json

[
  {
    "id": 1,
    "name": "Aysel",
    "email": "aysel@example.test"
  },
  {
    "id": 2,
    "name": "Murad",
    "email": "murad@example.test"
  },
  {
    "id": 3,
    "name": "Leyla",
    "email": "leyla@example.test"
  }
]

examples/frontend/posts.json

[
  {
    "id": 1,
    "userId": 1,
    "title": "İlk veb səhifəm",
    "body": "HTML və CSS ilə ilk addımlar."
  },
  {
    "id": 2,
    "userId": 2,
    "title": "JavaScript praktikası",
    "body": "Massivlər və funksiyalar."
  }
]

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.