{"id":14772,"date":"2025-03-10T14:45:18","date_gmt":"2025-03-10T11:45:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-reactte-api-yonetimi-tam-bir-kilavuz\/"},"modified":"2025-03-10T14:45:18","modified_gmt":"2025-03-10T11:45:18","slug":"javascript-ve-reactte-api-yonetimi-tam-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-reactte-api-yonetimi-tam-bir-kilavuz\/","title":{"rendered":"JavaScript ve React’te API Y\u00f6netimi: Tam Bir K\u0131lavuz"},"content":{"rendered":"

<\/p>\n

JavaScript ve React’te API Y\u00f6netimi: Tam Bir K\u0131lavuz<\/p>\n

Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere JavaScript ve React uygulamalar\u0131n\u0131zda API (Uygulama Programlama Aray\u00fcz\u00fc) entegrasyonunu ele alaca\u011f\u0131z. API’ler, uygulaman\u0131z\u0131n farkl\u0131 hizmetlerle ileti\u015fim kurmas\u0131n\u0131 ve veri al\u0131\u015fveri\u015fini sa\u011flayan \u00f6nemli bir unsurdur. Bu rehber, temel kavramlardan ba\u015flayarak, geli\u015fmi\u015f teknikleri ve en iyi uygulamalar\u0131 kapsayacak \u015fekilde haz\u0131rlanm\u0131\u015ft\u0131r. \u00d6ncelikle, API’lerin ne oldu\u011funu ve neden \u00f6nemli oldu\u011funu a\u00e7\u0131klayarak ba\u015flayal\u0131m.<\/p>\n

API’ler Nedir ve Neden \u00d6nemlidir?<\/h2>\n

API’ler, farkl\u0131 yaz\u0131l\u0131m sistemlerinin birbirleriyle ileti\u015fim kurmalar\u0131na olanak tan\u0131yan bir arabirimdir. \u00d6rne\u011fin, bir hava durumu uygulamas\u0131, hava durumu verilerini sa\u011flayan bir API’yi kullanarak g\u00fcncel bilgileri kullan\u0131c\u0131lar\u0131na sunar. Bu sayede, uygulaman\u0131n kendi i\u00e7inde hava durumu tahmini hesaplama gibi karma\u015f\u0131k i\u015flemlerle u\u011fra\u015fmas\u0131 gerekmez. API’ler, geli\u015ftiricilerin zaman ve kaynak tasarrufu yapmalar\u0131na, kod tekrar\u0131n\u0131 azaltmalar\u0131na ve daha h\u0131zl\u0131 ve verimli uygulamalar olu\u015fturmalar\u0131na yard\u0131mc\u0131 olur. K\u0131sacas\u0131, API’ler modern yaz\u0131l\u0131m geli\u015ftirmenin olmazsa olmaz par\u00e7alar\u0131d\u0131r.<\/p>\n

JavaScript’te API \u00c7a\u011fr\u0131lar\u0131: Temel Kavramlar<\/h2>\n

JavaScript’te API \u00e7a\u011fr\u0131lar\u0131 yapmak i\u00e7in birka\u00e7 farkl\u0131 y\u00f6ntem bulunmaktad\u0131r. En yayg\u0131n y\u00f6ntemlerden biri, yerle\u015fik fetch fonksiyonudur. fetch API’si, basit ve okunabilir bir s\u00f6zdizimi ile HTTP istekleri g\u00f6ndermenizi sa\u011flar. A\u015fa\u011f\u0131da basit bir fetch \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n

\nfetch('https:\/\/api.example.com\/data')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(error => console.error('Hata:', error));\n<\/code><\/pre>\n
Bu kod blo\u011fu, belirtilen URL’den veri \u00e7eker, JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve konsolda g\u00f6r\u00fcnt\u00fcler.  Hata durumunda ise hata mesaj\u0131n\u0131 g\u00f6sterir.  Daha geli\u015fmi\u015f senaryolar i\u00e7in, async\/await s\u00f6zdizimi kullanmak daha okunabilir ve y\u00f6netilebilir bir kod yap\u0131s\u0131 sa\u011flar.<\/p>\n
Axios K\u00fct\u00fcphanesi ile API Y\u00f6netimi<\/h2>\n
Axios, JavaScript i\u00e7in pop\u00fcler bir HTTP istek k\u00fct\u00fcphanesidir.  fetch API’sine g\u00f6re daha fazla \u00f6zellik sunar, \u00f6rne\u011fin, otomatik JSON d\u00f6n\u00fc\u015ft\u00fcrme, hata y\u00f6netimi ve ilerleme izleme.  Axios kullanarak API \u00e7a\u011fr\u0131lar\u0131 yapmak i\u00e7in \u015fu \u015fekilde bir \u00f6rnek verebiliriz:<\/p>\n
\naxios.get('https:\/\/api.example.com\/data')\n  .then(response => {\n    console.log(response.data);\n  })\n  .catch(error => {\n    console.error('Hata:', error);\n  });\n<\/code><\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, Axios kullan\u0131m\u0131 fetch API’sine g\u00f6re daha temiz ve \u00f6zl\u00fcd\u00fcr.  Ayr\u0131ca, Axios, ara kesme (interceptors) gibi geli\u015fmi\u015f \u00f6zellikler sunarak hata y\u00f6netimini ve istekleri \u00f6zelle\u015ftirmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
React’te API Entegrasyonu<\/h2>\n
React uygulamalar\u0131nda API entegrasyonu, genellikle useState hook’u ve useEffect hook’u ile ger\u00e7ekle\u015ftirilir. useState, veriyi saklamak i\u00e7in kullan\u0131l\u0131rken, useEffect, API \u00e7a\u011fr\u0131lar\u0131n\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.  Bir \u00f6rnek vermek gerekirse, bir haber listesi g\u00f6r\u00fcnt\u00fclemek i\u00e7in a\u015fa\u011f\u0131daki gibi bir kod blo\u011fu yazabiliriz:<\/p>\n
\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction HaberListesi() {\n  const [haberler, setHaberler] = useState([]);\n\n  useEffect(() => {\n    const haberleriGetir = async () => {\n      try {\n        const response = await axios.get('https:\/\/api.example.com\/haberler');\n        setHaberler(response.data);\n      } catch (error) {\n        console.error('Hata:', error);\n      }\n    };\n\n    haberleriGetir();\n  }, []);\n\n  return (\n