Fetch API<\/strong>.<\/p>\nFetch API, web taray\u0131c\u0131lar\u0131nda ve Node.js gibi \u00e7al\u0131\u015fma zamanlar\u0131nda HTTP istekleri yapman\u0131z\u0131 sa\u011flayan, Promise tabanl\u0131 modern bir aray\u00fczd\u00fcr. XHR’\u0131n karma\u015f\u0131k geri \u00e7a\u011f\u0131rma (callback) zincirleri yerine, Promise’lerin sundu\u011fu zincirleme (.then(), .catch(), .finally()) yap\u0131s\u0131yla asenkron i\u015flemleri \u00e7ok daha okunakl\u0131 ve y\u00f6netilebilir hale getirir. Bu rehberde, Fetch API’nin temel kullan\u0131m\u0131ndan geli\u015fmi\u015f \u00f6zelliklerine, pratik ipu\u00e7lar\u0131ndan s\u0131k\u00e7a sorulan sorulara kadar her \u015feyi ele alaca\u011f\u0131z.<\/p>\n
Fetch API’nin Temelleri: \u0130lk \u0130steklerinizi Yap\u0131n<\/h2>\n
Fetch API’nin en temel kullan\u0131m\u0131, bir URL’ye GET iste\u011fi g\u00f6ndermektir. Bu i\u015flem, sadece bir fonksiyon \u00e7a\u011fr\u0131s\u0131 ile ba\u015flar ve bir Promise d\u00f6nd\u00fcr\u00fcr. Bu Promise, iste\u011fin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131na veya bir hata olu\u015fup olu\u015fmad\u0131\u011f\u0131na dair bilgi ta\u015f\u0131r.<\/p>\n
Basit Bir GET \u0130ste\u011fi<\/h3>\n
A\u015fa\u011f\u0131daki \u00f6rnek, bir API’dan kullan\u0131c\u0131 verilerini nas\u0131l \u00e7ekece\u011finizi g\u00f6stermektedir. \u0130stek ba\u015far\u0131l\u0131 oldu\u011funda, yan\u0131t\u0131 JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcp konsola yazd\u0131r\u0131r\u0131z.<\/p>\n
\nfetch('https:\/\/jsonplaceholder.typicode.com\/users')\n .then(response => {\n \/\/ HTTP yan\u0131t\u0131n\u0131n ba\u015far\u0131l\u0131 (2xx) olup olmad\u0131\u011f\u0131n\u0131 kontrol edin\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n \/\/ Yan\u0131t\u0131 JSON olarak ayr\u0131\u015ft\u0131r\u0131n\n return response.json();\n })\n .then(data => {\n \/\/ Ayr\u0131\u015ft\u0131r\u0131lm\u0131\u015f JSON verisini kullan\u0131n\n console.log('Kullan\u0131c\u0131 Verileri:', data);\n })\n .catch(error => {\n \/\/ A\u011f hatalar\u0131n\u0131 veya yukar\u0131daki throw edilen hatalar\u0131 yakalay\u0131n\n console.error('Fetch i\u015flemi s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n });\n <\/code><\/pre>\nYukar\u0131daki kodda dikkat etmeniz gereken birka\u00e7 \u00f6nemli nokta var:<\/p>\n
\nfetch('URL')<\/code>: Bu, belirtilen URL’ye bir GET iste\u011fi g\u00f6nderir ve bir Promise d\u00f6nd\u00fcr\u00fcr.<\/li>\n.then(response => ...)<\/code>: \u0130lk .then()<\/code> blo\u011fu, sunucudan bir yan\u0131t (Response<\/code> nesnesi) al\u0131nd\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Bu a\u015famada a\u011f hatas\u0131 olu\u015fmam\u0131\u015ft\u0131r, ancak HTTP durum kodu (\u00f6rn. 404 Not Found, 500 Internal Server Error) hala bir hata durumunu g\u00f6sterebilir. Bu nedenle response.ok<\/code> kontrol\u00fc \u00f6nemlidir.<\/li>\nresponse.ok<\/code>: Bu \u00f6zellik, HTTP yan\u0131t\u0131n\u0131n ba\u015far\u0131l\u0131 bir durum kodu (200-299 aral\u0131\u011f\u0131nda) olup olmad\u0131\u011f\u0131n\u0131 g\u00f6steren bir boolean de\u011feridir.<\/li>\nresponse.json()<\/code>: Bu, yan\u0131t g\u00f6vdesini JSON olarak ayr\u0131\u015ft\u0131ran ve ba\u015fka bir Promise d\u00f6nd\u00fcren bir metottur. Bu Promise, ayr\u0131\u015ft\u0131r\u0131lm\u0131\u015f JSON verisiyle \u00e7\u00f6z\u00fcmlenir. Benzer \u015fekilde response.text()<\/code>, response.blob()<\/code>, response.arrayBuffer()<\/code> gibi metotlar da mevcuttur.<\/li>\n.then(data => ...)<\/code>: \u0130kinci .then()<\/code> blo\u011fu, JSON verisi ba\u015far\u0131yla ayr\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.<\/li>\n.catch(error => ...)<\/code>: Bu blok, Fetch i\u015flemi s\u0131ras\u0131nda herhangi bir a\u011f hatas\u0131 (\u00f6rn. ba\u011flant\u0131 kesilmesi) veya Promise zincirinde f\u0131rlat\u0131lan bir hata (\u00f6rn. throw new Error(...)<\/code>) olu\u015ftu\u011funda \u00e7al\u0131\u015f\u0131r.<\/li>\n<\/ul>\nHTTP Metodlar\u0131 ve \u0130stek Se\u00e7enekleri<\/h2>\n
Fetch API, sadece GET istekleri yapmakla kalmaz, ayn\u0131 zamanda POST, PUT, DELETE gibi di\u011fer HTTP metodlar\u0131n\u0131 da destekler. Bu metodlar\u0131 ve iste\u011finizle ilgili di\u011fer detaylar\u0131 (ba\u015fl\u0131klar, g\u00f6vde vb.) belirtmek i\u00e7in fetch()<\/code> fonksiyonunun ikinci parametresi olan bir se\u00e7enekler nesnesini (RequestInit<\/code>) kullan\u0131r\u0131z.<\/p>\nPOST \u0130ste\u011fi ve \u0130stek Se\u00e7enekleri<\/h3>\n
Bir sunucuya veri g\u00f6ndermek (\u00f6rn. yeni bir kaynak olu\u015fturmak) i\u00e7in POST metodunu kullan\u0131r\u0131z. Bu durumda, iste\u011fin g\u00f6vdesinde (body) g\u00f6nderilecek veriyi ve Content-Type<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 belirtmemiz gerekir.<\/p>\n\nconst newUser = {\n name: 'Ay\u015fe Y\u0131lmaz',\n username: 'ayseyilmaz',\n email: 'ayse.yilmaz@example.com'\n};\n\nfetch('https:\/\/jsonplaceholder.typicode.com\/users', {\n method: 'POST', \/\/ HTTP metodu\n headers: {\n 'Content-Type': 'application\/json' \/\/ G\u00f6nderilen verinin tipi\n },\n body: JSON.stringify(newUser) \/\/ JS nesnesini JSON string'ine d\u00f6n\u00fc\u015ft\u00fcr\n})\n .then(response => {\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n return response.json();\n })\n .then(data => {\n console.log('Yeni Kullan\u0131c\u0131 Olu\u015fturuldu:', data);\n })\n .catch(error => {\n console.error('Kullan\u0131c\u0131 olu\u015fturulurken bir hata olu\u015ftu:', error);\n });\n <\/code><\/pre>\nYukar\u0131daki \u00f6rnekte kullan\u0131lan \u00f6nemli se\u00e7enekler:<\/p>\n
\nmethod<\/code>: \u0130stekte kullan\u0131lacak HTTP metodunu belirtir (GET, POST, PUT, DELETE vb.). Varsay\u0131lan de\u011fer GET’tir.<\/li>\nheaders<\/code>: \u0130stek ba\u015fl\u0131klar\u0131n\u0131 i\u00e7eren bir nesnedir. \u00d6zellikle Content-Type<\/code>, sunucuya g\u00f6nderilen verinin format\u0131n\u0131 bildirir. Authorization<\/code> ba\u015fl\u0131\u011f\u0131, kimlik do\u011frulama token’lar\u0131n\u0131 g\u00f6ndermek i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r.<\/li>\nbody<\/code>: \u0130stek g\u00f6vdesinde g\u00f6nderilecek veriyi i\u00e7erir. POST veya PUT gibi metodlar i\u00e7in gereklidir. Genellikle bir JavaScript nesnesini JSON.stringify()<\/code> ile JSON string’ine d\u00f6n\u00fc\u015ft\u00fcrerek g\u00f6ndeririz.<\/li>\n<\/ul>\nDi\u011fer S\u0131k Kullan\u0131lan Se\u00e7enekler<\/h3>\n\nmode<\/code>: \u0130stek modunu belirtir ('cors'<\/code>, 'no-cors'<\/code>, 'same-origin'<\/code>). \u00c7o\u011fu zaman varsay\u0131lan 'cors'<\/code> yeterlidir.<\/li>\ncache<\/code>: \u0130stek i\u00e7in \u00f6nbellek davran\u0131\u015f\u0131n\u0131 belirler ('default'<\/code>, 'no-cache'<\/code>, 'reload'<\/code> vb.).<\/li>\ncredentials<\/code>: \u00c7erezlerin, HTTP kimlik do\u011frulama ba\u015fl\u0131klar\u0131n\u0131n veya istemci SSL sertifikalar\u0131n\u0131n isteklerle birlikte g\u00f6nderilip g\u00f6nderilmeyece\u011fini belirler ('omit'<\/code>, 'same-origin'<\/code>, 'include'<\/code>). Genellikle 'include'<\/code>, kimlik do\u011frulamas\u0131 gereken API’lar i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\nGeli\u015fmi\u015f Kullan\u0131m: Async\/Await ve Hata Y\u00f6netimi<\/h2>\n
Promise’ler g\u00fc\u00e7l\u00fc olsa da, karma\u015f\u0131k asenkron ak\u0131\u015flarda .then()<\/code> zincirleri hala i\u00e7 i\u00e7e ge\u00e7ebilir. ES2017 ile tan\u0131t\u0131lan async\/await<\/code> s\u00f6zdizimi, Promise tabanl\u0131 kodlar\u0131 senkron koda benzer \u015fekilde yazmam\u0131z\u0131 sa\u011flayarak, Fetch API ile \u00e7al\u0131\u015fmay\u0131 daha da kolayla\u015ft\u0131r\u0131r ve okunakl\u0131 hale getirir.<\/p>\nAsync\/Await ile Fetch Kullan\u0131m\u0131<\/h3>\n
Ayn\u0131 kullan\u0131c\u0131 \u00e7ekme \u00f6rne\u011fini async\/await<\/code> ile yeniden yazal\u0131m:<\/p>\n\nasync function fetchUsers() {\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n\n const data = await response.json();\n console.log('Kullan\u0131c\u0131 Verileri (Async\/Await):', data);\n } catch (error) {\n console.error('Kullan\u0131c\u0131lar getirilirken bir hata olu\u015ftu:', error);\n }\n}\n\nfetchUsers();\n <\/code><\/pre>\nBu yakla\u015f\u0131m, \u00f6zellikle birden fazla asenkron ad\u0131m i\u00e7eren i\u015flemlerde kodun ak\u0131\u015f\u0131n\u0131 takip etmeyi \u00e7ok daha kolayla\u015ft\u0131r\u0131r. await<\/code> anahtar kelimesi, Promise’in \u00e7\u00f6z\u00fcmlenmesini bekler ve \u00e7\u00f6z\u00fcmlenen de\u011feri d\u00f6nd\u00fcr\u00fcr. E\u011fer Promise reddedilirse, hata try...catch<\/code> blo\u011fu taraf\u0131ndan yakalan\u0131r.<\/p>\n\u0130stek \u0130ptali (AbortController)<\/h3>\n
Bazen bir Fetch iste\u011fini, kullan\u0131c\u0131 ba\u015fka bir sayfaya ge\u00e7ti\u011finde veya daha yeni bir istek yap\u0131ld\u0131\u011f\u0131nda iptal etmek isteyebiliriz. Fetch API, bu senaryo i\u00e7in AbortController<\/code> aray\u00fcz\u00fcn\u00fc sunar.<\/p>\n\nconst controller = new AbortController();\nconst signal = controller.signal;\n\nasync function fetchWithCancellation() {\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1', { signal });\n\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status}<\/code>);\n }\n\n const data = await response.json();\n console.log('Veri al\u0131nd\u0131:', data);\n } catch (error) {\n if (error.name === 'AbortError') {\n console.log('Fetch iste\u011fi iptal edildi.');\n } else {\n console.error('Bir hata olu\u015ftu:', error);\n }\n }\n}\n\nfetchWithCancellation();\n\n\/\/ Belirli bir s\u00fcre sonra iste\u011fi iptal edin (\u00f6rne\u011fin 2 saniye sonra)\nsetTimeout(() => {\n controller.abort();\n}, 2000);\n <\/code><\/pre>\nAbortController<\/code> bir sinyal (signal<\/code>) sa\u011flar ve bu sinyali fetch()<\/code> fonksiyonuna se\u00e7enek olarak iletiriz. controller.abort()<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, sinyali dinleyen Fetch iste\u011fi iptal edilir ve bir AbortError<\/code> f\u0131rlat\u0131l\u0131r. Bu, istek zaman a\u015f\u0131m\u0131 (timeout) y\u00f6netimi i\u00e7in de kullan\u0131labilir.<\/p>\nPratik \u0130pu\u00e7lar\u0131 ve En \u0130yi Y\u00f6ntemler<\/h2>\n
Fetch API ile \u00e7al\u0131\u015f\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 yayg\u0131n senaryolar ve bunlar\u0131 y\u00f6netmek i\u00e7in ipu\u00e7lar\u0131:<\/p>\n
CORS (Cross-Origin Resource Sharing)<\/h3>\n
Taray\u0131c\u0131lar, g\u00fcvenlik nedeniyle farkl\u0131 bir kaynaktan (domain, port veya protokol) yap\u0131lan isteklere k\u0131s\u0131tlamalar getirir. Bu k\u0131s\u0131tlamalara CORS politikas\u0131 denir. E\u011fer bir API’dan veri \u00e7ekerken taray\u0131c\u0131 konsolunda CORS hatas\u0131 g\u00f6r\u00fcyorsan\u0131z, bu genellikle API sunucusunun sizin kayna\u011f\u0131n\u0131zdan gelen isteklere izin vermedi\u011fi anlam\u0131na gelir. Bu durumda, API geli\u015ftiricileriyle ileti\u015fime ge\u00e7meniz veya proxy sunucusu kullanman\u0131z gerekebilir.<\/p>\n
Kimlik Do\u011frulama (Authentication)<\/h3>\n
Bir\u00e7ok API, isteklerin kimlik do\u011frulamas\u0131 yap\u0131lmas\u0131n\u0131 gerektirir. Bu genellikle istek ba\u015fl\u0131klar\u0131na bir kimlik do\u011frulama token’\u0131 (\u00f6rne\u011fin, JWT – JSON Web Token) ekleyerek yap\u0131l\u0131r:<\/p>\n
\nconst authToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; \/\/ Token'\u0131n\u0131z\u0131 buraya ekleyin\n\nfetch('https:\/\/api.example.com\/secure-data', {\n method: 'GET',\n headers: {\n 'Authorization': Bearer ${authToken}<\/code> \/\/ Bearer \u015femas\u0131 s\u0131k\u00e7a kullan\u0131l\u0131r\n }\n})\n.then(response => response.json())\n.then(data => console.log('G\u00fcvenli Veri:', data))\n.catch(error => console.error('Kimlik do\u011frulama hatas\u0131:', error));\n <\/code><\/pre>\n\u0130stekleri Tekrar Kullan\u0131labilir Hale Getirme<\/h3>\n
S\u0131k\u00e7a kullan\u0131lan Fetch isteklerini veya belirli bir API’a y\u00f6nelik istekleri bir yard\u0131mc\u0131 fonksiyonda sarmalamak, kodunuzu daha mod\u00fcler ve okunabilir hale getirir.<\/p>\n
\nasync function apiRequest(url, options = {}) {\n const defaultHeaders = {\n 'Content-Type': 'application\/json',\n 'Authorization': Bearer ${localStorage.getItem('token')}<\/code> \/\/ Token'\u0131 Local Storage'dan al\n };\n\n const config = {\n ...options,\n headers: {\n ...defaultHeaders,\n ...options.headers \/\/ \u00d6zel ba\u015fl\u0131klar varsay\u0131lanlar\u0131 ezebilir\n }\n };\n\n const response = await fetch(url, config);\n\n if (!response.ok) {\n \/\/ Hata durumunda daha detayl\u0131 bilgi f\u0131rlatabiliriz\n const errorData = await response.json().catch(() => ({ message: 'Bilinmeyen Hata' }));\n throw new Error(${response.status}: ${errorData.message || response.statusText}<\/code>);\n }\n\n return response.json();\n}\n\n\/\/ Kullan\u0131m\u0131:\napiRequest('https:\/\/api.example.com\/users')\n .then(users => console.log('Kullan\u0131c\u0131lar:', users))\n .catch(err => console.error('API iste\u011fi hatas\u0131:', err));\n\napiRequest('https:\/\/api.example.com\/products', {\n method: 'POST',\n body: JSON.stringify({ name: 'Yeni \u00dcr\u00fcn', price: 100 })\n})\n .then(product => console.log('\u00dcr\u00fcn olu\u015fturuldu:', product))\n .catch(err => console.error('\u00dcr\u00fcn olu\u015fturma hatas\u0131:', err));\n <\/code><\/pre>\nBu t\u00fcr bir yard\u0131mc\u0131 fonksiyon, hata y\u00f6netimini merkezile\u015ftirmenize ve tekrar eden kodlar\u0131 azaltman\u0131za olanak tan\u0131r.<\/p>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
Fetch API, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Promise tabanl\u0131 yap\u0131s\u0131, async\/await<\/code> ile birle\u015fti\u011finde, asenkron HTTP istekleri yapmay\u0131 hem g\u00fc\u00e7l\u00fc hem de keyifli bir deneyim haline getirir. A\u011f hatalar\u0131n\u0131, HTTP durum kodlar\u0131n\u0131 ve istek iptalini y\u00f6netme yetene\u011fi, sa\u011flam ve kullan\u0131c\u0131 dostu uygulamalar geli\u015ftirmenize yard\u0131mc\u0131 olur. Bu rehber, Fetch API’nin temel ve geli\u015fmi\u015f kullan\u0131mlar\u0131n\u0131 anlaman\u0131z i\u00e7in sa\u011flam bir zemin sa\u011flam\u0131\u015ft\u0131r.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n\n- Fetch API nedir?<\/strong><\/dt>\n
- Fetch API, web taray\u0131c\u0131lar\u0131nda ve Node.js gibi JavaScript \u00e7al\u0131\u015fma zamanlar\u0131nda a\u011f istekleri (HTTP istekleri) yapmak i\u00e7in kullan\u0131lan modern, Promise tabanl\u0131 bir aray\u00fczd\u00fcr. Sunucu ile veri al\u0131\u015fveri\u015fi yapmak i\u00e7in kullan\u0131l\u0131r.<\/dd>\n
- Fetch API’nin XMLHttpRequest’ten fark\u0131 nedir?<\/strong><\/dt>\n
- Fetch API, XMLHttpRequest’e g\u00f6re daha modern ve g\u00fc\u00e7l\u00fc bir alternatiftir. Temel farklar \u015funlard\u0131r:<\/p>\n
\n- Promise Tabanl\u0131:<\/strong> Fetch, Promise’ler d\u00f6nd\u00fcrerek
.then()<\/code> ve .catch()<\/code> zincirleriyle daha okunakl\u0131 ve y\u00f6netilebilir asenkron kod yazmay\u0131 sa\u011flar. XHR ise genellikle geri \u00e7a\u011f\u0131rma (callback) fonksiyonlar\u0131na dayan\u0131r.<\/li>\n- Basit S\u00f6zdizimi:<\/strong> Fetch’in s\u00f6zdizimi daha basittir ve XHR’\u0131n karma\u015f\u0131kl\u0131klar\u0131ndan ar\u0131nd\u0131r\u0131lm\u0131\u015ft\u0131r.<\/li>\n
async\/await<\/code> Deste\u011fi:<\/strong> async\/await<\/code> ile m\u00fckemmel bir uyum i\u00e7inde \u00e7al\u0131\u015farak senkron koda benzeyen bir yaz\u0131m deneyimi sunar.<\/li>\n- Stream Deste\u011fi:<\/strong> Fetch, yan\u0131t g\u00f6vdesini bir Stream olarak ele alabilir, bu da b\u00fcy\u00fck dosyalar\u0131n i\u015flenmesinde avantaj sa\u011flar.<\/li>\n<\/ul>\n<\/dd>\n
- Fetch ile nas\u0131l hata yakalar\u0131m?<\/strong><\/dt>\n
- Fetch’te iki t\u00fcr hata vard\u0131r:<\/p>\n
\n- A\u011f Hatalar\u0131:<\/strong> (\u00f6rn. ba\u011flant\u0131 kesilmesi, ge\u00e7ersiz URL) Bu hatalar do\u011frudan
.catch()<\/code> blo\u011fu taraf\u0131ndan yakalan\u0131r.<\/li>\n- HTTP Hatalar\u0131:<\/strong> (\u00f6rn. 404 Not Found, 500 Internal Server Error) Fetch, bu durum kodlar\u0131n\u0131 bir hata olarak kabul etmez. Yan\u0131t nesnesinin
response.ok<\/code> \u00f6zelli\u011fi false<\/code> d\u00f6ner. Bu t\u00fcr durumlar\u0131 manuel olarak kontrol edip (if (!response.ok) throw new Error(...)<\/code>) bir hata f\u0131rlatarak .catch()<\/code> blo\u011funda yakalaman\u0131z gerekir.<\/li>\n<\/ol>\n<\/dd>\n- CORS hatas\u0131 nedir ve nas\u0131l \u00e7\u00f6z\u00fcl\u00fcr?<\/strong><\/dt>\n
- CORS (Cross-Origin Resource Sharing) hatas\u0131, bir web taray\u0131c\u0131s\u0131n\u0131n g\u00fcvenlik politikas\u0131 nedeniyle farkl\u0131 bir kaynaktan (farkl\u0131 bir domain, protokol veya port) gelen HTTP iste\u011fini engellemesidir. Bu hata genellikle, iste\u011fi yapt\u0131\u011f\u0131n\u0131z web sayfas\u0131n\u0131n domain’i ile hedef API’nin domain’i farkl\u0131 oldu\u011funda ortaya \u00e7\u0131kar. \u00c7\u00f6z\u00fcmler \u015funlar\u0131 i\u00e7erebilir:<\/p>\n
\n- API Taraf\u0131nda \u0130zin:<\/strong> En yayg\u0131n \u00e7\u00f6z\u00fcm, API sunucusunun
Access-Control-Allow-Origin<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 ayarlayarak sizin domain’inizden gelen isteklere izin vermesidir.<\/li>\n- Proxy Kullan\u0131m\u0131:<\/strong> Kendi sunucunuzda bir proxy olu\u015fturarak, taray\u0131c\u0131n\u0131n ayn\u0131 kaynak k\u0131s\u0131tlamas\u0131na tak\u0131lmadan API iste\u011fini yapabilirsiniz.<\/li>\n
mode: 'no-cors'<\/code> (S\u0131n\u0131rl\u0131 Kullan\u0131m):<\/strong> Bu mod, taray\u0131c\u0131n\u0131n CORS kontrol\u00fcn\u00fc atlamas\u0131n\u0131 sa\u011flar ancak yan\u0131t g\u00f6vdesine eri\u015fiminizi k\u0131s\u0131tlar ve genellikle \u00f6nerilmez.<\/li>\n<\/ul>\n<\/dd>\n- Fetch isteklerini iptal edebilir miyim?<\/strong><\/dt>\n
- Evet,
AbortController<\/code> aray\u00fcz\u00fcn\u00fc kullanarak Fetch isteklerini iptal edebilirsiniz. Bir AbortController<\/code> \u00f6rne\u011fi olu\u015fturup, sinyalini fetch()<\/code> fonksiyonuna iletirsiniz. Daha sonra controller.abort()<\/code> \u00e7a\u011f\u0131rarak iste\u011fi iptal edebilirsiniz. Bu, zaman a\u015f\u0131m\u0131 (timeout) y\u00f6netimi veya kullan\u0131c\u0131 navigasyonu gibi senaryolarda olduk\u00e7a faydal\u0131d\u0131r.<\/dd>\n<\/dl>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Fetch API’ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber\n Web uygulamalar\u0131 geli\u015ftirirken, sunucu ile veri al\u0131\u015fveri\u015fi yapmak ka\u00e7\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34015","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber\" \/>\n<meta property=\"og:description\" content=\"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber Web uygulamalar\u0131 geli\u015ftirirken, sunucu ile veri al\u0131\u015fveri\u015fi yapmak ka\u00e7\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-09T21:41:24+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Fetch API’ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber\",\"datePublished\":\"2025-11-09T21:41:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\"},\"wordCount\":1660,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\",\"name\":\"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-09T21:41:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fetch API’ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber","og_description":"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber Web uygulamalar\u0131 geli\u015ftirirken, sunucu ile veri al\u0131\u015fveri\u015fi yapmak ka\u00e7\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-09T21:41:24+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Fetch API’ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber","datePublished":"2025-11-09T21:41:24+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/"},"wordCount":1660,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/","name":"Fetch API'ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-09T21:41:24+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/fetch-apiye-giris-modern-web-istekleri-icin-temel-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fetch API’ye Giri\u015f: Modern Web \u0130stekleri \u0130\u00e7in Temel Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34015"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34015\/revisions"}],"predecessor-version":[{"id":34016,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34015\/revisions\/34016"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}