React.
js da API bilan ishlash
React.js yordamida API bilan ishlash ko‘pincha dinamik ma’lumotlarni olish va ular asosida
foydalanuvchi interfeyslarini qurishda qo‘llaniladi. API-lar bilan ishlash uchun odatda
`fetch` yoki boshqa HTTP kutubxonalar (masalan, Axios) ishlatiladi.
1. Fetch API bilan ishlash
React.js da `fetch` API orqali ma’lumotlarni olish oson. Bu asinxron funksiyalar yordamida
amalga oshiriladi. Misol uchun, komponent ichida ma’lumot olishni `useEffect` xook bilan
birlashtirish mumkin.
Oddiy misol:
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Xatolik:', error));
}, []);
return (
<div>
<h1>Postlar</h1>
<ul>
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default App;
2. Axios bilan ishlash
Axios — bu HTTP so‘rovlarini yuborish uchun React bilan keng qo‘llaniladigan kutubxona. U
`fetch` API ga nisbatan ko‘proq imkoniyatlar beradi.
Misol:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => setData(response.data))
.catch(error => console.error('Xatolik:', error));
}, []);
return (
<div>
<h1>Postlar</h1>
<ul>
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default App;
3. Xatolarni boshqarish
API bilan ishlaganda xatolarni boshqarish juda muhim. Har bir so‘rovga `try...catch` yoki
`.catch()` yordamida xatolarni boshqarish imkonini qo‘shish tavsiya etiladi.
Misol:
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Xatolik yuz berdi:', error);
}
}
fetchData();
4. useEffect va asinxronlik
React-da ma’lumotlarni olish uchun `useEffect` bilan birgalikda asinxron funksiyadan
foydalanishingiz mumkin. Bu ma’lumotlarni olish va interfeysni yangilashni soddalashtiradi.
Misol:
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
} catch (error) {
console.error('Xatolik:', error);
}
};
fetchData();
}, []);
return (
<div>
<h1>Postlar</h1>
<ul>
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default App;
