Fetch API چییە؟

Fetch API ڕێگەیەکی مۆدێرن و بەهێزە بۆ ئەنجامدانی داواکاری HTTP لە جاڤاسکریپتدا. پێشتر بۆ ئەم مەبەستە XMLHttpRequest بەکاردەهات، بەڵام Fetch زۆر ئاسانتر و خوێندنەوەی کۆدەکەی ڕوونترە.

هەنگاوی یەکەم: داواکارییەکی سادە

بۆ ئەوەی داتایەک لە ڕاژەکارێک وەربگریت، تەنها پێویستە ناونیشانی URL-ەکە بدەیت بە فەنکشنی fetch(). ئەم فەنکشنە Promise-ێک دەگەڕێنێتەوە کە وەڵامی ڕاژەکارەکەی تێدایە.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

لە نموونەی سەرەوەدا، ئێمە سەرەتا داواکارییەکە دەنێرین، پاشان وەڵامەکە دەکەین بە JSON و لە کۆتاییدا داتاکە چاپ دەکەین.

بەکارهێنانی Async/Await

بەکارهێنانی Async/Await خوێندنەوەی کۆدەکە ئاسانتر دەکات و کێشەی "Callback Hell" ناهێڵێت. ئەمە شێوازە پەسەندکراوەکەیە لە پڕۆژە مۆدێرنەکاندا.

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  console.log(data);
}

getData();

هەڵەی باو: زۆر کەس لەبیر دەکەن وشەی await بەکاربهێنن لە پێش fetch، ئەمەش دەبێتە هۆی ئەوەی تەنها Promise-ەکە وەربگریت نەک خودی داتاکە.

پشکنینی سەرکەوتنی داواکاری (Error Handling)

تەنها لەبەر ئەوەی fetch کار دەکات، مانای ئەوە نییە کە داواکارییەکە سەرکەوتوو بووە. پێویستە پشکنین بۆ response.ok بکەیت.

نموونەی تەواو و پیشەگەرانە

لێرەدا نموونەیەکی تەواو دەخەینە ڕوو کە هەڵەکان دەگرێت (Catch) و دڵنیا دەبێتەوە لەوەی داتاکە بە دروستی هاتووە.

async function fetchUserData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!response.ok) {
      throw new Error('کێشەیەک لە پەیوەندی ڕوویدا: ' + response.status);
    }
    const data = await response.json();
    console.log('ناوی بەکارهێنەر:', data.name);
  } catch (error) {
    console.error('هەڵە ڕوویدا:', error.message);
  }
}

fetchUserData();

چۆنیەتی ناردنی داتا (POST Request)

Fetch تەنها بۆ وەرگرتنی داتا نییە، دەتوانیت داتا بنێریت بۆ ڕاژەکار بە بەکارهێنانی method: 'POST' و body.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'سڵاو', body: 'ئەمە تاقیکردنەوەیە', userId: 1 }),
  headers: { 'Content-type': 'application/json; charset=UTF-8' }
})
.then(res => res.json())
.then(data => console.log(data));

ڕاهێنان

ئەرک: فەنکشنێک بنووسە بە ناوی getTodo کە بە بەکارهێنانی Fetch داتایەک لەم URL-ەوە بهێنێت: https://jsonplaceholder.typicode.com/todos/5 و تەنها ناونیشانی (title) توودۆکە لە کۆنسۆڵدا چاپ بکات.