API vasitəsilə məlumat almaq

Əvvəl API sənədini oxu

Endpoint resursun ünvanıdır. REST üslubunda resurslar URL-lərlə ifadə olunur və HTTP metodları əməliyyatı bildirir. Sənəddə URL, metod, tələb olunan parametrlər, autentifikasiya, cavab quruluşu və xəta kodlarını tap. Swagger/OpenAPI təsviri bunları strukturlaşdırılmış formada göstərə bilər.

async function readJSON(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
const all = await readJSON('https://jsonplaceholder.typicode.com/posts');
const one = await readJSON('https://jsonplaceholder.typicode.com/posts/1');
const query = new URLSearchParams({ userId: '1' });
const filtered = await readJSON(`https://jsonplaceholder.typicode.com/posts?${query}`);
console.log(all.length, one.id, filtered.length);

Nümunə

Bu blok ES modulunda və ya async funksiya daxilində işlədilməlidir. JSONPlaceholder sınaq xidmətidir; şəbəkə bağlantısı tələb edir.

Yol və query fərqi

/posts/1 konkret resursu göstərir. ?userId=1 siyahıya filtr kimi işləyə bilər. Bir neçə parametr & ilə ayrılır; əl ilə boşluq və xüsusi simvol dəyişmək əvəzinə URLSearchParams və ya tək dəyər üçün encodeURIComponent istifadə et.

Məlumatın array və ya obyekt olmasını sənəddən öyrən. Boş siyahını xətadan fərqləndir. DevTools Network panelində göndərilən URL-ni və cavabı tutuşdur. Uzaq xidmət brauzerdən sorğuya icazə vermirsə CORS qaydasını frontend-də söndürməklə düzəltmək olmaz; server konfiqurasiyası tələb olunur.

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

REST API sənədlərindən endpoint, metod və məlumat quruluşunu öyrən. Swagger təsvirində girişləri araşdır, ID ilə resurs seç və query parametrləri ilə nəticəni filtrlə.

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

REST və Swagger sənədləri
GET, endpoint və resurs ID-si
Query parametrləri və URL kodlaşdırması

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Siyahıdan tək resursa keç

Siyahı, filtr və resurs ID-si arasındakı fərqi yoxla.

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

Bütün qeydlər
Filtrlənmiş siyahı
Tək resurs

Bütün qeydlər

Siyahı sorğusu bütün qeydləri istəyir.

GET /posts

Bu məşq prosesi modelləşdirir.

Özün sına

Sınaq API-si üçün siyahı və tək resurs sorğusu qur. URLSearchParams ilə axtarış parametrini əlavə et və boş nəticəni göstər.

Nəticəni necə yoxlayım?

Siyahı və ID üzrə sorğu fərqlənir; query parametrində boşluq və xüsusi hərflər düzgün kodlaşdırılır.

Gözlənilən nəticə

Siyahı sorğusunda userId=1 parametri görünür; tək resurs sorğusu obyekt qaytarır.
Mövcud olmayan istifadəçi filtri üçün Nəticə yoxdur göstərilir; şəbəkə xətası ayrıca tutulur.

Nümunə həllə bax

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

Nümunə JSONPlaceholder sınaq API-sindən oxuyur. Axtarış üçün dəstəklənən userId parametri URLSearchParams ilə qurulur.

main.js

const base = 'https://jsonplaceholder.typicode.com';
async function read(path) {
  const response = await fetch(base + path);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
async function load() {
  const query = new URLSearchParams({ userId: '1' });
  const posts = await read(`/posts?${query}`);
  console.log(posts.length ? posts : 'Nəticə yoxdur');
  console.log(await read('/posts/1'));
  const none = await read('/posts?userId=999999');
  console.log(none.length ? none : 'Nəticə yoxdur');
}
load().catch(error => console.error(error.message));

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