Jinsi ya Kutumia Fetch API na Async Error Handling kwa JavaScript

Fetch API inaruhusu ku-request data kutoka kwa server kwa kutumia JavaScript moderne. Kwa kuongeza async/await na error handling, unaweza kudhibiti errors za network au response kwa urahisi, kufanya web apps zako ziwe robust na responsive.

Hatua kwa Hatua
1️⃣ Basic Fetch Request
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));


Hii inafanya HTTP GET request na kudhibiti error kama network itashindwa.

2️⃣ Using Async/Await na Try/Catch
async function getPost() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}

const data = await response.json();
console.log(data);
} catch (error) {
console.error('Kuna tatizo:', error);
}
}

getPost();


response.ok inahakikisha server inarudisha success response.

try/catch inadhibiti network errors au exceptions ndani ya async function.

3️⃣ Fetch POST Request na Error Handling
async function createPost() {
const postData = { title: "Jina la Post", body: "Maelezo ya Post", userId: 1 };

try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(postData)
});

if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

const data = await response.json();
console.log('Post imeundwa:', data);
} catch (error) {
console.error('Tatizo lilitokea:', error);
}
}

createPost();

4️⃣ Faida za Fetch API na Async Error Handling

Asynchronous requests kwa urahisi bila callback hell.

Error handling robust: network errors na response errors zinadhibitiwa.

Inafaa kwa dynamic data fetching, APIs, na interactive web apps.

Readable & maintainable code kwa kutumia async/await.

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website: https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo): https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka: https://wa.me/255693118509