Modern web uygulamalar\u0131 ve sunucu tabanl\u0131 sistemlerde kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmadan i\u015flem yapmak, uygulama performans\u0131n\u0131 do\u011frudan etkileyen kritik bir unsurdur. Peki, uzun s\u00fcren bir veritaban\u0131 sorgusu veya harici bir API iste\u011fi gibi asenkron \u00e7a\u011fr\u0131lardan gelen yan\u0131tlar\u0131 uygulamam\u0131z\u0131 engellemeden nas\u0131l alabilir ve i\u015fleyebiliriz? Bu makale, asenkron programlaman\u0131n temel dinamiklerinden ba\u015flayarak, callback fonksiyonlar\u0131ndan Promise’lara, oradan da modern Yaz\u0131l\u0131m geli\u015ftirme d\u00fcnyas\u0131nda “asenkron” ve “senkron” kavramlar\u0131 s\u0131k\u00e7a kar\u015f\u0131m\u0131za \u00e7\u0131kar. Senkron programlama modelinde, bir i\u015flem tamamlanmadan bir sonraki i\u015flem ba\u015flamaz. \u00d6rne\u011fin, bir sunucuya istek g\u00f6nderdi\u011finizde, yan\u0131t gelene kadar kodun geri kalan\u0131 duraklar ve bekler. Bu durum, \u00f6zellikle web aray\u00fczleri gibi interaktif uygulamalarda ciddi kullan\u0131c\u0131 deneyimi sorunlar\u0131na yol a\u00e7abilir. Kullan\u0131c\u0131, uygulaman\u0131n dondu\u011funu d\u00fc\u015f\u00fcnebilir, ki bu \u00e7o\u011fu zaman kabul edilemez bir durumdur.<\/p>\n \u0130\u015fte tam bu noktada asenkron programlama devreye girer. Asenkron programlama, uzun s\u00fcreli bir i\u015flemi (\u00f6rne\u011fin, bir a\u011f iste\u011fi, dosya okuma\/yazma, veritaban\u0131 sorgusu) ba\u015flat\u0131r ve ard\u0131ndan o i\u015flemin tamamlanmas\u0131n\u0131 beklemeden di\u011fer kod par\u00e7ac\u0131klar\u0131n\u0131n \u00e7al\u0131\u015fmaya devam etmesine izin verir. \u0130\u015flem bitti\u011finde, bir “geri \u00e7a\u011fr\u0131” (callback) mekanizmas\u0131 veya modern Promise\/async-await yap\u0131lar\u0131 arac\u0131l\u0131\u011f\u0131yla yan\u0131t al\u0131n\u0131r ve i\u015flenir. Bu, uygulaman\u0131z\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmedi\u011fi i\u00e7in kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz\u00fcn (UI) her zaman duyarl\u0131 kalmas\u0131n\u0131 sa\u011flar. Bu sayede kullan\u0131c\u0131lar, veriler y\u00fcklenirken bile di\u011fer aray\u00fcz elemanlar\u0131yla etkile\u015fimde bulunabilir, sayfada gezinebilir veya farkl\u0131 i\u015flemleri ba\u015flatabilirler.<\/p>\n \u00d6zellikle JavaScript gibi tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) dillerde asenkron modelin \u00f6nemi daha da artar. JavaScript’in \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131 (\u00f6rne\u011fin taray\u0131c\u0131lar veya Node.js), karma\u015f\u0131k olay d\u00f6ng\u00fcs\u00fc (Event Loop) mekanizmalar\u0131 sayesinde asenkron i\u015flemleri y\u00f6netir. Bir asenkron i\u015flem ba\u015flat\u0131ld\u0131\u011f\u0131nda, bu i\u015flem arka planda \u00e7al\u0131\u015f\u0131rken JavaScript motoru ana i\u015f par\u00e7ac\u0131\u011f\u0131nda di\u011fer g\u00f6revleri y\u00fcr\u00fctmeye devam eder. \u0130\u015flem tamamland\u0131\u011f\u0131nda, ilgili callback veya Promise \u00e7\u00f6z\u00fcm\u00fc Event Loop’a eklenir ve uygun zamanda \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Bu yap\u0131, yo\u011fun I\/O (Input\/Output) i\u015flemleri gerektiren web sunucular\u0131 veya ger\u00e7ek zamanl\u0131 uygulamalar i\u00e7in kritik bir performans avantaj\u0131 sa\u011flar.<\/p>\n Ger\u00e7ek d\u00fcnya senaryolar\u0131nda asenkron programlama, modern uygulamalar\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. \u00d6rne\u011fin, bir e-ticaret sitesinde \u00fcr\u00fcnleri listelerken, \u00fcr\u00fcn verileri bir API’den asenkron olarak \u00e7ekilir. Kullan\u0131c\u0131 bu s\u0131rada sayfadaki filtreleri veya arama kutusunu kullanmaya devam edebilir. \u00dcr\u00fcn verileri geldi\u011finde, sayfa dinamik olarak g\u00fcncellenir. Benzer \u015fekilde, bir sosyal medya uygulamas\u0131nda yeni g\u00f6nderiler y\u00fcklenirken veya bir foto\u011fraf y\u00fcklenirken, kullan\u0131c\u0131 uygulaman\u0131n di\u011fer \u00f6zelliklerini kullanmaya devam edebilir. Asenkron yap\u0131n\u0131n do\u011fru anla\u015f\u0131lmas\u0131 ve uygulanmas\u0131, \u00f6l\u00e7eklenebilir, performansl\u0131 ve kullan\u0131c\u0131 dostu uygulamalar geli\u015ftirmek i\u00e7in temel bir ad\u0131md\u0131r.<\/p>\n Asenkron programlaman\u0131n belki de en temel ve ilk ortaya \u00e7\u0131kan y\u00f6ntemlerinden biri, callback fonksiyonlar\u0131d\u0131r. Callback, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, belirli bir i\u015flemin tamamlanmas\u0131n\u0131n ard\u0131ndan \u00e7a\u011fr\u0131lacak olan bir fonksiyondur. Bir asenkron i\u015flemi ba\u015flatt\u0131\u011f\u0131n\u0131zda, bu i\u015flemin sonucunu veya hatas\u0131n\u0131 bildirmek i\u00e7in bir callback fonksiyonu sa\u011flars\u0131n\u0131z. \u0130\u015flem bitti\u011finde, sistem bu callback fonksiyonunu \u00e7a\u011f\u0131r\u0131r ve genellikle i\u015flemi ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z olarak belirten parametreler iletir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Callback fonksiyonlar\u0131 basit senaryolar i\u00e7in yeterli olsa da, birden fazla ba\u011f\u0131ml\u0131 asenkron i\u015flemin arka arkaya yap\u0131lmas\u0131 gerekti\u011finde ciddi zorluklara yol a\u00e7abilir. Bu duruma \"Callback Hell\" veya \"Pyramid of Doom\" denir. Her yeni asenkron i\u015flem, bir \u00f6ncekinin callback'i i\u00e7ine yerle\u015ftirildi\u011finde, kod i\u00e7 i\u00e7e ge\u00e7mi\u015f girintili yap\u0131lar olu\u015fturur ve okunabilirli\u011fi, bak\u0131m\u0131 ve hata ay\u0131klamay\u0131 son derece zorla\u015ft\u0131r\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki senaryo, \u00f6nce bir kullan\u0131c\u0131y\u0131 getiren, sonra o kullan\u0131c\u0131n\u0131n sipari\u015flerini ve ard\u0131ndan ilk sipari\u015fin detaylar\u0131n\u0131 getiren \u00fc\u00e7 ba\u011f\u0131ml\u0131 asenkron i\u015flemi g\u00f6stermektedir. Her ad\u0131m bir \u00f6ncekinin callback'ine g\u00f6m\u00fcld\u00fc\u011f\u00fcnde, kod sa\u011fa do\u011fru b\u00fcy\u00fcyen bir piramit \u015feklini al\u0131r. Bu durum, hata y\u00f6netimini de karma\u015f\u0131k hale getirir, \u00e7\u00fcnk\u00fc her seviyede hata kontrol\u00fc yapmak gerekir. Bu zorluklar, daha modern ve y\u00f6netilebilir asenkron desenlere olan ihtiyac\u0131 do\u011furmu\u015ftur.<\/p>\n Callback Hell'in getirdi\u011fi karma\u015f\u0131kl\u0131klara bir \u00e7\u00f6z\u00fcm olarak ortaya \u00e7\u0131kan Promise'lar, asenkron i\u015flemleri daha d\u00fczenli, okunabilir ve y\u00f6netilebilir bir \u015fekilde ele almam\u0131z\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir yap\u0131d\u0131r. Bir Promise, asenkron bir i\u015flemin nihai sonucunu (ba\u015far\u0131s\u0131 veya ba\u015far\u0131s\u0131zl\u0131\u011f\u0131) temsil eden bir JavaScript nesnesidir. Bir Promise'\u0131n \u00fc\u00e7 temel durumu vard\u0131r:<\/p>\n Bir Promise olu\u015fturdu\u011funuzda, bu Promise'a iki fonksiyon i\u00e7eren bir y\u00fcr\u00fct\u00fcc\u00fc (executor) fonksiyonu verirsiniz: <\/code><\/p>\n Promise'lar\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri zincirleme yetenekleridir. Bir <\/code><\/p>\n Peki ya birden fazla asenkron i\u015flemi paralel olarak \u00e7al\u0131\u015ft\u0131rmak ve hepsi tamamland\u0131\u011f\u0131nda sonu\u00e7lar\u0131n\u0131 almak istersek? \u0130\u015fte burada Vaka analizi olarak, bir e-ticaret sitesinde \u00fcr\u00fcn detay sayfas\u0131n\u0131 d\u00fc\u015f\u00fcnelim. Bu sayfada \u00fcr\u00fcn bilgileri, kullan\u0131c\u0131 yorumlar\u0131 ve ilgili \u00fcr\u00fcnler gibi farkl\u0131 API \u00e7a\u011fr\u0131lar\u0131ndan gelen verilere ihtiya\u00e7 duyulabilir. Bu \u00e7a\u011fr\u0131lar\u0131n hepsi birbirinden ba\u011f\u0131ms\u0131z olarak paralel \u00e7al\u0131\u015fabilir ve t\u00fcm veriler geldikten sonra sayfa olu\u015fturulabilir. <\/code><\/p>\n Promise'lar, asenkron i\u015flemleri y\u00f6netmede callback'lere g\u00f6re \u00e7ok daha temiz ve g\u00fc\u00e7l\u00fc bir soyutlama sunarak kodun okunabilirli\u011fini ve maintainability'sini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n Promise'lar, asenkron kodu y\u00f6netmede callback'lere g\u00f6re b\u00fcy\u00fck bir ilerleme sa\u011flam\u0131\u015f olsa da, zincirleme yap\u0131lar bazen hala bir miktar karma\u015f\u0131kl\u0131\u011fa neden olabilirdi. \u0130\u015fte bu noktada JavaScript'e ES2017 ile eklenen <\/code><\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, <\/code><\/p>\n Uzman \u0130pucu: Vaka analizi olarak, bir kullan\u0131c\u0131n\u0131n profilini g\u00fcncelledi\u011fi bir senaryoyu ele alal\u0131m. Kullan\u0131c\u0131 verileri sunucuya g\u00f6nderilir, sunucudan bir yan\u0131t beklenir, ard\u0131ndan g\u00fcncellenen verilerle aray\u00fcz yenilenir. Bu s\u00fcre\u00e7te herhangi bir ad\u0131mda hata olu\u015fabilir (\u00f6rne\u011fin, sunucu hatas\u0131, a\u011f ba\u011flant\u0131 sorunu). <\/code><\/p>\n Asenkron \u00e7a\u011fr\u0131lardan gelen yan\u0131tlar\u0131 almak kadar \u00f6nemli olan bir di\u011fer konu da, bu verileri kullanarak kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) dinamik olarak g\u00fcncellemektir. Modern web uygulamalar\u0131nda, kullan\u0131c\u0131lar\u0131n s\u00fcrekli etkile\u015fim halinde oldu\u011fu dinamik aray\u00fczler, asenkron veri ak\u0131\u015f\u0131n\u0131 do\u011fru bir \u015fekilde y\u00f6netmeyi gerektirir. Veri y\u00fcklenirken bir y\u00fckleme g\u00f6stergesi (spinner), hata durumunda bir uyar\u0131 mesaj\u0131 ve ba\u015far\u0131yla veri geldi\u011finde ilgili aray\u00fcz elemanlar\u0131n\u0131n g\u00fcncellenmesi gibi durumlar, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n Frontend framework'leri (React, Vue, Angular gibi) durum y\u00f6netimi (state management) yakla\u015f\u0131mlar\u0131yla bu s\u00fcreci kolayla\u015ft\u0131r\u0131r. Bir asenkron \u00e7a\u011fr\u0131 ba\u015flat\u0131ld\u0131\u011f\u0131nda, uygulaman\u0131n durumunda bir de\u011fi\u015fiklik (\u00f6rne\u011fin, async\/await<\/code> yap\u0131s\u0131na kadar uzanan bir yolculukta, asenkron yan\u0131tlar\u0131 y\u00f6netmenin en etkili yollar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 ad\u0131m ad\u0131m inceleyecektir. Amac\u0131m\u0131z, uygulaman\u0131z\u0131n her zaman duyarl\u0131 ve kullan\u0131c\u0131 dostu kalmas\u0131n\u0131 sa\u011flamakt\u0131r.<\/p>\nCallback Fonksiyonlar\u0131 ile Asenkron Yan\u0131tlar\u0131 Yakalamak M\u00fcmk\u00fcn m\u00fc ve Dezavantajlar\u0131 Nelerdir?<\/h2>\n
\n \/\/ Basit bir asenkron i\u015flem \u00f6rne\u011fi: setTimeout\n function veriYukle(callback) {\n console.log(\"Veri y\u00fckleniyor...\");\n setTimeout(() => {\n const veri = { id: 1, ad: \"\u00d6rnek \u00dcr\u00fcn\", fiyat: 100 };\n \/\/ Veri y\u00fcklendi\u011finde callback'i \u00e7a\u011f\u0131r\n callback(null, veri); \/\/ (hata, veri) format\u0131 yayg\u0131nd\u0131r\n }, 2000); \/\/ 2 saniye gecikme\n }\n\n \/\/ Callback fonksiyonunu tan\u0131mlama ve \u00e7a\u011f\u0131rma\n veriYukle((hata, veri) => {\n if (hata) {\n console.error(\"Veri y\u00fcklenirken hata olu\u015ftu:\", hata);\n return;\n }\n console.log(\"Veri ba\u015far\u0131yla y\u00fcklendi:\", veri);\n });\n\n console.log(\"Di\u011fer i\u015flemler devam ediyor...\"); \/\/ Bu sat\u0131r beklemeden hemen \u00e7al\u0131\u015f\u0131r\n <\/pre>\nveriYukle<\/code> fonksiyonu asenkron bir i\u015flemi (setTimeout<\/code> ile taklit edilen bir veri y\u00fckleme) ba\u015flat\u0131r. \u0130\u015flem 2 saniye sonra tamamland\u0131\u011f\u0131nda, callback<\/code> fonksiyonu veri<\/code> ile birlikte \u00e7a\u011fr\u0131l\u0131r. Bu s\u0131rada \"Di\u011fer i\u015flemler devam ediyor...\" mesaj\u0131, veriYukle<\/code> fonksiyonunun yan\u0131t\u0131n\u0131 beklemeden hemen ekrana yaz\u0131l\u0131r. Bu, asenkronlu\u011fun temelini olu\u015fturur: ana i\u015f par\u00e7ac\u0131\u011f\u0131 bloke olmaz.<\/p>\nCallback Hell ve Bak\u0131m Zorluklar\u0131<\/h3>\n
\n \/\/ Callback Hell \u00f6rne\u011fi (pseudocode)\n function kullaniciGetir(id, callback) {\n \/\/ API iste\u011fi...\n veritabanindanKullaniciGetir(id, (hata, kullanici) => {\n if (hata) return callback(hata);\n console.log(\"Kullan\u0131c\u0131 al\u0131nd\u0131:\", kullanici.ad);\n\n kullanicininSiparisleriniGetir(kullanici.id, (hata, siparisler) => {\n if (hata) return callback(hata);\n console.log(\"Sipari\u015fler al\u0131nd\u0131:\", siparisler.length);\n\n siparislerinDetaylariniGetir(siparisler[0].id, (hata, detaylar) => {\n if (hata) return callback(hata);\n console.log(\"Sipari\u015f detaylar\u0131 al\u0131nd\u0131:\", detaylar.urunAdlari);\n callback(null, { kullanici, siparisler, detaylar });\n });\n });\n });\n }\n\n kullaniciGetir(123, (hata, sonuc) => {\n if (hata) console.error(\"Genel hata:\", hata);\n else console.log(\"T\u00fcm veriler ba\u015far\u0131yla y\u00fcklendi.\");\n });\n <\/pre>\nPromise Yap\u0131lar\u0131 ile Asenkron Kodu Daha D\u00fczenli Y\u00f6netmek Nas\u0131l Olur?<\/h2>\n
\n
resolve<\/code> (ba\u015far\u0131 durumunda \u00e7a\u011fr\u0131l\u0131r) ve reject<\/code> (hata durumunda \u00e7a\u011fr\u0131l\u0131r).<\/p>\n\n function veriYuklePromise() {\n return new Promise((resolve, reject) => {\n console.log(\"Veri y\u00fckleniyor (Promise ile)...\");\n setTimeout(() => {\n const basarili = true; \/\/ Sim\u00fclasyon: i\u015flemi ba\u015far\u0131l\u0131 sayal\u0131m\n if (basarili) {\n const veri = { id: 2, ad: \"Promised \u00dcr\u00fcn\", fiyat: 150 };\n resolve(veri); \/\/ Ba\u015far\u0131l\u0131 yan\u0131t\u0131 d\u00f6nd\u00fcr\n } else {\n reject(\"Veri y\u00fcklenemedi!\"); \/\/ Hata durumunu d\u00f6nd\u00fcr\n }\n }, 1500);\n });\n }\n\n \/\/ Promise'\u0131 kullanma\n veriYuklePromise()\n .then(veri => {\n console.log(\"Veri ba\u015far\u0131yla y\u00fcklendi:\", veri);\n })\n .catch(hata => {\n console.error(\"Promise hatas\u0131:\", hata);\n })\n .finally(() => {\n console.log(\"Veri y\u00fckleme i\u015flemi tamamland\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z).\");\n });\n\n console.log(\"Di\u011fer i\u015flemler devam ediyor (Promise sonra)...\");\n <\/pre>\n.then()<\/code> metodu Promise ba\u015far\u0131l\u0131 oldu\u011funda \u00e7al\u0131\u015facak callback'i, .catch()<\/code> metodu ise bir hata olu\u015ftu\u011funda \u00e7al\u0131\u015facak callback'i tan\u0131mlar. .finally()<\/code> ise Promise'\u0131n durumu ne olursa olsun (ba\u015far\u0131l\u0131 ya da hatal\u0131) her zaman \u00e7al\u0131\u015facak blo\u011fu belirtir. Bu yap\u0131, kodun ak\u0131\u015f\u0131n\u0131 daha do\u011frusal ve anla\u015f\u0131l\u0131r hale getirir.<\/p>\nPromise Zincirleme (Chaining) ve Paralel \u00c7al\u0131\u015fma<\/h3>\n
.then()<\/code> blo\u011fu kendisi de bir Promise d\u00f6nd\u00fcrebilir, bu da birden fazla ba\u011f\u0131ml\u0131 asenkron i\u015flemi ard\u0131\u015f\u0131k olarak y\u00f6netmeyi m\u00fcmk\u00fcn k\u0131lar. Bu sayede Callback Hell'den kurtuluruz.<\/p>\n\n function kullaniciGetirPromise(id) {\n return new Promise(resolve => {\n setTimeout(() => resolve({ id: id, ad: \"Merve\" }), 500);\n });\n }\n\n function kullanicininSiparisleriniGetirPromise(kullaniciId) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (kullaniciId === 123) {\n resolve([{ siparisId: 101, urun: \"Laptop\" }, { siparisId: 102, urun: \"Mouse\" }]);\n } else {\n reject(\"Sipari\u015fler bulunamad\u0131!\");\n }\n }, 800);\n });\n }\n\n \/\/ Promise zincirleme \u00f6rne\u011fi\n kullaniciGetirPromise(123)\n .then(kullanici => {\n console.log(\"Kullan\u0131c\u0131 al\u0131nd\u0131:\", kullanici.ad);\n return kullanicininSiparisleriniGetirPromise(kullanici.id); \/\/ Bir sonraki Promise'\u0131 d\u00f6nd\u00fcr\n })\n .then(siparisler => {\n console.log(\"Sipari\u015fler al\u0131nd\u0131:\", siparisler);\n \/\/ \u0130stenirse burada ba\u015fka bir Promise d\u00f6nd\u00fcr\u00fclebilir\n })\n .catch(hata => {\n console.error(\"Promise zincirinde hata:\", hata);\n });\n <\/pre>\nPromise.all()<\/code> ve Promise.race()<\/code> gibi yard\u0131mc\u0131 metotlar devreye girer:<\/p>\n\n
Promise.all([p1, p2, p3])<\/code>: T\u00fcm Promise'lar ba\u015far\u0131yla \u00e7\u00f6z\u00fcmlenirse, t\u00fcm sonu\u00e7lar\u0131 i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr. Herhangi biri reddedilirse, ilk reddedilenin hatas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/li>\nPromise.race([p1, p2, p3])<\/code>: Verilen Promise'lardan hangisi ilk \u00e7\u00f6z\u00fcmlenirse (ba\u015far\u0131l\u0131 veya hatal\u0131), onun sonucunu\/hatas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\nPromise.all()<\/code> bu senaryo i\u00e7in idealdir.<\/p>\n\n function urunBilgisiGetir(id) { \/* ... *\/ return Promise.resolve({ ad: \"Kulakl\u0131k\", fiyat: 200 }); }\n function yorumlariGetir(urunId) { \/* ... *\/ return Promise.resolve([{ yazar: \"Ali\", yorum: \"\u00c7ok iyi!\" }]); }\n function ilgiliUrunleriGetir(kategori) { \/* ... *\/ return Promise.resolve([{ ad: \"Mikrofon\" }]); }\n\n Promise.all([\n urunBilgisiGetir(1),\n yorumlariGetir(1),\n ilgiliUrunleriGetir(\"elektronik\")\n ])\n .then(([urun, yorumlar, ilgiliUrunler]) => {\n console.log(\"\u00dcr\u00fcn Bilgisi:\", urun);\n console.log(\"Yorumlar:\", yorumlar);\n console.log(\"\u0130lgili \u00dcr\u00fcnler:\", ilgiliUrunler);\n \/\/ T\u00fcm veriler geldi, \u015fimdi UI'\u0131 g\u00fcncelleyebiliriz\n })\n .catch(hata => {\n console.error(\"Veri \u00e7ekme i\u015fleminde hata:\", hata);\n });\n <\/pre>\nasync\/await ile Asenkron \u0130\u015flemleri Senkron Gibi Yazma Yakla\u015f\u0131m\u0131<\/h2>\n
async\/await<\/code> anahtar kelimeleri, asenkron programlamay\u0131 bir ad\u0131m \u00f6teye ta\u015f\u0131yarak Promise'lar \u00fczerine kurulu, ancak senkron koda \u00e7ok daha benzeyen bir s\u00f6zdizimi sunmu\u015ftur. Bu sayede asenkron i\u015flemler sanki bloklama yap\u0131yormu\u015f gibi, ad\u0131m ad\u0131m okunabilir bir \u015fekilde yaz\u0131labilir.<\/p>\nasync<\/code> fonksiyonlar, her zaman bir Promise d\u00f6nd\u00fcren fonksiyonlard\u0131r. Bir fonksiyonun async<\/code> anahtar kelimesiyle tan\u0131mlanmas\u0131, o fonksiyonun i\u00e7inde await<\/code> anahtar kelimesini kullanabilmenizi sa\u011flar. await<\/code> ise sadece bir async<\/code> fonksiyonunun i\u00e7inde kullan\u0131labilir ve bir Promise'\u0131n \u00e7\u00f6z\u00fcmlenmesini (ba\u015far\u0131yla veya hatayla tamamlanmas\u0131n\u0131) bekler. await<\/code>, Promise \u00e7\u00f6z\u00fcmlenene kadar fonksiyonun y\u00fcr\u00fct\u00fclmesini duraklat\u0131r, ancak bu duraklatma ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmez; di\u011fer asenkron i\u015flemler veya UI g\u00fcncellemeleri devam edebilir. Promise \u00e7\u00f6z\u00fcmlendi\u011finde, await<\/code> ifadenin de\u011feri olarak Promise'\u0131n ba\u015far\u0131yla d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011feri al\u0131r veya hata durumunda bir istisna (exception) f\u0131rlat\u0131r.<\/p>\n\n \/\/ async\/await ile veri y\u00fckleme \u00f6rne\u011fi\n async function veriYukleAsync() {\n console.log(\"Veri y\u00fckleniyor (async\/await ile)...\");\n try {\n const response = await new Promise(resolve => setTimeout(() => resolve({ status: 200, data: \"Ba\u015far\u0131l\u0131 Veri\" }), 1000));\n console.log(\"API yan\u0131t\u0131 al\u0131nd\u0131:\", response.data);\n\n const islenmisVeri = await new Promise(resolve => setTimeout(() => resolve(response.data.toUpperCase()), 500));\n console.log(\"\u0130\u015flenmi\u015f veri:\", islenmisVeri);\n\n return islenmisVeri;\n } catch (error) {\n console.error(\"Asenkron i\u015flemde hata:\", error);\n throw error; \/\/ Hatay\u0131 yukar\u0131ya f\u0131rlat\n } finally {\n console.log(\"Asenkron y\u00fckleme i\u015flemi tamamland\u0131.\");\n }\n }\n\n \/\/ async fonksiyonu \u00e7a\u011f\u0131rma\n veriYukleAsync()\n .then(sonuc => console.log(\"Final sonu\u00e7:\", sonuc))\n .catch(hata => console.error(\"D\u0131\u015far\u0131dan yakalanan hata:\", hata));\n\n console.log(\"Di\u011fer i\u015flemler devam ediyor (async\/await sonra)...\");\n <\/pre>\nawait<\/code> kullan\u0131m\u0131 sayesinde kod, yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru okunan senkron bir kod blo\u011fu gibi g\u00f6r\u00fcn\u00fcyor. Bu, \u00f6zellikle birden fazla ba\u011f\u0131ml\u0131 asenkron i\u015flemin oldu\u011fu durumlarda kodun anla\u015f\u0131labilirli\u011fini ve hata ay\u0131klamas\u0131n\u0131 dramatik bir \u015fekilde iyile\u015ftirir.<\/p>\nHata Y\u00f6netimi ile try...catch Bloklar\u0131<\/h3>\n
async\/await<\/code> ile hata y\u00f6netimi, geleneksel try...catch<\/code> bloklar\u0131 arac\u0131l\u0131\u011f\u0131yla olduk\u00e7a sezgiseldir. Bir await<\/code> ifadesiyle beklenen Promise reddedildi\u011finde, try<\/code> blo\u011funun i\u00e7indeki kodun y\u00fcr\u00fct\u00fclmesi durur ve kontrol do\u011frudan catch<\/code> blo\u011funa ge\u00e7er. Bu, asenkron kodda hata y\u00f6netimini senkron koddaki kadar do\u011fal hale getirir.<\/p>\n\n async function hataOrnegiAsync() {\n try {\n const sonuc1 = await Promise.resolve(\"\u0130lk ad\u0131m ba\u015far\u0131l\u0131\");\n console.log(sonuc1);\n\n \/\/ Bu Promise reddedilecek\n const sonuc2 = await new Promise((_, reject) => setTimeout(() => reject(\"\u0130kinci ad\u0131mda hata olu\u015ftu!\"), 1000));\n console.log(sonuc2); \/\/ Bu sat\u0131r asla \u00e7al\u0131\u015fmayacak\n\n } catch (hata) {\n console.error(\"Yakalanan hata:\", hata); \/\/ Hata burada yakalanacak\n } finally {\n console.log(\"\u0130\u015flem her durumda bitti.\");\n }\n }\n\n hataOrnegiAsync();\n <\/pre>\nasync\/await<\/code> kullan\u0131rken, m\u00fcmk\u00fcn olan her yerde try...catch<\/code> bloklar\u0131 kullanarak asenkron i\u015flemlerinizdeki potansiyel hatalar\u0131 ele al\u0131n. Bu, uygulaman\u0131z\u0131n beklenmedik durumlarda \u00e7\u00f6kmesini \u00f6nler ve kullan\u0131c\u0131ya anlaml\u0131 geri bildirimler sunman\u0131z\u0131 sa\u011flar. Ayr\u0131ca, await Promise.allSettled([...])<\/code> kullanarak birden fazla Promise'\u0131n sonu\u00e7lar\u0131n\u0131 veya hatalar\u0131n\u0131 ba\u011f\u0131ms\u0131z olarak i\u015fleyebilirsiniz, bu da bir Promise reddedilse bile di\u011ferlerinin tamamlanmas\u0131n\u0131 sa\u011flar.<\/p>\nasync\/await<\/code> ve try...catch<\/code> ile bu ad\u0131mlar hem okunabilir hem de hataya dayan\u0131kl\u0131 bir \u015fekilde kolayca y\u00f6netilebilir.<\/p>\n\n async function kullaniciProfiliniGuncelle(kullaniciVerisi) {\n console.log(\"Profil g\u00fcncelleme i\u015flemi ba\u015flat\u0131ld\u0131...\");\n try {\n \/\/ 1. Kullan\u0131c\u0131 verilerini API'ye g\u00f6nder\n const apiYanit = await fetch('\/api\/profil-guncelle', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(kullaniciVerisi)\n });\n\n if (!apiYanit.ok) {\n const hataDetayi = await apiYanit.json();\n throw new Error(API hatas\u0131: ${apiYanit.status} - ${hataDetayi.mesaj}<\/code>);\n }\n\n const guncelKullanici = await apiYanit.json();\n console.log(\"Profil ba\u015far\u0131yla g\u00fcncellendi:\", guncelKullanici);\n\n \/\/ 2. Aray\u00fcz\u00fc g\u00fcncel verilerle yenile (\u00f6rne\u011fin React\/Vue state g\u00fcncelleme)\n await Promise.resolve(setTimeout(() => {\n document.getElementById('profile-name').innerText = guncelKullanici.ad;\n document.getElementById('profile-email').innerText = guncelKullanici.email;\n console.log(\"Aray\u00fcz g\u00fcncellendi.\");\n }, 300));\n\n alert(\"Profil ba\u015far\u0131yla g\u00fcncellendi!\");\n return guncelKullanici;\n\n } catch (hata) {\n console.error(\"Profil g\u00fcncelleme s\u0131ras\u0131nda bir hata olu\u015ftu:\", hata.message);\n alert(Profil g\u00fcncellenirken bir sorun olu\u015ftu: ${hata.message}<\/code>);\n return null; \/\/ \u0130\u015flem ba\u015far\u0131s\u0131z oldu\n } finally {\n console.log(\"Profil g\u00fcncelleme i\u015flemi tamamland\u0131.\");\n }\n }\n\n \/\/ \u00d6rnek kullan\u0131m\n const yeniVeri = { ad: \"Ay\u015fe Y\u0131lmaz\", email: \"ayse.yilmaz@example.com\" };\n kullaniciProfiliniGuncelle(yeniVeri);\n <\/pre>\nasync\/await<\/code>, modern JavaScript geli\u015ftirme i\u00e7in asenkron kod y\u00f6netiminde alt\u0131n standart haline gelmi\u015ftir. Promise'lar\u0131n g\u00fcc\u00fcn\u00fc korurken, kodun okunabilirli\u011fini senkron kod seviyesine ta\u015f\u0131yarak geli\u015ftirme s\u00fcrecini \u00e7ok daha verimli hale getirir.<\/p>\nAsenkron Yan\u0131tlarla UI G\u00fcncellemeleri ve Durum Y\u00f6netimi Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
isLoading: true<\/code>) yap\u0131l\u0131r. Veri geldi\u011finde veya bir hata olu\u015ftu\u011funda, durum tekrar g\u00fcncellenir (isLoading: false<\/code>, data: [...]<\/code> veya error: {...}<\/code>). Framework, durumdaki bu de\u011fi\u015fiklikleri alg\u0131lar ve sadece etkilenen aray\u00fcz bile\u015fenlerini yeniden render ederek g\u00fcncellenmi\u015f veriyi kullan\u0131c\u0131ya sunar.<\/p>\n\n \n \u00dcr\u00fcn Listesi<\/h2>\n