Scribd
Upload
10 views

React_JS_API_Qollanma

Uploaded by

muxtorovsaidmurod300
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

React_JS_API_Qollanma

Uploaded by

muxtorovsaidmurod300
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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;

You might also like