• Kirish
  • Reactda fetch() nima?
  • Nima uchun Reactda fetch() dan foydalaniladi?
  • Reactda fetch() sozlanmoqda
  • fetch() bilan GET so'rovini yuborish
  • fetch() Xatolarni qayta ishlash
  • fetch() bilan POST so'rovlarini yuborish
  • Xulosa

Kirish

Zamonaviy veb-ishlab chiqishda ma'lumotlarni olish dinamik va interaktiv ilovalarni yaratishning muhim qismidir. React-da API yoki serverdan ma'lumotlarni olishning turli usullari mavjud va mashhur usullardan biri fetch() funksiyasidan foydalanishdir. Bu funksiya HTTP so'rovlarini amalga oshirish va serverdan ma'lumotlarni olish imkonini beradi.

Ushbu bosqichma-bosqich oʻquv qoʻllanma maʼlumotlarni olish, xatolarni qayta ishlash hamda GET va POST soʻrovlarini bajarish uchun React-da fetch() dan foydalanish jarayoni boʻyicha yoʻl-yoʻriq beradi. Shunday qilib, keling, suvga tushaylik!

Reactda fetch() nima?

fetch() - bu serverdan resurslarni olish uchun HTTP so'rovlarini amalga oshirish imkonini beruvchi o'rnatilgan JavaScript funksiyasi. Bu an'anaviy XMLHttpRequest ob'ektining zamonaviy o'rnini bosuvchi bo'lib, oddiyroq va moslashuvchan API taqdim etadi.

Reactda fetch() komponent DOMga o'rnatilgandan so'ng darhol API dan ma'lumotlarni olish uchun componentDidMount() hayot aylanishi usuli bilan birgalikda ishlatilishi mumkin. U serverdan javobni hal qiladigan va'dani qaytaradi, undan keyin olingan ma'lumotlarni qayta ishlash uchun foydalanish mumkin.

Nima uchun Reactda fetch() dan foydalaniladi?

Reactda fetch() dan foydalanishning bir qancha afzalliklari bor:

  1. Oddiylik: fetch() XMLHttpRequest ga nisbatan sodda va intuitiv API taqdim etadi, bu esa undan foydalanish va tushunishni osonlashtiradi.
  2. Moslashuvchanlik: fetch() har xil turdagi maʼlumotlar, jumladan JSON, matn va ikkilik maʼlumotlar bilan ishlash imkonini beradi. Shuningdek, u sarlavhalar va autentifikatsiya kabi turli xil so'rov variantlarini sozlash imkonini beradi.
  3. Brauzer mosligi: fetch() barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi va hech qanday qo'shimcha kutubxonalar yoki polifilllarni talab qilmaydi.
  4. Va'dalar: fetch() va'dani qaytaradi, bu asinxron operatsiyalarni bajarish va xatolarni qayta ishlashni osonlashtiradi.

Endi biz fetch() dan foydalanishning afzalliklarini tushunganimizdan so'ng, uni React ilovasida qanday sozlashni ko'rib chiqamiz.

Reactda fetch() sozlanmoqda

React-da fetch() dan foydalanishni boshlashdan oldin, loyihamiz zarur bog'liqliklarga ega ekanligiga ishonch hosil qilishimiz kerak. fetch() oʻrnatilgan brauzer funksiyasi boʻlgani uchun biz qoʻshimcha paketlarni oʻrnatishimiz shart emas. Biroq, agar siz eski brauzer bilan ishlayotgan bo'lsangiz, moslikni ta'minlash uchun "whatwg-fetch" kabi polifilldan foydalanishingiz kerak bo'lishi mumkin.

Bog'liqliklar o'rnatilgandan so'ng, biz React komponentlarimizda fetch() dan foydalanishni boshlashimiz mumkin. Jarayonni tasvirlash uchun API dan ma'lumotlarni oladigan "DataFetcher" nomli oddiy komponentni yarataylik.

import { useEffect } from 'react';
function DataFetcher () {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Handle the fetched data here
      })
      .catch(error => {
        // Handle any errors
      });
  }, []}
  
  return <div>Data Fetcher Component</div>;
}
export default DataFetcher;

Yuqoridagi kodda biz useEffect() hayot aylanishi usuli ichida fetch() funksiyasidan foydalanamiz. Bu komponent DOMga o'rnatilishi bilanoq ma'lumotlarni olish jarayoni ishga tushishini ta'minlaydi.

fetch() bilan GET so'rovini yuborish

Endi biz React ilovamizda fetch() ni o'rnatdik, keling, API dan ma'lumotlarni olish uchun GET so'rovini qanday qilishni ko'rib chiqamiz.

GET so'rovini yuborish uchun biz ma'lumotlarni olmoqchi bo'lgan API URL manzilini taqdim etishimiz kerak. Quyidagi misolda biz "https://api.example.com/users'" so'nggi nuqtasidan foydalanuvchilar ro'yxatini olamiz:

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
  });

Ushbu kod parchasida biz birinchi navbatda API so'nggi nuqtasi URL manzili bilan fetch() ni chaqiramiz. Keyin biz serverdan javobni boshqarish uchun .then() usulini zanjirlaymiz. Bunday holda, javobni JSON ma'lumotlari sifatida tahlil qilish uchun javob ob'ektidagi .json() usulini chaqiramiz.

Shundan so'ng, biz ikkinchi .then() qayta qo'ng'iroq ichida olingan ma'lumotlarga kirishimiz mumkin. Bu yerda siz ma'lumotlarni o'zgartirishingiz, komponent holatini yangilashingiz yoki boshqa kerakli amallarni bajarishingiz mumkin.

Agar olish jarayonida xatolik yuzaga kelsa, .catch() usuli chaqiriladi, bu sizga xatoni mos ravishda hal qilishga imkon beradi.

fetch() Xatolarni qayta ishlash

fetch() dan foydalanilganda, ma'lumotlarni olish jarayonida yuzaga kelishi mumkin bo'lgan xatolarni bartaraf etish muhim ahamiyatga ega. Tarmoq xatolari, server xatolari yoki noto'g'ri API javoblari kabi bir nechta keng tarqalgan xatolar turlari mavjud.

fetch() bilan xatolarni hal qilish uchun biz olib kelish zanjirimizda .catch() usulidan foydalanishimiz mumkin. .catch() usuli har qanday rad etilgan va'dalarni qo'lga olish va kerakli xato mantig'ini bajarish imkonini beradi.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Handle the fetched data here
  })
  .catch(error => {
    // Handle any errors
    console.error('Error:', error);
  });

Yuqoridagi misolda biz birinchi .then() qo'ng'iroqqa oddiy xato tekshiruvini qo'shamiz. Agar javob holati yaxshi bo'lmasa, biz throw kalit so'zidan foydalanib xatoga yo'l qo'yamiz. Bu .catch() qayta qo'ng'iroqni ishga tushiradi va xatoni to'g'ri hal qilishimizga imkon beradi.

Foydalanuvchilarga nima noto'g'ri bo'lganligi haqida aniq tushuncha berish uchun mazmunli xato xabarlarini taqdim etishni va xatolarni ularning turlariga qarab hal qilishni unutmang.

fetch() bilan POST so'rovlarini yuborish

Ma'lumotlarni olishdan tashqari, fetch() POST so'rovlarini yuborish orqali serverga ma'lumotlarni yuborish uchun ham ishlatilishi mumkin. Bu ko'pincha serverda ma'lumotlarni yaratish, yangilash yoki o'chirishda ishlatiladi.

fetch() bilan POST so'rovini yuborish uchun biz HTTP usuli, sarlavhalar va yuboriladigan ma'lumotlarni o'z ichiga olgan fetch() funksiyasiga qo'shimcha variantlarni o'tkazishimiz kerak.

Yangi foydalanuvchi yaratish uchun POST so'rovini qanday qilish mumkinligiga misol:

const userData = {
  name: 'John Doe',
  age: 30,
  email: '[email protected]',
};
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
  .then(response => response.json())
  .then(data => {
    // Handle the response data here
  })
  .catch(error => {
    // Handle any errors
  });

Ushbu misolda biz serverga yubormoqchi bo'lgan ma'lumotlarni o'z ichiga olgan userData ob'ektini aniqlaymiz. Shuningdek, biz HTTP usulini "POST" sifatida taqdim etamiz va JSON maʼlumotlarini yuborayotganimizni bildirish uchun "Content-Type" sarlavhasini "application/json" ga oʻrnatamiz.

Ma'lumotlar POST so'rovining body sifatida yuborilishidan oldin JSON.stringify() yordamida JSONga aylantiriladi.

Xulosa

Ushbu qo'llanmada biz serverdan ma'lumotlarni olish uchun React-da fetch() dan foydalanish jarayonini o'rganib chiqdik. Biz fetch() dan foydalanishning afzalliklarini, uni React ilovasida qanday sozlashni va GET va POST so'rovlarini qanday qilishni muhokama qildik. Shuningdek, biz xatolarni ko'rib chiqdik va fetch() foydali bo'lishi mumkin bo'lgan turli stsenariylarni muhokama qildik.

fetch() kuchidan foydalanib, siz masofaviy API va serverlar bilan muammosiz oʻzaro taʼsir qiluvchi dinamik va interaktiv React ilovalarini yaratishingiz mumkin.

Uning imkoniyatlarini chuqurroq tushunish uchun o'z loyihalaringizda fetch() bilan mashq qilishni va tajriba qilishni unutmang. Baxtli kodlash!

Buni o'qish yoqdimi? Iltimos, boshqalarga ham ulashing.

Iltimos, qo'llab-quvvatlashingizni ko'rsatish uchun quyidagi 👏 tugmasini iloji boricha ko'p marta bosing!

O'qiganingiz uchun rahmat. Salom!!!. Siz Ajoyibsiz!

Ulashish g'amxo'rlikdir. Shuning uchun imkon qadar baham ko'ring ;-)

Mening "portfelim" ni tekshiring!