JavaScript’in tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) yap\u0131s\u0131, web taray\u0131c\u0131lar\u0131nda ak\u0131c\u0131 kullan\u0131c\u0131 deneyimleri sunmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Ancak bu yap\u0131, a\u011f istekleri, dosya okuma\/yazma veya zamanlay\u0131c\u0131lar gibi uzun s\u00fcren veya belirsiz zaman alan asenkron i\u015flemleri y\u00f6netirken baz\u0131 zorluklar\u0131 beraberinde getirir. \u0130\u015fte tam da bu noktada, JavaScript Promises (S\u00f6zler) devreye girerek, asenkron kod yaz\u0131m\u0131n\u0131 \u00e7ok daha d\u00fczenli, okunabilir ve y\u00f6netilebilir hale getiren modern bir \u00e7\u00f6z\u00fcm sunar. Bu “Desi Rehberi” ile, Promise’lerin karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 Bollywood filmlerinin co\u015fkusu ve netli\u011fiyle ke\u015ffedecek, asenkron b\u00fcy\u00fcn\u00fcn nas\u0131l i\u015fledi\u011fini ad\u0131m ad\u0131m anlayacaks\u0131n\u0131z.<\/p>\n
JavaScript, \u00e7o\u011fu zaman tek bir ana i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Bu, ayn\u0131 anda birden fazla a\u011f\u0131r i\u015flemin do\u011frudan yap\u0131lamayaca\u011f\u0131 anlam\u0131na gelir. Peki, bir sunucudan veri \u00e7ekerken uygulaman\u0131n donmas\u0131n\u0131 nas\u0131l engelleriz? \u0130\u015fte burada asenkron programlama devreye girer.<\/p>\n
JavaScript motoru, genellikle bir anda sadece bir g\u00f6revi i\u015fler. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmamas\u0131 ve uygulaman\u0131n duyarl\u0131 kalmas\u0131 i\u00e7in \u00f6nemlidir. Ancak bu durum, veritaban\u0131 sorgular\u0131, a\u011f istekleri veya b\u00fcy\u00fck dosya i\u015flemleri gibi zaman al\u0131c\u0131 g\u00f6revlerin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etme potansiyeli ta\u015f\u0131r. Asenkron programlama, bu t\u00fcr g\u00f6revleri ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ay\u0131rarak, tamamland\u0131klar\u0131nda bize bildirimde bulunmalar\u0131n\u0131 sa\u011flar.<\/p>\n
Promise’lerden \u00f6nce, asenkron i\u015flemleri y\u00f6netmenin birincil yolu callback (geri \u00e7a\u011f\u0131rma) fonksiyonlar\u0131yd\u0131. Bir i\u015flem bitti\u011finde \u00e7al\u0131\u015ft\u0131r\u0131lacak bir fonksiyonu, o i\u015flemi ba\u015flatan fonksiyona arg\u00fcman olarak ge\u00e7erdik. \u00d6rne\u011fin, <\/code><\/p>\n Birden fazla asenkron i\u015flemin birbirine ba\u011f\u0131ml\u0131 oldu\u011fu durumlarda, callback'ler i\u00e7 i\u00e7e ge\u00e7meye ba\u015flar ve kod okunamaz, y\u00f6netilemez bir hal al\u0131r. Bu duruma \"Callback Hell\" veya \"Pyramid of Doom\" denir. T\u0131pk\u0131 Bollywood filmlerindeki karma\u015f\u0131k entrikalar gibi, kodunuzun ak\u0131\u015f\u0131n\u0131 takip etmek imkans\u0131z hale gelir.<\/p>\n <\/code><\/p>\n Callback Hell, sadece okunabilirlik sorunlar\u0131 yaratmakla kalmaz, ayn\u0131 zamanda hata y\u00f6netimini de zorla\u015ft\u0131r\u0131r. Her seviyede ayr\u0131 ayr\u0131 hata kontrol\u00fc yapmak, kod tekrar\u0131na yol a\u00e7ar ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r. \u0130\u015fte bu y\u00fczden, asenkron i\u015flemleri daha zarif ve yap\u0131land\u0131r\u0131lm\u0131\u015f bir \u015fekilde ele alacak yeni bir mekanizmaya, yani Promise'lere ihtiyac\u0131m\u0131z vard\u0131.<\/p>\n Promise, asenkron bir i\u015flemin nihai sonucunu (ba\u015far\u0131 veya ba\u015far\u0131s\u0131zl\u0131k) temsil eden bir JavaScript nesnesidir. Bir nevi, gelecekte bir de\u011feri garanti eden bir \"s\u00f6zle\u015fme\" gibidir.<\/p>\n Bir Promise, \"sana bu i\u015flemi yapaca\u011f\u0131ma s\u00f6z veriyorum ve bitti\u011finde sana haber verece\u011fim\" der. Bu haber, i\u015flemin ba\u015far\u0131yla tamamland\u0131\u011f\u0131n\u0131 (\u00e7\u00f6z\u00fcld\u00fc\u011f\u00fcn\u00fc - resolved) veya bir hatayla sonu\u00e7land\u0131\u011f\u0131n\u0131 (reddedildi\u011fini - rejected) bildirir. Promise'ler, callback'lerin neden oldu\u011fu i\u00e7 i\u00e7e ge\u00e7me sorununu \u00e7\u00f6zerek daha d\u00fcz bir kod yap\u0131s\u0131 sa\u011flar.<\/p>\n Bir Promise, ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca \u00fc\u00e7 farkl\u0131 durumda bulunabilir:<\/p>\n Bir Promise, pending<\/em> durumundan fulfilled<\/em> veya rejected<\/em> durumuna ge\u00e7tikten sonra, durumu bir daha de\u011fi\u015fmez. Bu, Promise'lerin kararl\u0131 (settled) oldu\u011fu anlam\u0131na gelir.<\/p>\n Yeni bir Promise, <\/code><\/p>\n Bir Promise'in sonucunu dinlemek i\u00e7in <\/code><\/p>\n Promise'lerin en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, zincirleme (chaining) yetene\u011fidir. Bu, birden fazla asenkron i\u015flemi s\u0131ral\u0131 bir \u015fekilde, Callback Hell'e d\u00fc\u015fmeden y\u00f6netmemizi sa\u011flar.<\/p>\n Bir <\/code><\/p>\n Promise zincirlemesinde hata y\u00f6netimi olduk\u00e7a basittir. Zincirdeki herhangi bir Promise reddedildi\u011finde, kontrol hemen en yak\u0131n <\/code><\/p>\n Promise zincirleme, genellikle bir API'den veri \u00e7ektikten sonra ba\u015fka bir API \u00e7a\u011fr\u0131s\u0131 yapmam\u0131z gereken durumlarda kullan\u0131l\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ID'sini ald\u0131ktan sonra o kullan\u0131c\u0131n\u0131n profil detaylar\u0131n\u0131 \u00e7ekmek gibi.<\/p>\n <\/code><\/p>\n Bazen birden fazla asenkron i\u015flemi ayn\u0131 anda ba\u015flatmak ve sonu\u00e7lar\u0131n\u0131 belirli ko\u015fullara g\u00f6re y\u00f6netmek isteriz. Promise kombinat\u00f6rleri, bu senaryolar i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n ES2017 ile tan\u0131t\u0131lan Bir fonksiyonu <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n Promises ve async\/await, modern web geli\u015ftirmede vazge\u00e7ilmez ara\u00e7lard\u0131r. \u0130\u015fte baz\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131:<\/p>\n Bir web sayfas\u0131nda kullan\u0131c\u0131 verilerini veya \u00fcr\u00fcn listesini bir API'den \u00e7ekmek ve ekranda g\u00f6stermek en yayg\u0131n kullan\u0131m senaryosudur. <\/code><\/p>\n Kullan\u0131c\u0131 giri\u015fi, token yenileme gibi ad\u0131mlar genellikle birden fazla asenkron API \u00e7a\u011fr\u0131s\u0131 gerektirir. Promise zincirleri veya <\/code><\/p>\n Bir kullan\u0131c\u0131 birden fazla dosya y\u00fckledi\u011finde, her bir y\u00fckleme i\u015flemi asenkrondur. <\/code><\/p>\n Karma\u015f\u0131k animasyon sekanslar\u0131 veya belirli aral\u0131klarla tetiklenen i\u015flemler de Promise'ler ile daha kolay y\u00f6netilebilir. \u00d6rne\u011fin, bir animasyon bittikten sonra ba\u015fka bir animasyonu ba\u015flatmak.<\/p>\n <\/code><\/p>\n JavaScript Promises ve Promise, asenkron bir i\u015flemin nihai sonucunu (ba\u015far\u0131 veya ba\u015far\u0131s\u0131zl\u0131k) temsil eden bir JavaScript nesnesidir. Bir de\u011ferin gelecekte kullan\u0131labilir olaca\u011f\u0131na dair bir s\u00f6zle\u015fme gibidir.<\/p>\n Callback Hell, birden fazla asenkron i\u015flemin i\u00e7 i\u00e7e ge\u00e7mi\u015f callback fonksiyonlar\u0131 ile y\u00f6netilmesi sonucu olu\u015fan, okunmas\u0131 ve bak\u0131m\u0131 zor kod yap\u0131s\u0131d\u0131r. Promise'ler, setTimeout(() => console.log('Merhaba'), 1000)<\/code> gibi.<\/p>\nfunction veriCek(url, callback) {\n \/\/ A\u011f iste\u011fi sim\u00fclasyonu\n setTimeout(() => {\n const veri = Sunucudan gelen veri: ${url}<\/code>;\n callback(veri);\n }, 1500);\n}\n\nveriCek('api.example.com\/kullanicilar', function(gelenVeri) {\n console.log(gelenVeri); \/\/ Sunucudan gelen veri: api.example.com\/kullanicilar\n});\n<\/pre>\nCallback Hell: Bir Kabus Senaryosu<\/h3>\n
veriCek('kullanici', function(kullanici) {\n veriCek(kullanici\/${kullanici.id}\/siparisler<\/code>, function(siparisler) {\n veriCek(siparis\/${siparisler[0].id}\/detay<\/code>, function(detay) {\n console.log('T\u00fcm detaylar:', kullanici, siparisler, detay);\n });\n });\n});\n<\/pre>\nNeden Daha \u0130yi Bir \u00c7\u00f6z\u00fcme \u0130htiya\u00e7 Duyduk?<\/h3>\n
Promise Nedir? Temel Kavramlar ve Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/h2>\n
Promise'in Tan\u0131m\u0131 ve Amac\u0131<\/h3>\n
Promise'in \u00dc\u00e7 Hali: Pending, Fulfilled, Rejected<\/h3>\n
\n
Bir Promise Nas\u0131l Olu\u015fturulur? (new Promise)<\/h3>\n
new Promise()<\/code> yap\u0131c\u0131 fonksiyonu ile olu\u015fturulur. Bu fonksiyon, iki arg\u00fcman alan bir y\u00fcr\u00fct\u00fcc\u00fc (executor) fonksiyonu al\u0131r: resolve<\/code> ve reject<\/code>. resolve<\/code>, i\u015flemin ba\u015far\u0131l\u0131 oldu\u011funu belirtmek ve sonucu d\u00f6nd\u00fcrmek i\u00e7in, reject<\/code> ise bir hata olu\u015ftu\u011funu belirtmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nconst myPromise = new Promise((resolve, reject) => {\n const basariliMi = Math.random() > 0.5; \/\/ Rastgele ba\u015far\u0131\/ba\u015far\u0131s\u0131zl\u0131k\n\n setTimeout(() => {\n if (basariliMi) {\n resolve(\"\u0130\u015flem ba\u015far\u0131yla tamamland\u0131!\");\n } else {\n reject(\"Oops! Bir hata olu\u015ftu.\");\n }\n }, 2000);\n});\n<\/pre>\n.then()<\/code>, .catch()<\/code> ve .finally()<\/code> Metotlar\u0131<\/h3>\n.then()<\/code>, .catch()<\/code> ve .finally()<\/code> metotlar\u0131 kullan\u0131l\u0131r:<\/p>\n\n
.then(onFulfilled, onRejected)<\/code>: Promise ba\u015far\u0131l\u0131 oldu\u011funda onFulfilled<\/code> fonksiyonu, ba\u015far\u0131s\u0131z oldu\u011funda ise onRejected<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r. Genellikle .catch()<\/code> ile hata y\u00f6netimi ayr\u0131 yap\u0131l\u0131r.<\/li>\n.catch(onRejected)<\/code>: Sadece Promise reddedildi\u011finde \u00e7al\u0131\u015f\u0131r. Zincirdeki herhangi bir hatay\u0131 yakalamak i\u00e7in idealdir.<\/li>\n.finally(onFinally)<\/code>: Promise ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z olsun, her iki durumda da \u00e7al\u0131\u015f\u0131r. Temizlik i\u015flemleri (\u00f6rne\u011fin, y\u00fckleme g\u00f6stergesini kapatma) i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\nmyPromise\n .then(sonuc => {\n console.log(\"Ba\u015far\u0131l\u0131:\", sonuc);\n })\n .catch(hata => {\n console.error(\"Hata:\", hata);\n })\n .finally(() => {\n console.log(\"Promise i\u015flemi tamamland\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z).\");\n });\n<\/pre>\nPromise Zincirleme: Asenkron \u0130\u015flemleri S\u0131ralamak<\/h2>\n
Zincirleme Mant\u0131\u011f\u0131:
.then()<\/code>'den .then()<\/code>'e<\/h3>\n.then()<\/code> metodundan bir de\u011fer d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fczde, bu de\u011fer bir sonraki .then()<\/code> metoduna arg\u00fcman olarak iletilir. E\u011fer bir .then()<\/code> metodundan bir Promise d\u00f6nd\u00fcr\u00fcrseniz, bir sonraki .then()<\/code>, o Promise'in \u00e7\u00f6z\u00fclmesini bekler ve \u00e7\u00f6z\u00fclen de\u011feri al\u0131r. Bu sayede, karma\u015f\u0131k asenkron ak\u0131\u015flar\u0131 d\u00fcz ve okunabilir bir \u015fekilde yazabiliriz.<\/p>\nfunction adim1() {\n return new Promise(resolve => setTimeout(() => resolve(\"Ad\u0131m 1 tamamland\u0131.\"), 1000));\n}\n\nfunction adim2(oncekiSonuc) {\n console.log(oncekiSonuc);\n return new Promise(resolve => setTimeout(() => resolve(\"Ad\u0131m 2 tamamland\u0131.\"), 1500));\n}\n\nfunction adim3(oncekiSonuc) {\n console.log(oncekiSonuc);\n return new Promise(resolve => setTimeout(() => resolve(\"Ad\u0131m 3 tamamland\u0131. \u0130\u015fte final!\"), 500));\n}\n\nadim1()\n .then(adim2) \/\/ adim1'in sonucunu adim2'ye iletir\n .then(adim3) \/\/ adim2'nin sonucunu adim3'e iletir\n .then(finalSonuc => {\n console.log(finalSonuc); \/\/ Ad\u0131m 3 tamamland\u0131. \u0130\u015fte final!\n })\n .catch(hata => {\n console.error(\"Zincirde bir hata olu\u015ftu:\", hata);\n });\n<\/pre>\nZincirde Hata Y\u00f6netimi<\/h3>\n
.catch()<\/code> blo\u011funa atlar. Bu, her ad\u0131mda ayr\u0131 ayr\u0131 hata kontrol\u00fc yapmak yerine, t\u00fcm zincir i\u00e7in tek bir hata i\u015fleyici kullanabilece\u011finiz anlam\u0131na gelir.<\/p>\nfunction hataYapanAdim() {\n return new Promise((resolve, reject) => {\n setTimeout(() => reject(\"Hata olu\u015ftu! Bu ad\u0131m\u0131 ge\u00e7emeyiz.\"), 1000);\n });\n}\n\nadim1()\n .then(adim2)\n .then(hataYapanAdim) \/\/ Bu Promise reddedilecek\n .then(adim3) \/\/ Bu ad\u0131m asla \u00e7al\u0131\u015fmayacak\n .catch(hata => {\n console.error(\"Yakalanan Hata:\", hata); \/\/ Yakalanan Hata: Hata olu\u015ftu! Bu ad\u0131m\u0131 ge\u00e7emeyiz.\n });\n<\/pre>\nSenkron ve Asenkron De\u011fer D\u00f6nd\u00fcrme Fark\u0131<\/h3>\n
.then()<\/code> blo\u011fundan senkron bir de\u011fer (\u00f6rne\u011fin bir say\u0131, string veya obje) d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fczde, bu de\u011fer otomatik olarak \u00e7\u00f6z\u00fclm\u00fc\u015f bir Promise'e sar\u0131l\u0131r ve bir sonraki .then()<\/code>'e iletilir. E\u011fer bir Promise d\u00f6nd\u00fcr\u00fcrseniz, bir sonraki .then()<\/code> bu Promise'in \u00e7\u00f6z\u00fclmesini bekler.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: API \u00c7a\u011fr\u0131lar\u0131<\/h3>\n
fetch('\/api\/kullanici\/me') \/\/ Promise d\u00f6nd\u00fcr\u00fcr\n .then(response => response.json()) \/\/ Response objesini JSON'a d\u00f6n\u00fc\u015ft\u00fcr, bu da Promise d\u00f6nd\u00fcr\u00fcr\n .then(kullanici => fetch(\/api\/kullanici\/${kullanici.id}\/profil<\/code>)) \/\/ Kullan\u0131c\u0131 ID ile profil \u00e7eker\n .then(response => response.json())\n .then(profil => console.log('Kullan\u0131c\u0131 profili:', profil))\n .catch(error => console.error('Profil \u00e7ekme hatas\u0131:', error));\n<\/pre>\nPromise Kombinat\u00f6rleri: Birden Fazla Promise'i Y\u00f6netmek<\/h2>\n
Promise.all()<\/code>: Hepsi Tamamlanana Kadar Bekle<\/h3>\nPromise.all()<\/code>, bir dizi Promise al\u0131r ve t\u00fcm Promise'ler ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda \u00e7\u00f6z\u00fcl\u00fcr. \u00c7\u00f6z\u00fclen de\u011ferler, Promise'lerin s\u0131ras\u0131na g\u00f6re bir dizi halinde gelir. E\u011fer dizideki Promise'lerden herhangi biri reddedilirse, Promise.all()<\/code> da reddedilir ve ilk reddedilen Promise'in hatas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. T\u0131pk\u0131 bir Bollywood dans grubunun t\u00fcm \u00fcyelerinin senkronize olmas\u0131 gibi!<\/p>\nconst film1 = new Promise(resolve => setTimeout(() => resolve(\"Film 1 bitti\"), 3000));\nconst film2 = new Promise(resolve => setTimeout(() => resolve(\"Film 2 bitti\"), 1000));\nconst film3 = new Promise(resolve => setTimeout(() => resolve(\"Film 3 bitti\"), 2000));\n\nPromise.all([film1, film2, film3])\n .then(sonuclar => {\n console.log(\"T\u00fcm filmler izlendi:\", sonuclar); \/\/ [ 'Film 1 bitti', 'Film 2 bitti', 'Film 3 bitti' ]\n })\n .catch(hata => {\n console.error(\"Bir filmde sorun \u00e7\u0131kt\u0131:\", hata);\n });\n<\/pre>\nPromise.race()<\/code>: \u0130lk Bitiren Kazans\u0131n<\/h3>\nPromise.race()<\/code>, bir dizi Promise al\u0131r ve dizideki ilk \u00e7\u00f6z\u00fclen veya reddedilen Promise'in sonucunu d\u00f6nd\u00fcr\u00fcr. Di\u011fer Promise'ler \u00e7al\u0131\u015fmaya devam etse de, sonu\u00e7lar\u0131 dikkate al\u0131nmaz. Bir yar\u0131\u015f gibi, kim \u00f6nce biterse onun sonucu al\u0131n\u0131r.<\/p>\nconst hizliYukleme = new Promise(resolve => setTimeout(() => resolve(\"H\u0131zl\u0131 sunucu yan\u0131t\u0131\"), 500));\nconst yavasYukleme = new Promise(resolve => setTimeout(() => resolve(\"Yava\u015f sunucu yan\u0131t\u0131\"), 2000));\n\nPromise.race([hizliYukleme, yavasYukleme])\n .then(sonuc => {\n console.log(\"Kazanan:\", sonuc); \/\/ Kazanan: H\u0131zl\u0131 sunucu yan\u0131t\u0131\n });\n<\/pre>\nPromise.allSettled()<\/code>: T\u00fcm Sonu\u00e7lar\u0131 G\u00f6r (ES2020)<\/h3>\nPromise.allSettled()<\/code>, Promise.all()<\/code>'dan farkl\u0131 olarak, t\u00fcm Promise'lerin durumuna (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z) bak\u0131lmaks\u0131z\u0131n tamamlanmas\u0131n\u0131 bekler. Her bir Promise'in sonucunu (durumu ve de\u011feri\/nedeni ile birlikte) bir dizi olarak d\u00f6nd\u00fcr\u00fcr. Bu, her bir i\u015flemin sonucunu bilmek istedi\u011finiz ancak birinin ba\u015far\u0131s\u0131z olmas\u0131n\u0131n di\u011ferlerini etkilemesini istemedi\u011finiz durumlarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nconst basariliIs = new Promise(resolve => setTimeout(() => resolve(\"Ba\u015far\u0131l\u0131\"), 1000));\nconst hataliIs = new Promise((resolve, reject) => setTimeout(() => reject(\"Hata\"), 500));\n\nPromise.allSettled([basariliIs, hataliIs])\n .then(sonuclar => {\n console.log(sonuclar);\n \/*\n [\n { status: 'fulfilled', value: 'Ba\u015far\u0131l\u0131' },\n { status: 'rejected', reason: 'Hata' }\n ]\n *\/\n });\n<\/pre>\nPromise.any()<\/code>: \u0130lk Ba\u015far\u0131l\u0131 Olan\u0131 Yakala (ES2021)<\/h3>\nPromise.any()<\/code>, bir dizi Promise al\u0131r ve dizideki ilk ba\u015far\u0131l\u0131 Promise'in de\u011ferini d\u00f6nd\u00fcr\u00fcr. E\u011fer t\u00fcm Promise'ler reddedilirse, bir AggregateError<\/code> ile reddedilir. Bu, birden fazla kaynaktan veri \u00e7ekmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda ve sadece birinin ba\u015far\u0131l\u0131 olmas\u0131 yeterli oldu\u011funda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nconst sunucu1 = new Promise((resolve, reject) => setTimeout(() => reject(\"Sunucu 1 kapal\u0131\"), 1000));\nconst sunucu2 = new Promise(resolve => setTimeout(() => resolve(\"Sunucu 2'den veri geldi\"), 500));\nconst sunucu3 = new Promise((resolve, reject) => setTimeout(() => reject(\"Sunucu 3 hata verdi\"), 1500));\n\nPromise.any([sunucu1, sunucu2, sunucu3])\n .then(sonuc => {\n console.log(\"Ba\u015far\u0131l\u0131 kaynak:\", sonuc); \/\/ Ba\u015far\u0131l\u0131 kaynak: Sunucu 2'den veri geldi\n })\n .catch(error => {\n console.error(\"Hi\u00e7bir sunucu ba\u015far\u0131l\u0131 olmad\u0131:\", error);\n });\n<\/pre>\nAsync\/Await: Promise'ler \u00dczerine \u015eeker Kaplama<\/h2>\n
async\/await<\/code> s\u00f6zdizimi, Promise'ler \u00fczerine in\u015fa edilmi\u015f, asenkron kodu senkron kod gibi yazmam\u0131z\u0131 sa\u011flayan sentaktik bir \u015fekerdir. Asenkron kodunuzu Bollywood filmlerinin ak\u0131c\u0131l\u0131\u011f\u0131nda yazmak gibidir.<\/p>\nAsync\/Await Nedir ve Neden Kullan\u0131l\u0131r?<\/h3>\n
async\/await<\/code>, Promise zincirlemeyi daha da basitle\u015ftirerek, asenkron kodun okunabilirli\u011fini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. \u00d6zellikle karma\u015f\u0131k asenkron ak\u0131\u015flarda, callback hell'den sonra Promise zincirlerinin getirdi\u011fi iyile\u015fme gibi, async\/await<\/code> de Promise zincirlerinin getirdi\u011fi .then()<\/code> y\u0131\u011f\u0131n\u0131n\u0131 azalt\u0131r ve kodu daha \"d\u00fcz\" hale getirir.<\/p>\nasync<\/code> Fonksiyonlar: Her Zaman Bir Promise D\u00f6nd\u00fcr\u00fcr<\/h3>\nasync<\/code> anahtar kelimesiyle i\u015faretledi\u011finizde, bu fonksiyon her zaman bir Promise d\u00f6nd\u00fcr\u00fcr. Fonksiyonun i\u00e7inde d\u00f6nd\u00fcr\u00fclen senkron bir de\u011fer, otomatik olarak \u00e7\u00f6z\u00fclm\u00fc\u015f bir Promise'e sar\u0131l\u0131r. E\u011fer fonksiyonda bir hata f\u0131rlat\u0131l\u0131rsa, Promise reddedilir.<\/p>\nasync function selamVer() {\n return \"Merhaba, async d\u00fcnya!\";\n}\n\nselamVer().then(mesaj => console.log(mesaj)); \/\/ Merhaba, async d\u00fcnya!\n\nasync function hataFirlat() {\n throw new Error(\"Async fonksiyonda hata!\");\n}\n\nhataFirlat().catch(hata => console.error(hata.message)); \/\/ Async fonksiyonda hata!\n<\/pre>\nawait<\/code> Operat\u00f6r\u00fc: Promise'in \u00c7\u00f6z\u00fclmesini Bekle<\/h3>\nawait<\/code> anahtar kelimesi, sadece async<\/code> fonksiyonlar\u0131n i\u00e7inde kullan\u0131labilir. Bir Promise'in \u00f6n\u00fcne await<\/code> koydu\u011funuzda, JavaScript bu Promise'in \u00e7\u00f6z\u00fclmesini bekler ve Promise \u00e7\u00f6z\u00fcld\u00fc\u011f\u00fcnde de\u011ferini d\u00f6nd\u00fcr\u00fcr. Bu s\u0131rada, ana i\u015f par\u00e7ac\u0131\u011f\u0131 bloke olmaz, ancak async<\/code> fonksiyonun y\u00fcr\u00fct\u00fclmesi duraklat\u0131l\u0131r.<\/p>\nfunction gecikmeliSelam(isim) {\n return new Promise(resolve => {\n setTimeout(() => resolve(Merhaba, ${isim}!<\/code>), 2000);\n });\n}\n\nasync function selamlaKullanici() {\n console.log(\"Selamlamaya ba\u015fl\u0131yorum...\");\n const mesaj = await gecikmeliSelam(\"Bollywood hayran\u0131\"); \/\/ 2 saniye bekler\n console.log(mesaj); \/\/ Merhaba, Bollywood hayran\u0131!\n console.log(\"Selamlama bitti.\");\n}\n\nselamlaKullanici();\n\/\/ \u00c7\u0131kt\u0131 s\u0131ras\u0131:\n\/\/ Selamlamaya ba\u015fl\u0131yorum...\n\/\/ (2 saniye sonra)\n\/\/ Merhaba, Bollywood hayran\u0131!\n\/\/ Selamlama bitti.\n<\/pre>\nTry\/Catch ile Hata Y\u00f6netimi<\/h3>\n
async\/await<\/code> ile hata y\u00f6netimi, senkron koddaki try\/catch<\/code> bloklar\u0131na benzer. await<\/code> ile bekledi\u011finiz bir Promise reddedilirse, bu bir hata f\u0131rlat\u0131r ve en yak\u0131n try\/catch<\/code> blo\u011fu taraf\u0131ndan yakalanabilir.<\/p>\nfunction hataYapanPromise() {\n return new Promise((resolve, reject) => {\n setTimeout(() => reject(new Error(\"Beklenmedik bir sorun olu\u015ftu!\")), 1500);\n });\n}\n\nasync function islemYap() {\n try {\n console.log(\"\u0130\u015flem ba\u015fl\u0131yor...\");\n const sonuc = await hataYapanPromise();\n console.log(\"Sonu\u00e7:\", sonuc); \/\/ Bu sat\u0131r \u00e7al\u0131\u015fmayacak\n } catch (hata) {\n console.error(\"Hata yakaland\u0131:\", hata.message); \/\/ Hata yakaland\u0131: Beklenmedik bir sorun olu\u015ftu!\n } finally {\n console.log(\"\u0130\u015flem tamamland\u0131 (hata olsun veya olmas\u0131n).\");\n }\n}\n\nislemYap();\n<\/pre>\nBollywood Sahnesinde Asenkron B\u00fcy\u00fc: Ger\u00e7ek D\u00fcnya Uygulamalar\u0131<\/h2>\n
Veri \u00c7ekme ve G\u00f6sterme Senaryolar\u0131<\/h3>\n
fetch<\/code> API'si zaten Promise tabanl\u0131d\u0131r.<\/p>\nasync function urunleriGetirVeGoster() {\n try {\n const response = await fetch('\/api\/urunler');\n if (!response.ok) {\n throw new Error(HTTP hatas\u0131! Durum: ${response.status}<\/code>);\n }\n const urunler = await response.json();\n \/\/ \u00dcr\u00fcnleri HTML'e ekleme veya ba\u015fka i\u015flemler\n console.log('\u00dcr\u00fcnler ba\u015far\u0131yla y\u00fcklendi:', urunler);\n } catch (error) {\n console.error('\u00dcr\u00fcnleri \u00e7ekerken bir hata olu\u015ftu:', error);\n }\n}\nurunleriGetirVeGoster();\n<\/pre>\nKullan\u0131c\u0131 Kimlik Do\u011frulama Ak\u0131\u015flar\u0131<\/h3>\n
async\/await<\/code> ile bu ak\u0131\u015flar \u00e7ok daha y\u00f6netilebilir hale gelir.<\/p>\nasync function girisYap(kullaniciAdi, sifre) {\n try {\n const response = await fetch('\/api\/login', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ kullaniciAdi, sifre })\n });\n const data = await response.json();\n if (data.token) {\n localStorage.setItem('authToken', data.token);\n console.log('Giri\u015f ba\u015far\u0131l\u0131, token kaydedildi.');\n \/\/ Kullan\u0131c\u0131y\u0131 y\u00f6nlendirme\n } else {\n throw new Error(data.mesaj || 'Giri\u015f ba\u015far\u0131s\u0131z.');\n }\n } catch (error) {\n console.error('Giri\u015f hatas\u0131:', error.message);\n }\n}\n\/\/ girisYap('kullanici123', 'sifre456');\n<\/pre>\n\u00c7oklu Resim Y\u00fckleme \u00d6rnekleri<\/h3>\n
Promise.all()<\/code> kullanarak t\u00fcm y\u00fcklemelerin tamamlanmas\u0131n\u0131 bekleyebilir ve ard\u0131ndan bir ba\u015far\u0131 mesaj\u0131 g\u00f6sterebiliriz.<\/p>\nasync function cokluResimYukle(resimDosyalari) {\n const yuklemePromiseListesi = resimDosyalari.map(dosya => {\n \/\/ Her dosya i\u00e7in ayr\u0131 bir Promise d\u00f6nd\u00fcren y\u00fckleme fonksiyonu\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(${dosya.name} y\u00fcklendi.<\/code>);\n resolve(${dosya.name} - Y\u00fcklendi<\/code>);\n }, Math.random() * 2000 + 500);\n });\n });\n\n try {\n const sonuclar = await Promise.all(yuklemePromiseListesi);\n console.log('T\u00fcm resimler ba\u015far\u0131yla y\u00fcklendi:', sonuclar);\n } catch (error) {\n console.error('Resim y\u00fckleme hatas\u0131:', error);\n }\n}\n\n\/\/ \u00d6rnek kullan\u0131m\n\/\/ cokluResimYukle([{name: 'foto1.jpg'}, {name: 'foto2.png'}, {name: 'belge.pdf'}]);\n<\/pre>\nAnimasyonlar ve Zamanlanm\u0131\u015f \u0130\u015flemler<\/h3>\n
function animasyonYap(element, sure) {\n return new Promise(resolve => {\n console.log(${element.id} animasyonu ba\u015flad\u0131.<\/code>);\n setTimeout(() => {\n element.style.transform = 'translateX(100px)'; \/\/ Basit bir animasyon\n console.log(${element.id} animasyonu bitti.<\/code>);\n resolve();\n }, sure);\n });\n}\n\nasync function tumAnimasyonlariCalistir() {\n const kutu1 = document.getElementById('kutu1');\n const kutu2 = document.getElementById('kutu2');\n\n if (kutu1 && kutu2) {\n await animasyonYap(kutu1, 1500);\n await animasyonYap(kutu2, 1000);\n console.log('T\u00fcm animasyonlar tamamland\u0131!');\n }\n}\n\n\/\/ HTML'de id=\"kutu1\" ve id=\"kutu2\" olan elementler oldu\u011funu varsayal\u0131m\n\/\/ tumAnimasyonlariCalistir();\n<\/pre>\nSonu\u00e7<\/h2>\n
async\/await<\/code>, asenkron programlaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azaltan, modern JavaScript'in temel ta\u015flar\u0131ndand\u0131r. Callback Hell'in karanl\u0131k g\u00fcnlerinden, Promise'lerin getirdi\u011fi zincirleme ve hata y\u00f6netimi kolayl\u0131\u011f\u0131na, oradan da async\/await<\/code>'in senkron kod yaz\u0131m rahatl\u0131\u011f\u0131na uzanan bu yolculuk, geli\u015ftiricilere g\u00fc\u00e7l\u00fc ve okunabilir \u00e7\u00f6z\u00fcmler sunar. T\u0131pk\u0131 bir Bollywood filminin t\u00fcm par\u00e7alar\u0131n\u0131n (m\u00fczik, dans, drama) bir araya gelerek kusursuz bir uyum i\u00e7inde bir \"Bollywood Co\u015fkusu\" yaratmas\u0131 gibi, Promises ve async\/await<\/code> de asenkron i\u015flemleri y\u00f6neterek kodunuzda bir \"Asenkron B\u00fcy\u00fc\" yarat\u0131r. Bu ara\u00e7lar\u0131 ustaca kullanarak, daha performansl\u0131, daha bak\u0131m\u0131 kolay ve daha keyifli web uygulamalar\u0131 geli\u015ftirebilirsiniz. Art\u0131k asenkron kod yazmak bir kabus de\u011fil, bir keyif!<\/p>\nSSS (S\u0131k Sorulan Sorular)<\/h2>\n
Promise nedir?<\/h3>\n
Callback Hell nedir? Promise bunu nas\u0131l \u00e7\u00f6zer?<\/h3>\n
.then()<\/code> metodu ile zincirleme yaparak bu i\u00e7 i\u00e7e ge\u00e7meyi \u00f6nler ve daha d\u00fcz bir kod ak\u0131\u015f\u0131 sa\u011flar.<\/p>\n.then()<\/code> ile .catch()<\/code> aras\u0131ndaki fark nedir?<\/h3>\n.then()<\/code>, bir Promise ba\u015far\u0131l\u0131 oldu\u011funda (fulfilled) \u00e7al\u0131\u015facak kodu i\u00e7erir ve iste\u011fe ba\u011fl\u0131 olarak ikinci bir arg\u00fcman olarak hata durumunu da i\u015fleyebilir. .catch()<\/code> ise, Promise reddedildi\u011finde (rejected) veya zincirdeki \u00f6nceki bir Promise'den bir hata f\u0131rlat\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r. Genellikle hata y\u00f6netimini .catch()<\/code> ile ayr\u0131 yapmak daha temiz bir yakla\u015f\u0131md\u0131r.<\/p>\nasync<\/code> ve await<\/code> ne i\u015fe yar<\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript motoru, genellikle bir anda sadece bir g\u00f6revi i\u015fler. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmamas\u0131 ve uygulaman\u0131n duyarl\u0131 kalmas\u0131 i\u00e7in \u00f6nemlidir.","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":[129],"tags":[],"class_list":{"0":"post-40812","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n