Fetch ve XMLHttpRequest Aras\u0131ndaki Farklar<\/p>\n
Merhaba! Fatih Soysal olarak, web geli\u015ftirme d\u00fcnyas\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z iki \u00f6nemli kavram olan fetch<\/code> ve XMLHttpRequest<\/code> aras\u0131ndaki farklar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. \u0130ki y\u00f6ntem de sunucudan veri \u00e7ekmek i\u00e7in kullan\u0131l\u0131r, ancak aralar\u0131nda \u00f6nemli farkl\u0131l\u0131klar vard\u0131r. Bu makalede, bu farklar\u0131 ele alarak hangisinin ne zaman daha uygun oldu\u011funu a\u00e7\u0131klayaca\u011f\u0131m. <\/p>\nXMLHttpRequest’in Eski D\u00fcnyas\u0131<\/h2>\n
XMLHttpRequest<\/code>, taray\u0131c\u0131lar\u0131n sunucularla asenkron olarak ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan, eski bir JavaScript API’sidir. Yani, sayfa yenilenmeden arka planda veri al\u0131\u015fveri\u015fi yap\u0131lmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. Ancak, kullan\u0131m\u0131 biraz daha karma\u015f\u0131kt\u0131r ve daha fazla kod gerektirir. \u00d6rne\u011fin, bir istek g\u00f6ndermek ve yan\u0131t\u0131 i\u015flemek i\u00e7in bir dizi olay dinleyicisi (onload<\/code>, onerror<\/code>, vb.) kullanman\u0131z gerekir. Ayr\u0131ca, hata y\u00f6netimi de daha zahmetlidir.<\/p>\n\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', 'api\/data');\nxhr.onload = function() {\n if (xhr.status >= 200 && xhr.status < 300) {\n console.log('Ba\u015far\u0131l\u0131:', xhr.response);\n } else {\n console.error('Hata:', xhr.status);\n }\n};\nxhr.onerror = function() {\n console.error('Ba\u011flant\u0131 hatas\u0131!');\n};\nxhr.send();\n<\/code><\/pre>\nFetch API: Modern ve Zarif Bir Yakla\u015f\u0131m<\/h2>\n
fetch<\/code> API'si, XMLHttpRequest<\/code>'in daha modern ve kullan\u0131m\u0131 daha kolay bir alternatifidir. Promise'ler kullanarak daha temiz ve okunabilir bir kod yazmay\u0131 sa\u011flar. Bu sayede, hata y\u00f6netimi daha kolay ve daha d\u00fczenli hale gelir. Ayr\u0131ca, fetch<\/code>, HTTP isteklerini daha sezgisel bir \u015fekilde y\u00f6netmemizi sa\u011flar. \u00d6rne\u011fin, iste\u011fe ba\u015fl\u0131klar eklemek veya farkl\u0131 HTTP metotlar\u0131 (GET, POST, PUT, DELETE) kullanmak olduk\u00e7a basittir.<\/p>\n\nfetch('api\/data')\n .then(response => {\n if (!response.ok) {\n throw new Error(HTTP hata kodu: ${response.status});\n }\n return response.json();\n })\n .then(data => {\n console.log('Ba\u015far\u0131l\u0131:', data);\n })\n .catch(error => {\n console.error('Hata:', error);\n });\n<\/code><\/pre>\nAnahtar Farklar \u00d6zet Tablosu<\/h2>\n