G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, sunucudan veri almak ve sunucuya veri g\u00f6ndermek gibi bir\u00e7ok a\u011f ileti\u015fimini ger\u00e7ekle\u015ftirmek zorundad\u0131r. Bu ileti\u015fimler, web sitelerinin dinamik olmas\u0131n\u0131, kullan\u0131c\u0131lar\u0131n ger\u00e7ek zamanl\u0131 bilgiye ula\u015fmas\u0131n\u0131 ve etkile\u015fimli deneyimler ya\u015famas\u0131n\u0131 sa\u011flar. Eskiden bu i\u015flemler i\u00e7in Fetch API, web taray\u0131c\u0131lar\u0131nda yerle\u015fik olarak bulunan, a\u011f istekleri yapmak i\u00e7in modern bir aray\u00fczd\u00fcr. Temel olarak, Peki, neden Fetch API’yi tercih etmelisiniz? \u00d6ncelikle, daha modern ve standartlara uygun bir yakla\u015f\u0131md\u0131r. Taray\u0131c\u0131lar taraf\u0131ndan geni\u015f \u00e7apta desteklenir ve gelecekteki web standartlar\u0131n\u0131n temelini olu\u015fturur. \u0130kinci olarak, Promise tabanl\u0131 olmas\u0131 sayesinde asenkron kodunuzu daha anla\u015f\u0131l\u0131r ve y\u00f6netilebilir hale getirir. Bu, \u00f6zellikle birden fazla a\u011f iste\u011fini e\u015f zamanl\u0131 olarak yapmak veya bir iste\u011fin sonucuna g\u00f6re ba\u015fka i\u015flemler ger\u00e7ekle\u015ftirmek istedi\u011finizde b\u00fcy\u00fck bir fark yarat\u0131r. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, daha esnektir. \u0130stek ba\u015fl\u0131klar\u0131n\u0131 (headers), y\u00f6ntemlerini (method), g\u00f6vdesini (body) ve di\u011fer bir\u00e7ok se\u00e7ene\u011fi kolayca yap\u0131land\u0131rabilirsiniz. Bu esneklik, RESTful API’lerle etkile\u015fim kurarken veya \u00f6zel a\u011f protokollerini kullan\u0131rken size b\u00fcy\u00fck avantaj sa\u011flar. Son olarak, ayr\u0131\u015ft\u0131r\u0131lm\u0131\u015f bir mimariye sahiptir. \u0130stek ve yan\u0131t nesneleri ayr\u0131 ayr\u0131 ele al\u0131n\u0131r, bu da veriyi i\u015fleme s\u00fcrecini daha mod\u00fcler hale getirir.<\/p>\n Bu \u00f6zellikler, Fetch API’yi sadece basit veri \u00e7ekme i\u015flemleri i\u00e7in de\u011fil, ayn\u0131 zamanda karma\u015f\u0131k API entegrasyonlar\u0131, ger\u00e7ek zamanl\u0131 g\u00fcncellemeler ve hatta dosya y\u00fckleme\/indirme gibi geli\u015fmi\u015f senaryolar i\u00e7in de ideal bir ara\u00e7 haline getirir. Fetch API ile tan\u0131\u015fmak, web geli\u015ftirme becerilerinizi bir \u00fcst seviyeye ta\u015f\u0131man\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n Fetch API’nin en s\u0131k kullan\u0131lan y\u00f6ntemleri GET ve POST’tur. Bir web uygulamas\u0131n\u0131n temel i\u015flevlerinden biri, sunucudan veri almak (GET) ve sunucuya veri g\u00f6ndermektir (POST). Fetch API ile bu i\u015flemleri nas\u0131l yapaca\u011f\u0131m\u0131za yak\u0131ndan bakal\u0131m.<\/p>\n GET iste\u011fi, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, belirtilen kaynaktan veri almak i\u00e7in kullan\u0131l\u0131r. Genellikle bir URL’ye yap\u0131lan bir istektir ve sunucu bu iste\u011fe kar\u015f\u0131l\u0131k olarak istenen veriyi d\u00f6nd\u00fcr\u00fcr. Fetch API ile basit bir GET iste\u011fi yapmak olduk\u00e7a kolayd\u0131r. Varsay\u0131lan olarak, \u00d6rne\u011fin, bir JSONPlaceholder API’sinden kullan\u0131c\u0131 bilgilerini almak istedi\u011fimizi varsayal\u0131m.<\/p>\n Yukar\u0131daki kodda, POST iste\u011fi, sunucuya veri g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r. Bu, yeni bir kaynak olu\u015fturmak, mevcut bir kayna\u011f\u0131 g\u00fcncellemek veya bir i\u015flem ger\u00e7ekle\u015ftirmek gibi \u00e7e\u015fitli ama\u00e7larla yap\u0131labilir. POST iste\u011fi yaparken, \u00d6rne\u011fin, yeni bir kullan\u0131c\u0131 olu\u015fturmak i\u00e7in POST iste\u011fi yapal\u0131m.<\/p>\n Burada dikkat edilmesi gereken birka\u00e7 \u00f6nemli nokta var:<\/p>\n * Sunucu, iste\u011fi ba\u015far\u0131yla i\u015fledi\u011finde genellikle olu\u015fturulan kayna\u011f\u0131n bilgilerini i\u00e7eren bir yan\u0131t d\u00f6nd\u00fcr\u00fcr. Bu yan\u0131t\u0131 da yine Web isteklerinde hata y\u00f6netimi, sa\u011flam ve g\u00fcvenilir uygulamalar geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Fetch API, Promise tabanl\u0131 yap\u0131s\u0131 sayesinde hata y\u00f6netimini olduk\u00e7a kolayla\u015ft\u0131r\u0131r. Ancak, Yukar\u0131daki \u00f6rneklerde de g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Bu yakla\u015f\u0131m, hem a\u011f ba\u011flant\u0131s\u0131 kesintileri gibi beklenmedik durumlar\u0131 hem de sunucudan gelen belirli hata kodlar\u0131n\u0131 (404, 500 vb.) ayr\u0131 ayr\u0131 ele almam\u0131z\u0131 sa\u011flar. Ayr\u0131ca, baz\u0131 API’ler kendi hata yap\u0131lar\u0131n\u0131 tan\u0131mlayabilir. \u00d6rne\u011fin, bir hata durumunda bile 200 OK d\u00f6nd\u00fcrebilir ve yan\u0131t g\u00f6vdesine bir hata mesaj\u0131 veya kodu ekleyebilir. Bu gibi durumlarda, Bu esneklik, Fetch API’yi farkl\u0131 API tasar\u0131mlar\u0131yla uyumlu hale getirir. \u00d6nemli olan, uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na ve entegre oldu\u011funuz API’nin dok\u00fcmantasyonuna g\u00f6re uygun hata y\u00f6netimi stratejisini belirlemektir.<\/p>\n Fetch API, temel GET ve POST isteklerinin \u00f6tesinde, daha karma\u015f\u0131k a\u011f ileti\u015fimi senaryolar\u0131 i\u00e7in de g\u00fc\u00e7l\u00fc se\u00e7enekler sunar. Bunlardan baz\u0131lar\u0131 HTTP ba\u015fl\u0131klar\u0131, iste\u011fin veya yan\u0131t\u0131n i\u00e7eri\u011fi hakk\u0131nda ek bilgi ta\u015f\u0131r. \u00d6rne\u011fin, Bu \u00f6rnekte, * Genellikle, API’lerle \u00e7al\u0131\u015f\u0131rken * \u00d6rne\u011fin, oturum \u00e7erezlerini kullanarak bir API’ye eri\u015fmek istiyorsan\u0131z Bu geli\u015fmi\u015f se\u00e7enekler, Fetch API’yi daha karma\u015f\u0131k ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda kullanmam\u0131za olanak tan\u0131r. API’lerle entegrasyon yaparken bu se\u00e7enekleri do\u011fru anlamak, sorunsuz bir ileti\u015fim sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n \u015eimdi, Fetch API’yi ger\u00e7ek bir senaryoda, basit bir blog uygulamas\u0131 geli\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcnerek nas\u0131l kullanabilece\u011fimizi inceleyelim. Bu blog uygulamas\u0131nda, makaleleri listeleyecek, tek bir makaleyi g\u00f6r\u00fcnt\u00fcleyecek ve yeni bir makale olu\u015fturabilece\u011fiz.<\/p>\n Kullan\u0131c\u0131 blog ana sayfas\u0131na geldi\u011finde, t\u00fcm makalelerin bir listesini g\u00f6rmelidir. Bu, bir GET iste\u011fi ile yap\u0131labilir.<\/p>\n Bu \u00f6rnekte, Kullan\u0131c\u0131 bir makalenin ba\u015fl\u0131\u011f\u0131na t\u0131klad\u0131\u011f\u0131nda, o makalenin tam i\u00e7eri\u011fini g\u00f6r\u00fcnt\u00fclemek ister. Bu, makalenin ID’sini kullanarak ba\u015fka bir GET iste\u011fi ile yap\u0131l\u0131r.<\/p>\n Bu senaryoda, URL’den dinamik olarak makale ID’sini al\u0131p ( Kullan\u0131c\u0131 bir form arac\u0131l\u0131\u011f\u0131yla yeni bir makale yaz\u0131p g\u00f6nderdi\u011finde, bu veriyi sunucuya g\u00f6ndermemiz gerekir. Bu, bir POST iste\u011fi ile yap\u0131l\u0131r.<\/p>\n Bu senaryoda, form g\u00f6nderildi\u011finde Bu vaka analizi, Fetch API’nin bir web uygulamas\u0131n\u0131n temel i\u015flevlerini yerine getirmek i\u00e7in nas\u0131l kullan\u0131labilece\u011fini g\u00f6stermektedir. Veri alma, g\u00f6r\u00fcnt\u00fcleme ve g\u00f6nderme gibi i\u015flemler, Fetch API’nin temiz s\u00f6z dizimi ve Promise tabanl\u0131 yap\u0131s\u0131 sayesinde daha y\u00f6netilebilir hale gelir.<\/p>\n Fetch API, sadece JSON veya metin verileriyle s\u0131n\u0131rl\u0131 de\u011fildir; ayn\u0131 zamanda dosya y\u00fckleme ve indirme gibi ikili (binary) veri i\u015flemleri i\u00e7in de kullan\u0131labilir. Bu, \u00f6zellikle kullan\u0131c\u0131lar\u0131n resim, belge veya di\u011fer dosyalar\u0131 uygulamalar\u0131n\u0131za y\u00fcklemesine veya sunucudan dosya indirmesine olanak tan\u0131yan \u00f6zellikler geli\u015ftirmek istedi\u011finizde \u00f6nemlidir.<\/p>\n Dosya y\u00fcklemek i\u00e7in genellikle Bu \u00f6rnekte, bir Sunucudan bir dosya indirmek i\u00e7in de Fetch API kullan\u0131labilir. Bu durumda, yan\u0131t\u0131n g\u00f6vdesini XMLHttpRequest<\/code> gibi daha karma\u015f\u0131k ve eski nesil y\u00f6ntemler kullan\u0131l\u0131rken, modern JavaScript d\u00fcnyas\u0131 bize \u00e7ok daha zarif ve g\u00fc\u00e7l\u00fc bir ara\u00e7 sunuyor: Fetch API. Fetch API, a\u011f isteklerini y\u00f6netmek i\u00e7in daha temiz bir s\u00f6z dizimi ve daha iyi bir geli\u015ftirici deneyimi vaat eder. Bu makalede, Fetch API’nin temellerinden ba\u015flayarak, \u00e7e\u015fitli senaryolarda nas\u0131l kullan\u0131laca\u011f\u0131na dair ad\u0131m ad\u0131m \u00f6rnekler ve ileri d\u00fczey ipu\u00e7lar\u0131 ile konuyu derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, bu g\u00fc\u00e7l\u00fc API’yi tam olarak anlaman\u0131z\u0131 ve projelerinizde etkili bir \u015fekilde kullanabilmenizi sa\u011flamakt\u0131r.<\/p>\nFetch API Nedir ve Neden Kullanmal\u0131s\u0131n\u0131z?<\/h3>\n
XMLHttpRequest<\/code>‘in yerini almay\u0131 hedefleyen, Promise tabanl\u0131 bir \u00e7\u00f6z\u00fcm sunar. Bu, a\u011f isteklerinin asenkron do\u011fas\u0131n\u0131 daha kolay y\u00f6netmenizi sa\u011flar. Geli\u015ftiriciler i\u00e7in en b\u00fcy\u00fck avantaj\u0131, s\u00f6z diziminin daha basit ve okunabilir olmas\u0131d\u0131r. XMLHttpRequest<\/code>‘in olay dinleyicileri ve karma\u015f\u0131k yap\u0131s\u0131 yerine, Fetch API’de then()<\/code> ve catch()<\/code> gibi Promise metotlar\u0131 sayesinde isteklerin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 veya bir hata olu\u015fup olu\u015fmad\u0131\u011f\u0131n\u0131 net bir \u015fekilde y\u00f6netebilirsiniz.<\/p>\nTemel Fetch \u0130stekleri: GET ve POST<\/h3>\n
GET \u0130stekleri ile Veri Alma<\/h4>\n
fetch()<\/code> fonksiyonu bir GET iste\u011fi yapar.<\/p>\n<pre><code class="language-javascript">\nfetch('https:\/\/jsonplaceholder.typicode.com\/users\/1')\n .then(response => {\n \/\/ \u0130lk then blo\u011fu, iste\u011fin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.\n \/\/ response.ok \u00f6zelli\u011fi true ise, durum kodu 200-299 aras\u0131ndad\u0131r.\n if (!response.ok) {\n throw new Error('A\u011f yan\u0131t\u0131 beklenen gibi de\u011fildi: ' + response.statusText);\n }\n \/\/ response.json() metodu, yan\u0131t g\u00f6vdesini JSON olarak ayr\u0131\u015ft\u0131r\u0131r ve bir Promise d\u00f6nd\u00fcr\u00fcr.\n return response.json();\n })\n .then(data => {\n \/\/ \u0130kinci then blo\u011fu, JSON verisi ba\u015far\u0131yla ayr\u0131\u015ft\u0131r\u0131ld\u0131ktan sonra \u00e7al\u0131\u015f\u0131r.\n console.log('Kullan\u0131c\u0131 Bilgileri:', data);\n \/\/ Burada al\u0131nan veriyi DOM'a ekleyebilir veya ba\u015fka i\u015flemler yapabilirsiniz.\n })\n .catch(error => {\n \/\/ Herhangi bir hata olu\u015fursa (a\u011f hatas\u0131, ayr\u0131\u015ft\u0131rma hatas\u0131 vb.) bu blok \u00e7al\u0131\u015f\u0131r.\n console.error('Fetch i\u015flemi s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n });\n<\/code><\/pre><\/code><\/pre>\nfetch()<\/code> fonksiyonuna istedi\u011fimiz URL’yi iletiyoruz. D\u00f6nd\u00fcr\u00fclen Promise’in ilk .then()<\/code> blo\u011fu, iste\u011fin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. response.ok<\/code> \u00f6zelli\u011fi, HTTP durum kodunun ba\u015far\u0131l\u0131 aral\u0131kta (200-299) olup olmad\u0131\u011f\u0131n\u0131 belirtir. E\u011fer bir hata varsa, bir Error<\/code> f\u0131rlat\u0131r\u0131z. Ba\u015far\u0131l\u0131ysa, response.json()<\/code> metodunu \u00e7a\u011f\u0131rarak yan\u0131t g\u00f6vdesini JSON format\u0131nda ayr\u0131\u015ft\u0131r\u0131r\u0131z. Bu metot da bir Promise d\u00f6nd\u00fcr\u00fcr. \u0130kinci .then()<\/code> blo\u011fu, JSON verisi ba\u015far\u0131yla ayr\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r ve bu veriye eri\u015fim sa\u011flar\u0131z. Son olarak, .catch()<\/code> blo\u011fu, istek s\u0131ras\u0131nda olu\u015fabilecek herhangi bir hatay\u0131 yakalamak i\u00e7in kullan\u0131l\u0131r. Bu, a\u011f ba\u011flant\u0131 sorunlar\u0131 veya sunucu hatalar\u0131 gibi durumlar\u0131 y\u00f6netmemize yard\u0131mc\u0131 olur.<\/p>\nPOST \u0130stekleri ile Veri G\u00f6nderme<\/h4>\n
fetch()<\/code> fonksiyonuna iste\u011fin konfig\u00fcrasyonunu i\u00e7eren ikinci bir arg\u00fcman (bir obje) ge\u00e7irmemiz gerekir. Bu obje i\u00e7inde method<\/code>, headers<\/code> ve body<\/code> gibi \u00f6zellikleri belirtebiliriz.<\/p>\n<pre><code class="language-javascript">\nconst newUser = {\n name: 'Ahmet Y\u0131lmaz',\n username: 'ahmetymz',\n email: 'ahmet.yilmaz@example.com',\n phone: '123-456-7890',\n website: 'ahmet.com'\n};\n\nfetch('https:\/\/jsonplaceholder.typicode.com\/users', {\n method: 'POST', \/\/ \u0130stek y\u00f6ntemini belirtiyoruz\n headers: {\n 'Content-Type': 'application\/json' \/\/ G\u00f6nderdi\u011fimiz verinin JSON format\u0131nda oldu\u011funu belirtiyoruz\n },\n body: JSON.stringify(newUser) \/\/ JavaScript objesini JSON string'ine d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz\n})\n .then(response => {\n if (!response.ok) {\n throw new Error('A\u011f yan\u0131t\u0131 beklenen gibi de\u011fildi: ' + response.statusText);\n }\n return response.json(); \/\/ Genellikle POST istekleri de yan\u0131t olarak olu\u015fturulan veriyi d\u00f6nd\u00fcr\u00fcr\n })\n .then(data => {\n console.log('Kullan\u0131c\u0131 ba\u015far\u0131yla olu\u015fturuldu:', data);\n })\n .catch(error => {\n console.error('Kullan\u0131c\u0131 olu\u015fturma s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n });\n<\/code><\/pre><\/code><\/pre>\nmethod: 'POST'<\/code><\/strong>: \u0130stek y\u00f6ntemini a\u00e7\u0131k\u00e7a ‘POST’ olarak belirtiyoruz.
\n* headers: { 'Content-Type': 'application\/json' }<\/code><\/strong>: Sunucuya g\u00f6nderdi\u011fimiz verinin t\u00fcr\u00fcn\u00fc belirtiyoruz. Genellikle API’ler JSON format\u0131nda veri bekler.
\n* body: JSON.stringify(newUser)<\/code><\/strong>: G\u00f6nderece\u011fimiz JavaScript objesini JSON.stringify()<\/code> metodu ile JSON string’ine d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz. Fetch API, body<\/code> \u00f6zelli\u011fine string veya FormData<\/code> gibi veri t\u00fcrleri alabilir.<\/p>\nresponse.json()<\/code> ile al\u0131p i\u015fleyebiliriz. POST istekleri, kullan\u0131c\u0131 kay\u0131tlar\u0131, yorum g\u00f6nderme veya bir sipari\u015f verme gibi bir\u00e7ok senaryoda kullan\u0131l\u0131r.<\/p>\nFetch API ile Hata Y\u00f6netimi ve Durum Kodlar\u0131<\/h3>\n
fetch()<\/code> fonksiyonunun kendisi sadece a\u011f ba\u011flant\u0131s\u0131 kesintileri gibi d\u00fc\u015f\u00fck seviyeli hatalar\u0131 yakalar. HTTP durum kodlar\u0131 (\u00f6rne\u011fin, 404 Not Found, 500 Internal Server Error) a\u011f iste\u011finin kendisi ba\u015far\u0131l\u0131 oldu\u011fu i\u00e7in fetch()<\/code> taraf\u0131ndan hata olarak alg\u0131lanmaz. Bu nedenle, bu t\u00fcr hatalar\u0131 kendimiz y\u00f6netmemiz gerekir.<\/p>\nresponse.ok<\/code> \u00f6zelli\u011fini kullanarak HTTP durum kodlar\u0131n\u0131n ba\u015far\u0131l\u0131 aral\u0131kta (200-299) olup olmad\u0131\u011f\u0131n\u0131 kontrol ediyoruz. E\u011fer response.ok<\/code> false<\/code> ise, bu genellikle bir istemci hatas\u0131 (4xx) veya sunucu hatas\u0131 (5xx) anlam\u0131na gelir. Bu durumda, durumu daha anla\u015f\u0131l\u0131r hale getirmek i\u00e7in \u00f6zel bir Error<\/code> nesnesi f\u0131rlatmak iyi bir pratiktir.<\/p>\n<pre><code class="language-javascript">\nfetch('https:\/\/api.example.com\/veriler')\n .then(response => {\n if (!response.ok) {\n \/\/ Durum kodunu ve metnini i\u00e7eren bir hata mesaj\u0131 olu\u015fturuyoruz.\n \/\/ Bu, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r.\n throw new Error(HTTP hatas\u0131! Durum: ${response.status} ${response.statusText}<\/code>);\n }\n return response.json();\n })\n .then(data => {\n console.log('Veriler al\u0131nd\u0131:', data);\n })\n .catch(error => {\n \/\/ Buras\u0131 hem a\u011f hatalar\u0131n\u0131 hem de yukar\u0131da f\u0131rlatt\u0131\u011f\u0131m\u0131z HTTP hatalar\u0131n\u0131 yakalar.\n console.error('Veri \u00e7ekme i\u015flemi ba\u015far\u0131s\u0131z oldu:', error.message);\n \/\/ Kullan\u0131c\u0131ya anlaml\u0131 bir hata mesaj\u0131 g\u00f6sterebilirsiniz.\n \/\/ \u00d6rne\u011fin: document.getElementById('hataMesaji').textContent = 'Veriler al\u0131namad\u0131, l\u00fctfen daha sonra tekrar deneyin.';\n });\n<\/code><\/pre><\/code><\/pre>\n.catch()<\/code> blo\u011fu, Promise zincirindeki herhangi bir noktada meydana gelen t\u00fcm hatalar\u0131 yakalar. Bu, kodunuzu daha sa\u011flam hale getirir ve kullan\u0131c\u0131lar\u0131n\u0131za daha iyi bir deneyim sunman\u0131za yard\u0131mc\u0131 olur.<\/p>\nresponse.json()<\/code> ile veriyi ald\u0131ktan sonra, verinin kendisi i\u00e7indeki bir \u00f6zelli\u011fi kontrol ederek hata durumunu belirlemeniz gerekebilir.<\/p>\n<pre><code class="language-javascript">\nfetch('https:\/\/api.example.com\/islem')\n .then(response => response.json()) \/\/ \u00d6nce JSON'a \u00e7eviriyoruz\n .then(data => {\n if (data.basarili) { \/\/ API'nin kendi hata kontrol\u00fc\n console.log('\u0130\u015flem ba\u015far\u0131l\u0131:', data.sonuc);\n } else {\n \/\/ API'nin belirtti\u011fi hata mesaj\u0131n\u0131 kullan\u0131yoruz\n throw new Error('API hatas\u0131: ' + data.mesaj);\n }\n })\n .catch(error => {\n console.error('\u0130\u015flem s\u0131ras\u0131nda hata olu\u015ftu:', error.message);\n });\n<\/code><\/pre><\/code><\/pre>\nFetch API ile Geli\u015fmi\u015f \u0130stekler: Headers, Mode, Credentials<\/h3>\n
headers<\/code>, mode<\/code> ve credentials<\/code> gibi yap\u0131land\u0131rma se\u00e7enekleridir. Bu se\u00e7enekler, isteklerimizi daha hassas bir \u015fekilde kontrol etmemizi sa\u011flar.<\/p>\nHeaders (Ba\u015fl\u0131klar)<\/h4>\n
Content-Type<\/code> ba\u015fl\u0131\u011f\u0131, iste\u011fin g\u00f6vdesinin hangi formatta oldu\u011funu belirtir (\u00f6rne\u011fin, application\/json<\/code>). Authorization<\/code> ba\u015fl\u0131\u011f\u0131, kimlik do\u011frulama bilgilerini ta\u015f\u0131r. Fetch API ile ba\u015fl\u0131klar\u0131 headers<\/code> se\u00e7ene\u011fi arac\u0131l\u0131\u011f\u0131yla kolayca ayarlayabiliriz.<\/p>\n<pre><code class="language-javascript">\nfetch('https:\/\/api.example.com\/protected-resource', {\n method: 'GET',\n headers: {\n 'Content-Type': 'application\/json',\n 'Authorization': 'Bearer YOUR_ACCESS_TOKEN', \/\/ API anahtar\u0131n\u0131z\u0131 veya token'\u0131n\u0131z\u0131 buraya ekleyin\n 'X-Custom-Header': 'MyValue' \/\/ \u00d6zel bir ba\u015fl\u0131k ekleme\n }\n})\n .then(response => {\n if (!response.ok) {\n throw new Error('Yetkilendirme hatas\u0131 veya ba\u015fka bir sorun.');\n }\n return response.json();\n })\n .then(data => {\n console.log('Korunmu\u015f veriler:', data);\n })\n .catch(error => {\n console.error('\u0130stek ba\u015far\u0131s\u0131z oldu:', error);\n });\n<\/code><\/pre><\/code><\/pre>\nAuthorization<\/code> ba\u015fl\u0131\u011f\u0131 ile bir API anahtar\u0131n\u0131 veya bir OAuth token’\u0131n\u0131 g\u00f6nderiyoruz. X-Custom-Header<\/code> ise tamamen iste\u011fe ba\u011fl\u0131, kendi belirledi\u011fimiz bir ba\u015fl\u0131k \u00f6rne\u011fidir. Ba\u015fl\u0131klar, API’lerle etkile\u015fim kurarken kimlik do\u011frulama, i\u00e7erik t\u00fcr\u00fc belirtme veya \u00f6zel meta veriler iletme gibi bir\u00e7ok ama\u00e7la kullan\u0131l\u0131r.<\/p>\nMode (Mod)<\/h4>\n
mode<\/code> se\u00e7ene\u011fi, iste\u011fin nas\u0131l i\u015flenece\u011fini belirler. En yayg\u0131n de\u011feri cors<\/code>‘tur (Cross-Origin Resource Sharing). Taray\u0131c\u0131lar, g\u00fcvenlik nedeniyle farkl\u0131 bir alan ad\u0131ndan (origin) gelen isteklere varsay\u0131lan olarak izin vermez. CORS, bu k\u0131s\u0131tlamay\u0131 a\u015fmak i\u00e7in bir mekanizmad\u0131r.<\/p>\ncors<\/code> (varsay\u0131lan)<\/strong>: Taray\u0131c\u0131, iste\u011fin CORS kurallar\u0131na uygun olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer sunucu uygun ba\u015fl\u0131klar\u0131 d\u00f6nd\u00fcrm\u00fcyorsa, istek ba\u015far\u0131s\u0131z olabilir.
\n* no-cors<\/code><\/strong>: Bu modda yap\u0131lan istekler, taray\u0131c\u0131 taraf\u0131ndan k\u0131s\u0131tlanmaz ancak yan\u0131t g\u00f6vdesine eri\u015filemez. Bu genellikle bir servis \u00e7al\u0131\u015ft\u0131r\u0131c\u0131s\u0131 (service worker) ile kullan\u0131l\u0131r.
\n* same-origin<\/code><\/strong>: \u0130stek sadece ayn\u0131 alan ad\u0131na yap\u0131ld\u0131\u011f\u0131nda ba\u015far\u0131l\u0131 olur. Farkl\u0131 bir alana yap\u0131l\u0131rsa hata verir.<\/p>\nmode<\/code>‘u varsay\u0131lan (cors<\/code>) olarak b\u0131rak\u0131rs\u0131n\u0131z. E\u011fer bir CORS hatas\u0131 al\u0131yorsan\u0131z, bu genellikle sunucu taraf\u0131nda yap\u0131land\u0131r\u0131lmas\u0131 gereken bir sorundur.<\/p>\nCredentials (Kimlik Bilgileri)<\/h4>\n
credentials<\/code> se\u00e7ene\u011fi, taray\u0131c\u0131n\u0131n istekle birlikte \u00e7erezleri (cookies) ve kimlik do\u011frulama ba\u015fl\u0131klar\u0131n\u0131 (Authorization) g\u00f6ndermesi gerekip gerekmedi\u011fini kontrol eder.<\/p>\nomit<\/code> (varsay\u0131lan)<\/strong>: Taray\u0131c\u0131, kimlik bilgileri g\u00f6ndermez.
\n* same-origin<\/code><\/strong>: Taray\u0131c\u0131, sadece istek ayn\u0131 alan ad\u0131na yap\u0131l\u0131yorsa kimlik bilgileri g\u00f6nderir.
\n* include<\/code><\/strong>: Taray\u0131c\u0131, istek ayn\u0131 alan ad\u0131na yap\u0131lmasa bile her zaman kimlik bilgileri g\u00f6nderir. Bu, \u00f6zellikle kimlik do\u011frulama gerektiren API’lerle \u00e7al\u0131\u015f\u0131rken kullan\u0131\u015fl\u0131d\u0131r.<\/p>\ncredentials: 'include'<\/code> kullanabilirsiniz.<\/p>\n<pre><code class="language-javascript">\nfetch('https:\/\/api.example.com\/user-profile', {\n method: 'GET',\n credentials: 'include' \/\/ \u00c7erezleri de g\u00f6nderece\u011fimizi belirtiyoruz\n})\n .then(response => {\n if (!response.ok) {\n throw new Error('Profil bilgileri al\u0131namad\u0131.');\n }\n return response.json();\n })\n .then(data => {\n console.log('Kullan\u0131c\u0131 Profili:', data);\n })\n .catch(error => {\n console.error('Profil alma hatas\u0131:', error);\n });\n<\/code><\/pre><\/code><\/pre>\nVaka Analizi: Bir Blog Uygulamas\u0131nda Fetch API Kullan\u0131m\u0131<\/h3>\n
Senaryo 1: Makaleleri Listeleme (GET)<\/h4>\n
<pre><code class="language-javascript">\n\/\/ Makaleleri getiren fonksiyon\nfunction makaleleriGetir() {\n const makaleListesiElementi = document.getElementById('makaleListesi');\n makaleListesiElementi.innerHTML = 'Y\u00fckleniyor...'; \/\/ Y\u00fckleme g\u00f6stergesi\n\n fetch('https:\/\/api.example.com\/articles') \/\/ Makalelerin bulundu\u011fu API u\u00e7 noktas\u0131\n .then(response => {\n if (!response.ok) {\n throw new Error(Makaleler getirilemedi. Durum: ${response.status}<\/code>);\n }\n return response.json();\n })\n .then(makaleler => {\n makaleListesiElementi.innerHTML = ''; \/\/ Y\u00fckleme g\u00f6stergesini temizle\n if (makaleler.length === 0) {\n makaleListesiElementi.innerHTML = '<p>Hen\u00fcz hi\u00e7 makale yok.<\/p>';\n return;\n }\n makaleler.forEach(makale => {\n const li = document.createElement('li');\n li.innerHTML = \n <h3>${makale.baslik}<\/h3>\n <p>${makale.ozet}...<\/p>\n <a href="\/makale\/${makale.id}">Devam\u0131n\u0131 Oku<\/a>\n <\/code>;\n makaleListesiElementi.appendChild(li);\n });\n })\n .catch(error => {\n console.error('Makale listesi \u00e7ekme hatas\u0131:', error);\n makaleListesiElementi.innerHTML = <p style="color: red;">Makaleler y\u00fcklenirken bir hata olu\u015ftu: ${error.message}<\/p><\/code>;\n });\n}\n\n\/\/ Sayfa y\u00fcklendi\u011finde fonksiyonu \u00e7a\u011f\u0131r\ndocument.addEventListener('DOMContentLoaded', makaleleriGetir);\n<\/code><\/pre><\/code><\/pre>\nmakaleleriGetir<\/code> fonksiyonu, https:\/\/api.example.com\/articles<\/code> adresine bir GET iste\u011fi g\u00f6nderir. Yan\u0131t ba\u015far\u0131yla al\u0131nd\u0131\u011f\u0131nda, makaleler bir liste \u00f6\u011fesi olarak makaleListesiElementi<\/code> i\u00e7ine eklenir. Hata durumunda ise kullan\u0131c\u0131ya bir hata mesaj\u0131 g\u00f6sterilir.<\/p>\nSenaryo 2: Tek Bir Makaleyi G\u00f6r\u00fcnt\u00fcleme (GET)<\/h4>\n
<pre><code class="language-javascript">\n\/\/ URL'den makale ID'sini alan ve makaleyi getiren fonksiyon\nfunction makaleGoster(makaleId) {\n const makaleDetayElementi = document.getElementById('makaleDetay');\n makaleDetayElementi.innerHTML = 'Makale y\u00fckleniyor...';\n\n fetch(https:\/\/api.example.com\/articles\/${makaleId}<\/code>) \/\/ ID'ye g\u00f6re belirli makaleyi al\n .then(response => {\n if (!response.ok) {\n if (response.status === 404) {\n throw new Error('Bu makale bulunamad\u0131.');\n }\n throw new Error(Makale getirilemedi. Durum: ${response.status}<\/code>);\n }\n return response.json();\n })\n .then(makale => {\n makaleDetayElementi.innerHTML = \n <h2>${makale.baslik}<\/h2>\n <p>Yazar: ${makale.yazar}<\/p>\n <p>${makale.icerik}<\/p>\n <\/code>;\n })\n .catch(error => {\n console.error('Makale detaylar\u0131 \u00e7ekme hatas\u0131:', error);\n makaleDetayElementi.innerHTML = <p style="color: red;">Makale y\u00fcklenirken bir hata olu\u015ftu: ${error.message}<\/p><\/code>;\n });\n}\n\n\/\/ Sayfa y\u00fcklendi\u011finde URL'den ID'yi al\u0131p fonksiyonu \u00e7a\u011f\u0131r\ndocument.addEventListener('DOMContentLoaded', () => {\n const urlParcalari = window.location.pathname.split('\/');\n const makaleId = urlParcalari[urlParcalari.length - 1]; \/\/ \u00d6rne\u011fin: \/makale\/123 -> 123\n if (makaleId) {\n makaleGoster(makaleId);\n } else {\n document.getElementById('makaleDetay').innerHTML = '<p>L\u00fctfen ge\u00e7erli bir makale ID'si belirtin.<\/p>';\n }\n});\n<\/code><\/pre><\/code><\/pre>\n\/makale\/123<\/code> gibi), https:\/\/api.example.com\/articles\/123<\/code> adresine bir GET iste\u011fi g\u00f6nderiyoruz. 404 hatas\u0131 gibi \u00f6zel durumlar\u0131 da y\u00f6netiyoruz.<\/p>\nSenaryo 3: Yeni Bir Makale Olu\u015fturma (POST)<\/h4>\n
<pre><code class="language-javascript">\nconst makaleFormu = document.getElementById('makaleFormu');\nconst baslikInput = document.getElementById('baslik');\nconst icerikTextarea = document.getElementById('icerik');\nconst mesajAlani = document.getElementById('formMesaji');\n\nmakaleFormu.addEventListener('submit', function(event) {\n event.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderilmesini engelle\n\n const yeniMakale = {\n baslik: baslikInput.value,\n icerik: icerikTextarea.value,\n yazar: 'Anonim' \/\/ Varsay\u0131lan veya kullan\u0131c\u0131dan al\u0131nan yazar bilgisi\n };\n\n mesajAlani.textContent = 'Makale kaydediliyor...';\n\n fetch('https:\/\/api.example.com\/articles', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(yeniMakale)\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(Makale kaydedilemedi. Durum: ${response.status}<\/code>);\n }\n return response.json(); \/\/ Genellikle olu\u015fturulan makalenin bilgilerini d\u00f6nd\u00fcr\u00fcr\n })\n .then(olusturulanMakale => {\n mesajAlani.textContent = 'Makale ba\u015far\u0131yla kaydedildi!';\n baslikInput.value = ''; \/\/ Formu temizle\n icerikTextarea.value = '';\n \/\/ Kullan\u0131c\u0131y\u0131 yeni makalenin sayfas\u0131na y\u00f6nlendirebiliriz\n \/\/ window.location.href = \/makale\/${olusturulanMakale.id}<\/code>;\n })\n .catch(error => {\n console.error('Makale kaydetme hatas\u0131:', error);\n mesajAlani.textContent = Hata: ${error.message}<\/code>;\n });\n});\n<\/code><\/pre><\/code><\/pre>\nevent.preventDefault()<\/code> ile varsay\u0131lan form g\u00f6nderimi engellenir. Ard\u0131ndan, formdaki veriler toplanarak bir JavaScript objesi olu\u015fturulur. Bu obje JSON.stringify()<\/code> ile string’e \u00e7evrilir ve POST<\/code> iste\u011fi ile API’ye g\u00f6nderilir. Ba\u015far\u0131l\u0131 oldu\u011funda, kullan\u0131c\u0131ya bir ba\u015far\u0131 mesaj\u0131 g\u00f6sterilir ve form temizlenir.<\/p>\nFetch API ile Dosya Y\u00fckleme ve \u0130ndirme<\/h3>\n
Dosya Y\u00fckleme<\/h4>\n
FormData<\/code> nesnesi kullan\u0131l\u0131r. FormData<\/code>, HTML formlar\u0131ndaki verileri temsil eden bir yap\u0131d\u0131r ve dosya alanlar\u0131n\u0131 da i\u00e7erebilir.<\/p>\n<pre><code class="language-javascript">\nconst dosyaYuklemeFormu = document.getElementById('dosyaYuklemeFormu');\nconst dosyaSecici = document.getElementById('dosyaSecici'); \/\/ <input type="file"> elementi\n\ndosyaYuklemeFormu.addEventListener('submit', function(event) {\n event.preventDefault();\n\n const secilenDosya = dosyaSecici.files[0]; \/\/ Kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi ilk dosya\n\n if (!secilenDosya) {\n alert('L\u00fctfen y\u00fcklemek i\u00e7in bir dosya se\u00e7in.');\n return;\n }\n\n const formData = new FormData();\n formData.append('dosya', secilenDosya); \/\/ 'dosya' API'nin bekledi\u011fi alan ad\u0131 olmal\u0131\n\n fetch('https:\/\/api.example.com\/upload', {\n method: 'POST',\n \/\/ 'Content-Type' ba\u015fl\u0131\u011f\u0131n\u0131 FormData ile otomatik olarak ayarlan\u0131r, bu y\u00fczden burada belirtmeye gerek yok.\n body: formData\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(Dosya y\u00fckleme ba\u015far\u0131s\u0131z. Durum: ${response.status}<\/code>);\n }\n return response.json(); \/\/ Sunucudan gelen yan\u0131t\u0131 i\u015fleyin\n })\n .then(data => {\n console.log('Dosya ba\u015far\u0131yla y\u00fcklendi:', data);\n alert('Dosya ba\u015far\u0131yla y\u00fcklendi!');\n })\n .catch(error => {\n console.error('Dosya y\u00fckleme hatas\u0131:', error);\n alert(Dosya y\u00fcklenirken bir hata olu\u015ftu: ${error.message}<\/code>);\n });\n});\n<\/code><\/pre><\/code><\/pre>\n<\/code> elementinden se\u00e7ilen dosya al\u0131n\u0131r. Ard\u0131ndan, bu dosya FormData<\/code> nesnesine eklenir ve fetch<\/code> iste\u011finin body<\/code>‘si olarak g\u00f6nderilir. FormData<\/code> kullan\u0131ld\u0131\u011f\u0131nda, Content-Type<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 manuel olarak ayarlaman\u0131za gerek yoktur; taray\u0131c\u0131 bunu sizin i\u00e7in do\u011fru \u015fekilde yapar (genellikle multipart\/form-data<\/code>).<\/p>\nDosya \u0130ndirme<\/h4>\n
blob<\/code> olarak almam\u0131z ve ard\u0131ndan bunu bir URL’ye d\u00f6n\u00fc\u015ft\u00fcrmemiz gerekir.<\/p>\n<pre><code class="language-javascript">\nfunction dosyayiIndir(url, dosyaAdi) {\n fetch(url)\n .then(response => {\n if (!response.ok) {\n throw new Error(Dosya indirilemedi. Durum: ${response.status}<\/code>);\n }\n \/\/ Yan\u0131t\u0131n i\u00e7eri\u011fini 'blob' olarak al\u0131yoruz\n return response.blob();\n })\n .then(blob => {\n \/\/ Blob'u bir URL'ye d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = dosyaAdi; \/\/ \u0130ndirilecek dosyan\u0131n ad\u0131\n document.body.appendChild(a);\n a.click(); \/\/ Sahte bir t\u0131klama ile indirmeyi ba\u015flat\u0131yoruz\n window.URL.revokeObjectURL(url); \/\/ Olu\u015fturulan URL'yi temizliyoruz\n a.remove(); \/\/ Link elementini DOM'dan kald\u0131r\u0131yoruz\n console.log('Dosya ba\u015far\u0131yla indirildi.');\n })\n .catch(error => {\n console.error('Dosya indirme hatas\u0131:', error);\n alert(Dosya indirilirken bir hata olu\u015ftu: ${error.message}<\/code>);\n });\n}\n\n\/\/ \u00d6rnek kullan\u0131m:\n\/\/ dosyayiIndir('https:\/\/api.example.com\/files\/rapor.pdf', 'aylik_rapor.pdf');\n<\/code><\/pre><\/code><\/pre>\n