Tarmoq so'rovlari

Fetch: so'rovlar va JSON

Oldingi darsda fetch bilan ma'lumot olishni ko'rdik. Endi serverga ma'lumot yuborishni — POST, PUT, DELETE kabi so'rovlarni o'rganamiz. Buning uchun fetchning ikkinchi argumenti — options obyekti ishlatiladi.

options obyekti

So'rovni sozlash uchun fetchga ikkinchi argument sifatida obyekt beramiz. Uning eng muhim maydonlari:

let response = await fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(data)
});

POST so'rovi bilan JSON yuborish

Serverga JSON ma'lumot yuborishning to'liq misoli. Biz avval JavaScript obyektini JSON.stringify bilan matnga aylantiramiz, so'ng uni bodyga joylashtiramiz:

let user = {
  name: 'Ali',
  email: 'ali@example.com'
};

let response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
console.log(result.message); // serverning javobi
body — bu tarmoq orqali yuboriladigan xom ma'lumot (odatda matn). JavaScript obyektini to'g'ridan-to'g'ri yubora olmaymiz — uni avval JSON.stringify(obyekt) bilan JSON matniga aylantirishimiz kerak.

Content-Type sarlavhasi

Content-Type sarlavhasi serverga qanday formatdagi ma'lumot yuborayotganimizni bildiradi. JSON yuborayotganda uni application/json qilib belgilash muhim, aks holda server ma'lumotni noto'g'ri talqin qilishi mumkin.

headers: {
  'Content-Type': 'application/json;charset=utf-8'
}
Agar Content-Typeni yubormasangiz, brauzer body matn bo'lganda uni text/plain deb belgilashi mumkin. Ko'p serverlar JSON'ni to'g'ri qabul qilishi uchun aynan application/jsonni kutadi. Shuning uchun JSON yuborganda bu sarlavhani doim qo'shing.

Turli HTTP metodlari

RESTful API'larda turli amallar uchun turli metodlar ishlatiladi:

// PUT: foydalanuvchini yangilash
await fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Vali', email: 'vali@example.com' })
});

// DELETE: foydalanuvchini o'chirish
await fetch('https://api.example.com/users/1', {
  method: 'DELETE'
});
GET va DELETE so'rovlarida odatda body bo'lmaydi. GET so'rovida body berish umuman xatolikka olib keladi.

To'liq amaliy misol: xatoliklar bilan

Real koda POST so'rovni ham xatoliklardan himoyalaymiz — xuddi oldingi darsdagidek:

async function foydalanuvchiYarat(user) {
  try {
    let response = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
      body: JSON.stringify(user)
    });

    if (!response.ok) {
      throw new Error('Server xatoligi: ' + response.status);
    }

    let created = await response.json();
    return created;

  } catch (error) {
    console.log('Yaratib bo'lmadi: ' + error.message);
    throw error;
  }
}

foydalanuvchiYarat({ name: 'Salim', email: 'salim@example.com' })
  .then(function (u) {
    console.log('Yaratildi, ID: ' + u.id);
  })
  .catch(function () {
    console.log('Amal bajarilmadi');
  });

JSON.stringify eslatmasi

JSON.stringify JavaScript obyektini JSON matniga aylantiradi. U obyekt, massiv, son, satr, boolean va null bilan ishlaydi:

let obj = {
  name: 'Ali',
  age: 25,
  active: true,
  roles: ['admin', 'user']
};

console.log(JSON.stringify(obj));
// {"name":"Ali","age":25,"active":true,"roles":["admin","user"]}
JSON.stringify undefined, funksiyalar va Symbollarni tashlab yuboradi (obyekt maydonlarida). Shuning uchun faqat oddiy ma'lumot (data) yuboring — metodlar yoki funksiyalar JSON'ga kirmaydi.

Xulosa