JavaScript uygulamalar\u0131n\u0131zda yava\u015flamalar m\u0131 ya\u015f\u0131yorsunuz? \u00d6zellikle veri i\u015fleme veya a\u011f istekleri gibi yo\u011fun operasyonlar s\u0131ras\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmas\u0131, k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimi sunar. Bu makalede, JavaScript’te asenkron d\u00f6ng\u00fclerin g\u00fcc\u00fcn\u00fc ke\u015ffederek uygulamalar\u0131n\u0131z\u0131 nas\u0131l daha performansl\u0131 ve duyarl\u0131 hale getirebilece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz.<\/p>\n
Modern web uygulamalar\u0131, sadece statik i\u00e7erik sunmaktan \u00e7ok daha fazlas\u0131n\u0131 yapar. Kullan\u0131c\u0131 etkile\u015fimleri, API \u00e7a\u011fr\u0131lar\u0131, veri i\u015fleme, dosya okuma\/yazma gibi bir\u00e7ok karma\u015f\u0131k i\u015flemi ayn\u0131 anda y\u00fcr\u00fctme ihtiyac\u0131 duyarlar. Ancak JavaScript, do\u011fas\u0131 gere\u011fi tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir. Bu, ayn\u0131 anda yaln\u0131zca bir g\u00f6revin y\u00fcr\u00fct\u00fclebilece\u011fi anlam\u0131na gelir. Peki, bu durumda uzun s\u00fcren bir i\u015flem ba\u015flad\u0131\u011f\u0131nda uygulaman\u0131z neden donmuyor veya kilitlenmiyor?<\/p>\n
\u0130\u015fte tam bu noktada asenkron programlama devreye girer. Senkron (synchronous) kod y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fcnde, bir i\u015flem bitmeden di\u011ferine ge\u00e7ilmez. \u00d6rne\u011fin, sunucudan b\u00fcy\u00fck bir veri k\u00fcmesini getiren bir kod blo\u011funuz varsa ve bu i\u015flem 5 saniye s\u00fcr\u00fcyorsa, bu 5 saniye boyunca kullan\u0131c\u0131 aray\u00fcz\u00fc tamamen donar ve kullan\u0131c\u0131 hi\u00e7bir i\u015flem yapamaz. Bu durum, \u00f6zellikle y\u00fcksek performans beklenen interaktif uygulamalar i\u00e7in kabul edilemez bir kullan\u0131c\u0131 deneyimi yarat\u0131r.<\/p>\n
Asenkron (asynchronous) yakla\u015f\u0131m ise, uzun s\u00fcreli i\u015flemlerin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmeden arka planda y\u00fcr\u00fct\u00fclmesine olanak tan\u0131r. JavaScript’in Event Loop mekanizmas\u0131 sayesinde, bu t\u00fcr i\u015flemler tamamland\u0131\u011f\u0131nda ana i\u015f par\u00e7ac\u0131\u011f\u0131na bir bildirim g\u00f6nderilir ve sonu\u00e7lar i\u015flenir. Bu sayede, uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fc s\u00fcrekli olarak duyarl\u0131 kal\u0131r. Kullan\u0131c\u0131, veri y\u00fcklenirken bile di\u011fer butonlara t\u0131klayabilir, sayfay\u0131 kayd\u0131rabilir veya farkl\u0131 i\u015flemler yapabilir. Bu, g\u00fcn\u00fcm\u00fcz\u00fcn h\u0131z odakl\u0131 d\u00fcnyas\u0131nda kullan\u0131c\u0131 memnuniyetini sa\u011flaman\u0131n anahtar\u0131d\u0131r.<\/p>\n
\u00d6zellikle d\u00f6ng\u00fclerle \u00e7al\u0131\u015f\u0131rken, birden fazla asenkron g\u00f6revin art arda veya paralel olarak y\u00fcr\u00fct\u00fclmesi gerekti\u011finde asenkron d\u00f6ng\u00fcler hayati \u00f6nem ta\u015f\u0131r. Geleneksel d\u00f6ng\u00fc yap\u0131lar\u0131 (\u00f6rne\u011fin Asenkron d\u00f6ng\u00fclerin derinliklerine inmeden \u00f6nce, JavaScript’teki asenkron programlaman\u0131n temel yap\u0131 ta\u015flar\u0131n\u0131 anlamak olduk\u00e7a \u00f6nemlidir. Bu temel kavramlar, karma\u015f\u0131k asenkron ak\u0131\u015flar\u0131 y\u00f6netmemize olanak tan\u0131r ve gelecekteki \u00f6rneklerimizi anlamland\u0131rmam\u0131z\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n Callback’ler, JavaScript’te asenkron programlaman\u0131n en eski ve temel y\u00f6ntemidir. Bir i\u015flem tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131lacak olan fonksiyonlard\u0131r. Genellikle bir fonksiyonu ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7irerek kullan\u0131l\u0131rlar. \u00d6rne\u011fin, bir veri y\u00fckleme i\u015flemi tamamland\u0131\u011f\u0131nda belirli bir eylemi tetiklemek i\u00e7in callback’ler kullan\u0131labilir.<\/p>\n Basit bir \u00f6rnekle a\u00e7\u0131klamak gerekirse:<\/p>\n <\/code><\/p>\n Yukar\u0131daki kodda, Promise'lar (S\u00f6zler), callback hell sorununa bir \u00e7\u00f6z\u00fcm olarak ortaya \u00e7\u0131km\u0131\u015ft\u0131r ve asenkron i\u015flemlerin daha temiz ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde y\u00f6netilmesini sa\u011flarlar. Bir Promise, asenkron bir i\u015flemin nihai ba\u015far\u0131 de\u011ferini veya ba\u015far\u0131s\u0131zl\u0131k nedenini temsil eden bir JavaScript nesnesidir. \u00dc\u00e7 ana durumu vard\u0131r:<\/p>\n Promise'lar, <\/code><\/p>\n Promise'lar, \u00f6zellikle birden fazla asenkron i\u015flemin s\u0131rayla veya paralel olarak y\u00fcr\u00fct\u00fclmesi gereken durumlarda olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr. Asenkron d\u00f6ng\u00fcler i\u00e7in zemin haz\u0131rlayan en \u00f6nemli kavramlardan biridir.<\/p>\n <\/code><\/p>\n Bu temel kavramlar, asenkron d\u00f6ng\u00fclerin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve uygulamalar\u0131n\u0131zda neden bu kadar g\u00fc\u00e7l\u00fc olduklar\u0131n\u0131 anlamak i\u00e7in sa\u011flam bir temel olu\u015fturmaktad\u0131r. \u015eimdi, geleneksel d\u00f6ng\u00fclerin asenkron i\u015flemlerle nas\u0131l etkile\u015fime girdi\u011fini ve neden yeterli olmad\u0131\u011f\u0131n\u0131 inceleyelim.<\/p>\n JavaScript geli\u015ftiricileri olarak genellikle diziler \u00fczerinde iterasyon yapmak i\u00e7in Geleneksel bir <\/code><\/p>\n Bu kodu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, \u00e7\u0131kt\u0131n\u0131n \"For d\u00f6ng\u00fcs\u00fc tamamland\u0131, asenkron i\u015flemler bekleniyor...\" mesaj\u0131n\u0131, d\u00f6ng\u00fc i\u00e7indeki \"For d\u00f6ng\u00fcs\u00fc i\u00e7inde asenkron i\u015flem tamamland\u0131...\" mesajlar\u0131ndan \u00f6nce g\u00f6receksiniz. Bunun nedeni, <\/code><\/p>\n Yine, \"forEach d\u00f6ng\u00fcs\u00fc tamamland\u0131...\" mesaj\u0131n\u0131, i\u00e7erideki i\u015flemler bitmeden \u00f6nce g\u00f6receksiniz. Bu davran\u0131\u015f, \u00f6zellikle birden fazla asenkron i\u015flemin belirli bir s\u0131raya g\u00f6re tamamlanmas\u0131 gerekti\u011finde veya t\u00fcm i\u015flemlerin bitmesini bekleyip daha sonra ortak bir sonu\u00e7la devam etmek istedi\u011finizde sorunlara yol a\u00e7ar. \u00d6rne\u011fin, bir API'den birden fazla kay\u0131t \u00e7ekmeniz ve t\u00fcm veriler geldikten sonra kullan\u0131c\u0131ya tek bir liste sunman\u0131z gerekebilir. Geleneksel d\u00f6ng\u00fclerle bu t\u00fcr bir senaryoyu do\u011fru bir \u015fekilde y\u00f6netmek zorlu olabilir, hatta hatal\u0131 sonu\u00e7lara yol a\u00e7abilir.<\/p>\n Bu s\u0131n\u0131rlamalar, asenkron d\u00f6ng\u00fclerin daha g\u00fc\u00e7l\u00fc ve kontrol edilebilir y\u00f6ntemlerine olan ihtiyac\u0131 ortaya koymaktad\u0131r. Gelecek b\u00f6l\u00fcmlerde, bu sorunlar\u0131 \u00e7\u00f6zmek ve asenkron i\u015flemleri d\u00f6ng\u00fclerle do\u011fru bir \u015fekilde entegre etmek i\u00e7in Yukar\u0131da bahsetti\u011fimiz geleneksel d\u00f6ng\u00fclerin asenkron i\u015flemlerle ya\u015fad\u0131\u011f\u0131 sorunlar\u0131 g\u00f6z \u00f6n\u00fcne ald\u0131\u011f\u0131m\u0131zda, JavaScript'te daha g\u00fcvenilir ve performansl\u0131 asenkron d\u00f6ng\u00fc tekniklerine ihtiyac\u0131m\u0131z oldu\u011fu a\u00e7\u0131kt\u0131r. Bu b\u00f6l\u00fcmde, bu ihtiyac\u0131 kar\u015f\u0131layan en yayg\u0131n ve etkili y\u00f6ntemleri, kullan\u0131m senaryolar\u0131 ve kod \u00f6rnekleriyle birlikte detayl\u0131ca inceleyece\u011fiz.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, her bir Baz\u0131 durumlarda, asenkron i\u015flemlerin birbirine ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 yoktur ve hepsinin ayn\u0131 anda ba\u015flat\u0131l\u0131p paralel olarak y\u00fcr\u00fct\u00fclmesi, toplam s\u00fcreyi \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir. \u0130\u015fte bu noktada <\/code><\/p>\n <\/code><\/p>\n Daha ileri bir kullan\u0131m senaryosu olarak, <\/code><\/p>\n Bu b\u00f6l\u00fcm, JavaScript'te asenkron d\u00f6ng\u00fcleri etkin bir \u015fekilde kullanmak i\u00e7in sahip oldu\u011fumuz temel ara\u00e7lar\u0131 ve teknikleri ortaya koydu. Hangi y\u00f6ntemi se\u00e7ece\u011finiz, i\u015flemlerin s\u0131ral\u0131 m\u0131 yoksa paralel mi olmas\u0131 gerekti\u011fine ve hata y\u00f6netimi gereksinimlerinize ba\u011fl\u0131 olacakt\u0131r. \u015eimdi, bu d\u00f6ng\u00fclerde hata y\u00f6netiminin ve performans optimizasyonunun \u00f6nemine de\u011finelim.<\/p>\n Asenkron programlama, uygulaman\u0131z\u0131n duyarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131rken, hata y\u00f6netimi ve performans optimizasyonu konular\u0131nda \u00f6zel dikkat gerektirir. Asenkron d\u00f6ng\u00fclerle \u00e7al\u0131\u015f\u0131rken ortaya \u00e7\u0131kabilecek sorunlar\u0131 \u00f6ng\u00f6rmek ve bunlar\u0131 etkili bir \u015fekilde \u00e7\u00f6zmek, sa\u011flam ve g\u00fcvenilir uygulamalar olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, her bir i\u015flem ayr\u0131 ayr\u0131 <\/code><\/p>\n Burada, e\u011fer Manuel olarak bir e\u015fzamanl\u0131l\u0131k limiti uygulamak i\u00e7in \u015f\u00f6yle bir yakla\u015f\u0131m izlenebilir:<\/p>\n <\/code><\/p>\n Bu \u00f6rnek, Bir di\u011fer performans ipucu ise, e\u011fer bir Promise'\u0131n sonucuna ihtiyac\u0131n\u0131z yoksa ve sadece i\u015flemin ba\u015flamas\u0131n\u0131 istiyorsan\u0131z, \u00d6zetle, asenkron d\u00f6ng\u00fclerde hata y\u00f6netimi ve optimizasyon, uygulaman\u0131z\u0131n dayan\u0131kl\u0131l\u0131\u011f\u0131n\u0131 ve performans\u0131n\u0131 do\u011frudan etkiler. Teorik bilgiyi peki\u015ftirmek ve asenkron d\u00f6ng\u00fclerin ger\u00e7ek projelerde nas\u0131l bir fark yaratabilece\u011fini g\u00f6stermek i\u00e7in birka\u00e7 pratik vaka analizi inceleyelim. Bu senaryolar, g\u00fcnl\u00fck geli\u015ftirme s\u00fcre\u00e7lerinizde kar\u015f\u0131la\u015fabilece\u011finiz yayg\u0131n problemlere odaklanacak.<\/p>\n Bir e-ticaret sitesinde, bir \u00fcr\u00fcn listeleme sayfas\u0131n\u0131n veya \u00fcr\u00fcn detay sayfas\u0131n\u0131n h\u0131zl\u0131 bir \u015fekilde y\u00fcklenmesi kritiktir. Genellikle bir \u00fcr\u00fcn\u00fcn birden fazla resim URL'si bulunur ve bu resimlerin her birinin ayr\u0131 ayr\u0131 y\u00fcklenmesi gerekir. E\u011fer bu y\u00fcklemeleri s\u0131ral\u0131 yaparsak, ilk resim y\u00fcklenmeden ikinciye ge\u00e7ilemeyece\u011fi i\u00e7in sayfa y\u00fckleme s\u00fcresi \u00e7ok uzayacakt\u0131r. \u0130\u015fte burada Senaryo:<\/strong> Bir \u00fcr\u00fcn\u00fcn 5 adet y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resim URL'si var. Bu resimleri sunucudan \u00e7ekip kullan\u0131c\u0131ya en k\u0131sa s\u00fcrede g\u00f6stermeliyiz.<\/p>\n <\/code><\/p>\n Bir i\u015f zekas\u0131 (BI) veya veri analizi arac\u0131nda, farkl\u0131 departmanlardan (sat\u0131\u015f, pazarlama, operasyonlar) gelen verileri toplaman\u0131z ve tek bir rapor halinde birle\u015ftirmeniz gerekebilir. Her bir departman\u0131n verisi ayr\u0131 bir API \u00e7a\u011fr\u0131s\u0131 ile geliyor ve bu \u00e7a\u011fr\u0131lar birbirinden ba\u011f\u0131ms\u0131z. Bu senaryo da Senaryo:<\/strong> \u00dc\u00e7 farkl\u0131 API'den (Sat\u0131\u015f, Pazarlama, Operasyon) veri \u00e7ekmeliyiz. Bir API ba\u015far\u0131s\u0131z olsa bile di\u011ferlerinin verilerini almak ve raporu m\u00fcmk\u00fcn oldu\u011funca tamamlamak istiyoruz.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, G\u00fcn\u00fcm\u00fczde mobil uyumluluk vazge\u00e7ilmez bir gerekliliktir. Asenkron i\u015flemler, mobil cihazlarda performans\u0131n korunmas\u0131nda kritik bir rol oynar. \u00d6zellikle, resimlerin veya verilerin asenkron olarak y\u00fcklenmesi, mobil a\u011f ko\u015fullar\u0131n\u0131n de\u011fi\u015fkenli\u011fini telafi edebilir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki basit CSS media query \u00f6rne\u011fi, mobil cihazlarda resim galerisinin nas\u0131l farkl\u0131 g\u00f6r\u00fcnebilece\u011fini g\u00f6sterir. Ancak \u00f6nemli olan, bu resimlerin asenkron olarak y\u00fcklenmesi sayesinde mobil kullan\u0131c\u0131lar\u0131n yava\u015f a\u011flarda bile uygulaman\u0131n donmas\u0131n\u0131 beklememesidir. Kullan\u0131c\u0131, resimler y\u00fcklenirken di\u011fer i\u00e7eri\u011fi g\u00f6rebilir, scroll yapabilir veya etkile\u015fimde bulunabilir. Bu t\u00fcr bir duyarl\u0131l\u0131k, modern mobil uygulamalar i\u00e7in olmazsa olmazd\u0131r.<\/p>\n Bu ger\u00e7ek d\u00fcnya senaryolar\u0131, asenkron d\u00f6ng\u00fclerin sadece teorik kavramlar olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131, hata y\u00f6netimini ve kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen pratik \u00e7\u00f6z\u00fcmler sundu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Do\u011fru asenkron d\u00f6ng\u00fc tekni\u011fini se\u00e7mek, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n Bu makalede, JavaScript'in tek i\u015f par\u00e7ac\u0131kl\u0131 do\u011fas\u0131ndan kaynaklanan kilitlenme sorunlar\u0131n\u0131 a\u015fmak i\u00e7in asenkron d\u00f6ng\u00fclerin ne kadar hayati oldu\u011funu detayl\u0131ca inceledik. Callback'lerden Promise'lara ve nihayet Temel olarak, daha verimli asenkron d\u00f6ng\u00fcler yazmak i\u00e7in a\u015fa\u011f\u0131daki prensipleri benimsemeliyiz:<\/p>\n Asenkron d\u00f6ng\u00fcler, modern JavaScript geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Bu teknikleri ustaca kullanarak, sadece daha h\u0131zl\u0131 ve duyarl\u0131 uygulamalar geli\u015ftirmekle kalmayacak, ayn\u0131 zamanda daha sa\u011flam ve \u00f6l\u00e7eklenebilir bir kod taban\u0131 olu\u015fturacaks\u0131n\u0131z. Unutmay\u0131n, iyi bir geli\u015ftirici, asenkron i\u015flemlerin do\u011fas\u0131n\u0131 anlayan ve bu g\u00fcc\u00fc uygulamalar\u0131n\u0131n lehine kullanan ki\u015fidir.<\/p>\nfor<\/code> veya forEach<\/code>), i\u00e7lerindeki asenkron operasyonlar\u0131n tamamlanmas\u0131n\u0131 beklemez. Bu da beklenmedik sonu\u00e7lara veya hatalara yol a\u00e7abilir. Bu makalede, bu t\u00fcr senaryolar\u0131n \u00f6n\u00fcne ge\u00e7mek i\u00e7in kullanabilece\u011fimiz \u00e7e\u015fitli asenkron d\u00f6ng\u00fc tekniklerini detayl\u0131ca inceleyece\u011fiz. Uygulamalar\u0131n\u0131z\u0131n h\u0131z\u0131n\u0131 ve duyarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rman\u0131n yan\u0131 s\u0131ra, daha temiz ve y\u00f6netilebilir asenkron kod yazman\u0131n yollar\u0131n\u0131 da ke\u015ffedeceksiniz. K\u0131sacas\u0131, JavaScript’in asenkron do\u011fas\u0131n\u0131 tam anlam\u0131yla kucaklamak, daha modern, kullan\u0131c\u0131 dostu ve performansl\u0131 uygulamalar geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r.<\/p>\nAsenkron Programlaman\u0131n Temel Ta\u015flar\u0131 Nelerdir?<\/h2>\n
Callback Fonksiyonlar\u0131: Asenkron \u0130\u015flemlerin \u0130lk Ad\u0131m\u0131<\/h3>\n
\nfunction verileriGetir(callback) {\n setTimeout(() => {\n const veriler = [\"\u00d6\u011fe 1\", \"\u00d6\u011fe 2\", \"\u00d6\u011fe 3\"];\n callback(veriler);\n }, 2000); \/\/ 2 saniye sonra verileri d\u00f6nd\u00fcr\n}\n\nverileriGetir(function(gelenVeriler) {\n console.log(\"Veriler ba\u015far\u0131yla al\u0131nd\u0131:\", gelenVeriler);\n});\nconsole.log(\"Veriler bekleniyor...\");\n<\/pre>\nverileriGetir<\/code> fonksiyonu asenkron bir i\u015flemi (sim\u00fcle edilmi\u015f bir a\u011f iste\u011fi) temsil eder. Bu i\u015flem tamamland\u0131\u011f\u0131nda, callback<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak gelen verileri iletir. Ancak, callback'lerin i\u00e7 i\u00e7e ge\u00e7mesi durumunda \"Callback Hell\" olarak bilinen okunmas\u0131 ve y\u00f6netilmesi zor bir kod yap\u0131s\u0131 ortaya \u00e7\u0131kabilir. Bu durum, daha modern asenkron yakla\u015f\u0131mlara olan ihtiyac\u0131 do\u011furmu\u015ftur.<\/p>\nPromise'lar: Callback Hell'den Kurtulu\u015f<\/h3>\n
\n
.then()<\/code>, .catch()<\/code> ve .finally()<\/code> metotlar\u0131 arac\u0131l\u0131\u011f\u0131yla zincirleme bir yap\u0131 sunar. Bu sayede, asenkron i\u015flemlerin s\u0131ras\u0131n\u0131 ve hata y\u00f6netimini \u00e7ok daha kolay bir \u015fekilde kontrol edebiliriz.<\/p>\n\nfunction verileriGetirPromise() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const basarili = true; \/\/ Ger\u00e7ek bir senaryoda bu, a\u011f iste\u011finin durumuna ba\u011fl\u0131 olurdu\n if (basarili) {\n const veriler = [\"Promise \u00d6\u011fe 1\", \"Promise \u00d6\u011fe 2\"];\n resolve(veriler); \/\/ \u0130\u015flem ba\u015far\u0131l\u0131\n } else {\n reject(\"Veri getirme ba\u015far\u0131s\u0131z oldu!\"); \/\/ \u0130\u015flem ba\u015far\u0131s\u0131z\n }\n }, 2000);\n });\n}\n\nverileriGetirPromise()\n .then(gelenVeriler => {\n console.log(\"Promise ile gelen veriler:\", gelenVeriler);\n })\n .catch(hata => {\n console.log(\"Promise hatas\u0131:\", hata);\n })\n .finally(() => {\n console.log(\"Promise i\u015flemi tamamland\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z).\");\n });\nconsole.log(\"Promise bekleniyor...\");\n<\/pre>\nAsync\/Await: Asenkron Kodu Senkron Gibi Yazma<\/h3>\n
async\/await<\/code>, Promise'lar \u00fczerine in\u015fa edilmi\u015f, asenkron kodu senkron koda benzer \u015fekilde yazmam\u0131z\u0131 sa\u011flayan modern bir sentaktik \u015fekerdir (syntactic sugar). Bu, kodun okunabilirli\u011fini ve yaz\u0131labilirli\u011fini muazzam derecede art\u0131r\u0131r. Bir fonksiyonun ba\u015f\u0131na async<\/code> anahtar kelimesini ekledi\u011finizde, o fonksiyon otomatik olarak bir Promise d\u00f6nd\u00fcr\u00fcr. \u0130\u00e7erisinde await<\/code> anahtar kelimesini kullanarak, bir Promise'\u0131n sonucunu bekleyebilir ve Promise tamamlanana kadar fonksiyonun y\u00fcr\u00fct\u00fclmesini duraklatabilirsiniz.<\/p>\n\nasync function verileriAsyncAwaitIleGetir() {\n console.log(\"Async\/Await ile veriler bekleniyor...\");\n try {\n const veriler = await new Promise((resolve) => {\n setTimeout(() => {\n resolve([\"Async\/Await \u00d6\u011fe 1\", \"Async\/Await \u00d6\u011fe 2\"]);\n }, 2000);\n });\n console.log(\"Async\/Await ile gelen veriler:\", veriler);\n } catch (hata) {\n console.error(\"Async\/Await hatas\u0131:\", hata);\n } finally {\n console.log(\"Async\/Await i\u015flemi tamamland\u0131.\");\n }\n}\n\nverileriAsyncAwaitIleGetir();\n<\/pre>\nasync\/await<\/code> sayesinde, asenkron i\u015flemleri y\u00f6netmek art\u0131k \u00e7ok daha sezgiseldir. \u00d6zellikle hata y\u00f6netimi (try...catch<\/code> bloklar\u0131 ile) senkron koda benzedi\u011fi i\u00e7in karma\u015f\u0131kl\u0131k azal\u0131r. Asenkron d\u00f6ng\u00fclerde de en s\u0131k ba\u015fvurulan y\u00f6ntemlerden biri olacakt\u0131r.<\/p>\nasync<\/code> fonksiyonlar her zaman bir Promise<\/code> d\u00f6nd\u00fcr\u00fcr. E\u011fer async<\/code> bir fonksiyon i\u00e7erisinde return<\/code> ile do\u011frudan bir de\u011fer d\u00f6nerseniz, bu de\u011fer otomatik olarak \u00e7\u00f6z\u00fcmlenmi\u015f (resolved) bir Promise<\/code> i\u00e7ine sarmalan\u0131r. Bu, fonksiyonun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011feri await<\/code> ile bekleyebilece\u011finiz anlam\u0131na gelir.\n<\/div>\nGeleneksel D\u00f6ng\u00fcler Asenkron \u0130\u015flemlerle Nas\u0131l \u00c7al\u0131\u015f\u0131r? (
for<\/code>, forEach<\/code>)<\/h2>\nfor<\/code> d\u00f6ng\u00fclerini veya forEach<\/code> gibi dizi metotlar\u0131n\u0131 kullan\u0131r\u0131z. Ancak, bu geleneksel d\u00f6ng\u00fc yap\u0131lar\u0131, i\u00e7lerinde asenkron i\u015flemler bar\u0131nd\u0131rd\u0131\u011f\u0131nda bekledi\u011fimiz gibi davranmayabilir. Bu b\u00f6l\u00fcm, bu davran\u0131\u015f\u0131n nedenlerini ve ortaya \u00e7\u0131kabilecek potansiyel sorunlar\u0131 detayland\u0131racakt\u0131r.<\/p>\nfor<\/code> d\u00f6ng\u00fcs\u00fcn\u00fc ele alal\u0131m. JavaScript motoru, bu d\u00f6ng\u00fcy\u00fc senkron bir \u015fekilde y\u00fcr\u00fct\u00fcr. D\u00f6ng\u00fcn\u00fcn her iterasyonunda, i\u00e7erideki kod blo\u011fu tamamlanmadan bir sonraki iterasyona ge\u00e7ilmez. Ancak, d\u00f6ng\u00fcn\u00fcn i\u00e7inde bir setTimeout<\/code> veya fetch<\/code> gibi asenkron bir i\u015flem varsa, for<\/code> d\u00f6ng\u00fcs\u00fc bu i\u015flemin tamamlanmas\u0131n\u0131 beklemez<\/strong>. Bunun yerine, asenkron i\u015flemi ba\u015flat\u0131r ve hemen bir sonraki iterasyona veya d\u00f6ng\u00fcden sonraki koda ge\u00e7er.<\/p>\n\nconsole.log(\"--- for d\u00f6ng\u00fcs\u00fc ile asenkron i\u015flem (Yanl\u0131\u015f Kullan\u0131m) ---\");\nfor (let i = 0; i < 3; i++) {\n setTimeout(() => {\n console.log(For d\u00f6ng\u00fcs\u00fc i\u00e7inde asenkron i\u015flem tamamland\u0131: ${i}<\/code>);\n }, 100 * (3 - i)); \/\/ Farkl\u0131 gecikmelerle sim\u00fclasyon\n}\nconsole.log(\"For d\u00f6ng\u00fcs\u00fc tamamland\u0131, asenkron i\u015flemler bekleniyor...\");\n<\/pre>\nsetTimeout<\/code>'un ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmemesi ve hemen bir sonraki d\u00f6ng\u00fc iterasyonuna ge\u00e7ilmesidir.<\/p>\nforEach<\/code> Metodu ve Asenkron Yan\u0131lg\u0131s\u0131<\/h3>\nArray.prototype.forEach<\/code> metodu, diziler \u00fczerinde iterasyon yapmak i\u00e7in pop\u00fcler bir y\u00f6ntemdir. Ancak, forEach<\/code> bir callback fonksiyonu bekler ve bu callback'in i\u00e7inde async<\/code> anahtar kelimesi kullansan\u0131z bile, forEach<\/code> metodu kendisi bir Promise d\u00f6nd\u00fcrmez veya i\u00e7indeki asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 beklemez. Yani, forEach<\/code> metodunu kullanan bir d\u00f6ng\u00fcde asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 beklemek m\u00fcmk\u00fcn de\u011fildir.<\/p>\n\nconsole.log(\"\\n--- forEach ile asenkron i\u015flem (Yanl\u0131\u015f Kullan\u0131m) ---\");\nconst sayilar = [1, 2, 3];\n\nsayilar.forEach(async (sayi) => {\n await new Promise(resolve => setTimeout(resolve, 100 * sayi));\n console.log(forEach i\u00e7inde asenkron i\u015flem tamamland\u0131: ${sayi}<\/code>);\n});\n\nconsole.log(\"forEach d\u00f6ng\u00fcs\u00fc tamamland\u0131, asenkron i\u015flemler bekleniyor...\");\n<\/pre>\nasync<\/code> anahtar kelimesi, forEach<\/code> callback'inin kendi i\u00e7inde await<\/code> kullanmas\u0131na izin verir, ancak bu, forEach<\/code> metodunun kendisinin asenkron bekleme davran\u0131\u015f\u0131 sergileyece\u011fi anlam\u0131na gelmez. Callback'in d\u00f6nd\u00fcrd\u00fc\u011f\u00fc Promise'lar forEach<\/code> taraf\u0131ndan yok say\u0131l\u0131r; yani, forEach<\/code> o Promise'lar\u0131 yakalamaz veya onlar\u0131n durumunu izlemez.<\/p>\nforEach<\/code> metodu, callback fonksiyonunuzdan d\u00f6nen Promise'lar\u0131 otomatik olarak beklemez veya i\u015flemez. Bu nedenle, s\u0131ral\u0131 veya paralel asenkron i\u015flemleri y\u00f6netmek i\u00e7in genellikle for...of<\/code> d\u00f6ng\u00fcs\u00fc veya Promise.all<\/code> gibi farkl\u0131 yakla\u015f\u0131mlar tercih edilmelidir.\n<\/div>\nNeden Bu Davran\u0131\u015f \u00d6nemli?<\/h3>\n
for...of<\/code>, Promise.all<\/code> ve di\u011fer modern yakla\u015f\u0131mlar\u0131 nas\u0131l kullanabilece\u011fimizi inceleyece\u011fiz.<\/p>\nAsenkron D\u00f6ng\u00fcler Nas\u0131l Etkili Bir \u015eekilde Uygulan\u0131r? (
Promise.all<\/code>, for...of<\/code>)<\/h2>\nfor...of<\/code> D\u00f6ng\u00fcs\u00fc ile await<\/code> Kullan\u0131m\u0131: S\u0131ral\u0131 Asenkron \u0130\u015flemler<\/h3>\nfor...of<\/code> d\u00f6ng\u00fcs\u00fc, ES2015 ile birlikte tan\u0131t\u0131lm\u0131\u015f modern bir d\u00f6ng\u00fc yap\u0131s\u0131d\u0131r ve diziler, Set'ler, Map'ler gibi iterable objeler \u00fczerinde iterasyon yapman\u0131z\u0131 sa\u011flar. En \u00f6nemlisi, bir async<\/code> fonksiyon i\u00e7inde kullan\u0131ld\u0131\u011f\u0131nda, for...of<\/code> d\u00f6ng\u00fcs\u00fc i\u00e7erisinde await<\/code> anahtar kelimesini kullanarak her bir asenkron i\u015flemin tamamlanmas\u0131n\u0131 bekleyebilirsiniz. Bu, asenkron i\u015flemlerin s\u0131ral\u0131 bir \u015fekilde y\u00fcr\u00fct\u00fclmesi gereken durumlar i\u00e7in idealdir.<\/p>\n\nconsole.log(\"--- for...of ile s\u0131ral\u0131 asenkron i\u015flemler ---\");\n\nasync function asenkronIslem(id) {\n const gecikme = Math.floor(Math.random() * 500) + 100; \/\/ 100-600ms aras\u0131 rastgele gecikme\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(\u0130\u015flem ${id} tamamland\u0131 (${gecikme}ms).<\/code>);\n resolve(Sonu\u00e7-${id}<\/code>);\n }, gecikme);\n });\n}\n\nasync function siraliIslemleriCalistir() {\n const islemIDs = [1, 2, 3, 4];\n const sonuclar = [];\n\n for (const id of islemIDs) {\n console.log(\u0130\u015flem ${id} ba\u015flat\u0131l\u0131yor...<\/code>);\n const sonuc = await asenkronIslem(id); \/\/ Her i\u015flemin bitmesini bekliyoruz\n sonuclar.push(sonuc);\n }\n\n console.log(\"T\u00fcm s\u0131ral\u0131 i\u015flemler tamamland\u0131. Sonu\u00e7lar:\", sonuclar);\n}\n\nsiraliIslemleriCalistir();\n<\/pre>\nasenkronIslem<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131n tamamlanmas\u0131 beklenir ve ancak ondan sonra bir sonraki iterasyona ge\u00e7ilir. Bu sayede, i\u015flemlerin belirli bir s\u0131raya g\u00f6re y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fcnden emin olabiliriz. Bu yakla\u015f\u0131m, \u00f6zellikle bir \u00f6nceki i\u015flemin sonucunun sonraki i\u015flem i\u00e7in girdi olarak kullan\u0131lmas\u0131 gerekti\u011fi durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nPromise.all<\/code> ile Paralel Asenkron \u0130\u015flemler: Performans Art\u0131\u015f\u0131<\/h3>\nPromise.all<\/code> devreye girer. Promise.all<\/code>, bir dizi Promise'\u0131 arg\u00fcman olarak al\u0131r ve bu Promise'lar\u0131n hepsi ba\u015far\u0131l\u0131 bir \u015fekilde tamamland\u0131\u011f\u0131nda \u00e7\u00f6z\u00fcmlenen yeni bir Promise d\u00f6nd\u00fcr\u00fcr. E\u011fer dizi i\u00e7indeki Promise'lardan herhangi biri reddedilirse, Promise.all<\/code> Promise'\u0131 da reddedilir.<\/p>\n\nconsole.log(\"\\n--- Promise.all ile paralel asenkron i\u015flemler ---\");\n\nasync function paralelAsenkronIslem(id) {\n const gecikme = Math.floor(Math.random() * 1000) + 500; \/\/ 500-1500ms aras\u0131 gecikme\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(Paralel \u0130\u015flem ${id} tamamland\u0131 (${gecikme}ms).<\/code>);\n resolve(Paralel-Sonu\u00e7-${id}<\/code>);\n }, gecikme);\n });\n}\n\nasync function paralelIslemleriCalistir() {\n const islemIDs = [10, 11, 12, 13];\n const promiseListesi = islemIDs.map(id => paralelAsenkronIslem(id)); \/\/ T\u00fcm Promise'lar\u0131 olu\u015ftur\n\n console.log(\"T\u00fcm paralel i\u015flemler ba\u015flat\u0131ld\u0131...\");\n try {\n const sonuclar = await Promise.all(promiseListesi); \/\/ T\u00fcm Promise'lar\u0131n bitmesini bekle\n console.log(\"T\u00fcm paralel i\u015flemler tamamland\u0131. Sonu\u00e7lar:\", sonuclar);\n } catch (hata) {\n console.error(\"Paralel i\u015flemlerde hata olu\u015ftu:\", hata);\n }\n}\n\nparalelIslemleriCalistir();\n<\/pre>\nPromise.all<\/code> kullan\u0131m\u0131yla, t\u00fcm asenkron i\u015flemler neredeyse e\u015f zamanl\u0131 olarak ba\u015flar ve en uzun s\u00fcren i\u015flemin biti\u015fiyle toplam bekleme s\u00fcresi belirlenir. Bu, \u00f6zellikle \u00e7ok say\u0131da ba\u011f\u0131ms\u0131z API \u00e7a\u011fr\u0131s\u0131 yapman\u0131z veya dosya y\u00fcklemeniz gereken durumlarda performans\u0131 radikal bir \u015fekilde art\u0131rabilir. Ancak, unutulmamal\u0131d\u0131r ki, Promise.all<\/code> i\u00e7indeki tek bir Promise reddedilirse, t\u00fcm Promise.all<\/code> i\u015flemi reddedilir ve di\u011fer ba\u015far\u0131l\u0131 Promise'lar\u0131n sonu\u00e7lar\u0131 g\u00f6z ard\u0131 edilir.<\/p>\nPromise.allSettled<\/code> ile Hata Y\u00f6netimli Paralel \u00c7al\u0131\u015fma<\/h3>\nPromise.all<\/code>'\u0131n bir dezavantaj\u0131, i\u00e7indeki bir Promise reddedildi\u011finde t\u00fcm i\u015flemin ba\u015far\u0131s\u0131z olmas\u0131 ve di\u011fer Promise'lar\u0131n sonu\u00e7lar\u0131n\u0131n al\u0131namamas\u0131d\u0131r. Promise.allSettled<\/code> bu sorunu \u00e7\u00f6zmek i\u00e7in geli\u015ftirilmi\u015ftir. Promise.allSettled<\/code>, verilen t\u00fcm Promise'lar\u0131n her birinin tamamlanmas\u0131n\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z) bekler ve her bir Promise'\u0131n durumunu (status: 'fulfilled'<\/code> veya 'rejected'<\/code>) ve de\u011ferini veya hata nedenini i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr. Bu, t\u00fcm i\u015flemlerin sonu\u00e7lar\u0131n\u0131, hatal\u0131 olanlar\u0131 bile almak istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\nconsole.log(\"\\n--- Promise.allSettled ile hata y\u00f6netimli paralel i\u015flemler ---\");\n\nasync function hataIhtimaliOlanIslem(id) {\n const gecikme = Math.floor(Math.random() * 500) + 100;\n const basarili = Math.random() > 0.5; \/\/ %50 ba\u015far\u0131 oran\u0131\n\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (basarili) {\n console.log(Hata \u0130htimali Olan \u0130\u015flem ${id} ba\u015far\u0131yla tamamland\u0131.<\/code>);\n resolve(Ba\u015far\u0131l\u0131 Sonu\u00e7-${id}<\/code>);\n } else {\n console.error(Hata \u0130htimali Olan \u0130\u015flem ${id} reddedildi.<\/code>);\n reject(Hata-${id}<\/code>);\n }\n }, gecikme);\n });\n}\n\nasync function hataYonetimliParalelIslemleriCalistir() {\n const islemIDs = [20, 21, 22, 23];\n const promiseListesi = islemIDs.map(id => hataIhtimaliOlanIslem(id));\n\n console.log(\"Hata ihtimali olan paralel i\u015flemler ba\u015flat\u0131ld\u0131...\");\n const sonuclar = await Promise.allSettled(promiseListesi); \/\/ T\u00fcm promise'lar\u0131n sonu\u00e7lar\u0131n\u0131 bekle\n\n console.log(\"T\u00fcm hata ihtimali olan paralel i\u015flemler tamamland\u0131. Detayl\u0131 Sonu\u00e7lar:\");\n sonuclar.forEach(sonuc => {\n if (sonuc.status === 'fulfilled') {\n console.log(Ba\u015far\u0131l\u0131: ${sonuc.value}<\/code>);\n } else {\n console.error(Ba\u015far\u0131s\u0131z: ${sonuc.reason}<\/code>);\n }\n });\n}\n\nhataYonetimliParalelIslemleriCalistir();\n<\/pre>\nPromise.allSettled<\/code>, \u00f6zellikle veri senkronizasyonu veya toplu i\u015flemelerde, baz\u0131 i\u015flemlerin ba\u015far\u0131s\u0131z olabilece\u011fi ancak di\u011ferlerinin sonu\u00e7lar\u0131n\u0131n hala \u00f6nemli oldu\u011fu durumlarda vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\nfor...await...of<\/code> (Async Iterators ve Generators)<\/h3>\nfor...await...of<\/code> d\u00f6ng\u00fcs\u00fc, asenkron iterat\u00f6rler veya asenkron generator'lar ile \u00e7al\u0131\u015fmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu, bir veri ak\u0131\u015f\u0131n\u0131 (stream) okurken veya sayfa sayfa (pagination) veri \u00e7ekerken her bir par\u00e7an\u0131n asenkron olarak gelmesini beklemek istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Bu konu biraz daha ileri d\u00fczey oldu\u011fu i\u00e7in sadece bahsedelim ve gelecekteki derinlemesine incelemelere b\u0131rakal\u0131m. Temel olarak, bir veri kayna\u011f\u0131n\u0131n her bir par\u00e7as\u0131n\u0131 asenkron olarak d\u00f6nd\u00fcren bir iterat\u00f6r olu\u015fturdu\u011funuzda bu d\u00f6ng\u00fcy\u00fc kullan\u0131rs\u0131n\u0131z.<\/p>\n\nasync function* asenkronVeriKaynagi() {\n for (let i = 0; i < 3; i++) {\n await new Promise(resolve => setTimeout(resolve, 500)); \/\/ Sim\u00fcle edilmi\u015f veri \u00e7ekme\n yield Veri Par\u00e7as\u0131 ${i + 1}<\/code>;\n }\n}\n\nasync function asenkronVeriIsle() {\n console.log(\"\\n--- for...await...of ile asenkron veri ak\u0131\u015f\u0131 ---\");\n for await (const veri of asenkronVeriKaynagi()) {\n console.log(Al\u0131nan veri: ${veri}<\/code>);\n }\n console.log(\"T\u00fcm asenkron veri ak\u0131\u015f\u0131 tamamland\u0131.\");\n}\n\nasenkronVeriIsle();\n<\/pre>\nAsenkron D\u00f6ng\u00fclerde Hata Y\u00f6netimi ve Optimizasyon \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n
try...catch<\/code> Bloklar\u0131yla Kapsaml\u0131 Hata Y\u00f6netimi<\/h3>\nasync\/await<\/code> yap\u0131s\u0131n\u0131 kulland\u0131\u011f\u0131m\u0131zda, hata y\u00f6netimi senkron koda olduk\u00e7a benzer hale gelir. try...catch<\/code> bloklar\u0131, asenkron i\u015flemlerin reddedilmesi (reject olmas\u0131) durumunda ortaya \u00e7\u0131kan hatalar\u0131 yakalamak i\u00e7in kullan\u0131l\u0131r. Bu, uygulaman\u0131z\u0131n beklenmedik durumlarda \u00e7\u00f6kmesini engeller ve kullan\u0131c\u0131lara anlaml\u0131 geri bildirimler sunman\u0131za olanak tan\u0131r.<\/p>\n\nasync function hatal\u0131AsenkronIslem(id) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (id % 2 === 0) { \/\/ \u00c7ift ID'lerde hata verelim\n reject(\u0130\u015flem ${id} ba\u015far\u0131s\u0131z oldu: Hata kodu 500.<\/code>);\n } else {\n resolve(\u0130\u015flem ${id} ba\u015far\u0131yla tamamland\u0131.<\/code>);\n }\n }, 500);\n });\n}\n\nasync function hataYonetimliSiraliIslemler() {\n const islemIDs = [1, 2, 3, 4, 5];\n console.log(\"\\n--- Hata Y\u00f6netimli S\u0131ral\u0131 \u0130\u015flemler ---\");\n for (const id of islemIDs) {\n try {\n const sonuc = await hatal\u0131AsenkronIslem(id);\n console.log(sonuc);\n } catch (hata) {\n console.error(Hata yakaland\u0131: ${hata}<\/code>);\n }\n }\n console.log(\"T\u00fcm s\u0131ral\u0131 i\u015flemler hata y\u00f6netimi ile tamamland\u0131.\");\n}\n\nhataYonetimliSiraliIslemler();\n<\/pre>\ntry...catch<\/code> blo\u011fu i\u00e7inde ele al\u0131nd\u0131\u011f\u0131ndan, bir i\u015flem ba\u015far\u0131s\u0131z olsa bile d\u00f6ng\u00fc di\u011fer i\u015flemlerle devam eder. Bu, \u00f6zellikle ba\u011f\u0131ms\u0131z i\u015flemlerin bulundu\u011fu senaryolarda \u00f6nemlidir.<\/p>\nPromise.all<\/code> ile \u00e7al\u0131\u015f\u0131rken ise hata y\u00f6netimi biraz farkl\u0131d\u0131r. Promise.all<\/code> i\u00e7indeki bir Promise reddedilirse, Promise.all<\/code> Promise'\u0131 da reddedilir ve ilk reddedilen Promise'\u0131n hatas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. Bu durumda, t\u00fcm Promise.all<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 bir try...catch<\/code> blo\u011fu ile sarmalaman\u0131z gerekir:<\/p>\n\nasync function hataYonetimliParalelIslemlerPromiseAll() {\n const islemIDs = [6, 7, 8, 9];\n const promiseListesi = islemIDs.map(id => hatal\u0131AsenkronIslem(id));\n\n console.log(\"\\n--- Hata Y\u00f6netimli Paralel \u0130\u015flemler (Promise.all) ---\");\n try {\n const sonuclar = await Promise.all(promiseListesi);\n console.log(\"T\u00fcm paralel i\u015flemler ba\u015far\u0131yla tamamland\u0131:\", sonuclar);\n } catch (hata) {\n console.error(\"Promise.all ile yakalanan hata:\", hata);\n }\n console.log(\"Promise.all paralel i\u015flemleri hata y\u00f6netimi ile tamamland\u0131.\");\n}\n\nhataYonetimliParalelIslemlerPromiseAll();\n<\/pre>\nhatal\u0131AsenkronIslem(8)<\/code> reddedilirse, Promise.all<\/code> da reddedilecek ve catch<\/code> blo\u011fu devreye girecektir. Ancak, bu durumda hatal\u0131AsenkronIslem(6)<\/code> veya (7)<\/code> gibi ba\u015far\u0131l\u0131 olan i\u015flemlerin sonu\u00e7lar\u0131na eri\u015femezsiniz. \u0130\u015fte bu y\u00fczden Promise.allSettled<\/code> devreye girer; t\u00fcm sonu\u00e7lar\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z) ayr\u0131 ayr\u0131 alman\u0131z\u0131 sa\u011flar.<\/p>\nConcurrency Limitleri ve Performans Optimizasyonu<\/h3>\n
Promise.all<\/code> ile paralel i\u015flemler y\u00fcr\u00fctmek performans\u0131 art\u0131rsa da, bazen ayn\u0131 anda \u00e7ok fazla asenkron i\u015flem ba\u015flatmak kaynaklar\u0131 t\u00fcketebilir veya hedef sunucuya a\u015f\u0131r\u0131 y\u00fck bindirebilir (\u00f6rne\u011fin, \u00e7ok say\u0131da API iste\u011fi). Bu t\u00fcr durumlarda, e\u015fzamanl\u0131 (concurrency) \u00e7al\u0131\u015fan i\u015flem say\u0131s\u0131n\u0131 s\u0131n\u0131rlamak isteyebilirsiniz. Bunun i\u00e7in \u00f6zel bir Promise havuzu veya k\u00fct\u00fcphaneler kullanmak yayg\u0131n bir yakla\u015f\u0131md\u0131r.<\/p>\n\nasync function limitliAsenkronIslem(id) {\n const gecikme = Math.floor(Math.random() * 1000) + 500;\n console.log([${new Date().toLocaleTimeString()}] \u0130\u015flem ${id} ba\u015flat\u0131ld\u0131.<\/code>);\n return new Promise(resolve => {\n setTimeout(() => {\n console.log([${new Date().toLocaleTimeString()}] \u0130\u015flem ${id} tamamland\u0131.<\/code>);\n resolve(Limitli Sonu\u00e7-${id}<\/code>);\n }, gecikme);\n });\n}\n\nasync function limitliParalelIslemleriCalistir(islemIDs, limit) {\n const results = [];\n const runningPromises = [];\n\n console.log(\\n--- Limitli Paralel \u0130\u015flemler (Limit: ${limit}) ---<\/code>);\n\n for (const id of islemIDs) {\n const promise = limitliAsenkronIslem(id);\n runningPromises.push(promise);\n\n if (runningPromises.length >= limit) {\n \/\/ Limit a\u015f\u0131ld\u0131\u011f\u0131nda, en eski Promise'\u0131n bitmesini bekle\n const completedPromise = await Promise.race(runningPromises);\n const index = runningPromises.indexOf(completedPromise);\n if (index > -1) {\n runningPromises.splice(index, 1); \/\/ Biten Promise'\u0131 havuzdan \u00e7\u0131kar\n }\n results.push(await completedPromise); \/\/ Tamamlanan promise'\u0131n sonucunu al\n }\n }\n\n \/\/ Kalan t\u00fcm Promise'lar\u0131n bitmesini bekle\n results.push(...await Promise.all(runningPromises));\n console.log(\"T\u00fcm limitli paralel i\u015flemler tamamland\u0131. Sonu\u00e7lar:\", results);\n}\n\nconst tumIslemler = Array.from({ length: 10 }, (_, i) => i + 1); \/\/ 10 i\u015flem\nlimitliParalelIslemleriCalistir(tumIslemler, 3); \/\/ Ayn\u0131 anda maksimum 3 i\u015flem \u00e7al\u0131\u015fs\u0131n\n<\/pre>\nPromise.race<\/code> kullanarak bir \"havuz\" mant\u0131\u011f\u0131 olu\u015fturur. Havuzdaki i\u015flem say\u0131s\u0131 belirlenen limiti a\u015ft\u0131\u011f\u0131nda, en \u00f6nce biten Promise'\u0131 bekler ve yer a\u00e7\u0131ld\u0131ktan sonra yeni bir Promise ekler. Bu sayede, ayn\u0131 anda \u00e7al\u0131\u015fan i\u015flem say\u0131s\u0131 kontrol alt\u0131nda tutulur ve sunucuya veya taray\u0131c\u0131ya a\u015f\u0131r\u0131 y\u00fck bindirilmez.<\/p>\nawait<\/code> kullanmaktan ka\u00e7\u0131nmakt\u0131r. Ancak bu durumda hata y\u00f6netimi ve i\u015flem s\u0131ras\u0131n\u0131 manuel olarak takip etmeniz gerekebilir. Genellikle, asenkron d\u00f6ng\u00fclerde await<\/code> kullanmak, kodun okunabilirli\u011fi ve g\u00fcvenilirli\u011fi a\u00e7\u0131s\u0131ndan tercih edilen yoldur.<\/p>\ntry...catch<\/code>, Promise.allSettled<\/code> ve e\u015fzamanl\u0131l\u0131k limitleri gibi teknikleri kullanarak, hem hata durumlar\u0131n\u0131 etkili bir \u015fekilde ele alabilir hem de kaynak kullan\u0131m\u0131n\u0131 optimize edebilirsiniz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: Asenkron D\u00f6ng\u00fclerin Pratik Uygulamalar\u0131<\/h2>\n
Vaka Analizi 1: E-ticaret Sitesinde \u00dcr\u00fcn Resimlerini Paralel Olarak Y\u00fckleme ve \u0130\u015fleme<\/h3>\n
Promise.all<\/code> ile paralel y\u00fckleme devreye girer.<\/p>\n\n\/\/ Sim\u00fcle edilmi\u015f resim y\u00fckleme fonksiyonu\nasync function resimYukle(url) {\n console.log(Resim y\u00fckleniyor: ${url}<\/code>);\n const gecikme = Math.floor(Math.random() * 1500) + 500; \/\/ 0.5 - 2 saniye\n return new Promise(resolve => {\n setTimeout(() => {\n console.log(Resim y\u00fcklendi: ${url}<\/code>);\n resolve(Y\u00fcklenen resim verisi: ${url}<\/code>);\n }, gecikme);\n });\n}\n\nasync function urunResimleriniYukle(resimURLleri) {\n console.log(\"\\n--- \u00dcr\u00fcn Resimleri Y\u00fckleniyor (Paralel) ---\");\n try {\n const yuklemePromiseListesi = resimURLleri.map(url => resimYukle(url));\n const yuklenenResimler = await Promise.all(yuklemePromiseListesi);\n console.log(\"T\u00fcm resimler ba\u015far\u0131yla y\u00fcklendi:\", yuklenenResimler);\n \/\/ Y\u00fcklenen resimleri DOM'a ekleme veya ba\u015fka i\u015flemler\n } catch (hata) {\n console.error(\"Resim y\u00fcklenirken hata olu\u015ftu:\", hata);\n \/\/ Kullan\u0131c\u0131ya hata mesaj\u0131 g\u00f6sterme\n }\n}\n\nconst urunResimleri = [\n \"https:\/\/example.com\/urun\/resim1.jpg\",\n \"https:\/\/example.com\/urun\/resim2.jpg\",\n \"https:\/\/example.com\/urun\/resim3.jpg\",\n \"https:\/\/example.com\/urun\/resim4.jpg\",\n \"https:\/\/example.com\/urun\/resim5.jpg\",\n];\n\nurunResimleriniYukle(urunResimleri);\n<\/pre>\nPromise.all<\/code> kullanarak t\u00fcm resim y\u00fckleme i\u015flemlerini ayn\u0131 anda ba\u015flat\u0131yoruz. Bu sayede, en uzun s\u00fcren resmin y\u00fcklenmesi kadar bir zamanda t\u00fcm resimler y\u00fcklenecektir. Bu, sayfa y\u00fckleme performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r ve kullan\u0131c\u0131lar\u0131n bekleme s\u00fcresini azalt\u0131r.<\/p>\nVaka Analizi 2: Bir Veri Analizi Arac\u0131nda Birden Fazla Kaynaktan Veri \u00c7ekme ve Birle\u015ftirme<\/h3>\n
Promise.allSettled<\/code> i\u00e7in m\u00fckemmel bir kullan\u0131m alan\u0131d\u0131r.<\/p>\n\n\/\/ Sim\u00fcle edilmi\u015f API \u00e7a\u011fr\u0131lar\u0131\nasync function verileriGetirAPI(kaynakAdi, basariliOlsun = true) {\n console.log(Veriler ${kaynakAdi} kayna\u011f\u0131ndan \u00e7ekiliyor...<\/code>);\n const gecikme = Math.floor(Math.random() * 1000) + 300; \/\/ 0.3 - 1.3 saniye\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (basariliOlsun) {\n console.log(${kaynakAdi} verileri ba\u015far\u0131yla geldi.<\/code>);\n resolve({ kaynak: kaynakAdi, veri: [${kaynakAdi}-Veri-1<\/code>, ${kaynakAdi}-Veri-2<\/code>] });\n } else {\n console.error(${kaynakAdi} verileri \u00e7ekilirken hata olu\u015ftu.<\/code>);\n reject(new Error(API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z: ${kaynakAdi}<\/code>));\n }\n }, gecikme);\n });\n}\n\nasync function tumVerileriBirle\u015ftir() {\n console.log(\"\\n--- Farkl\u0131 Kaynaklardan Veri \u00c7ekiliyor ve Birle\u015ftiriliyor ---\");\n\n const promiseListesi = [\n verileriGetirAPI(\"Sat\u0131\u015f\"),\n verileriGetirAPI(\"Pazarlama\", false), \/\/ Pazarlama API'si ba\u015far\u0131s\u0131z olsun\n verileriGetirAPI(\"Operasyon\"),\n verileriGetirAPI(\"M\u00fc\u015fteri Hizmetleri\"),\n ];\n\n const tumSonuclar = await Promise.allSettled(promiseListesi);\n\n const basariliVeriler = [];\n const hataMesajlari = [];\n\n tumSonuclar.forEach(sonuc => {\n if (sonuc.status === 'fulfilled') {\n basariliVeriler.push(sonuc.value);\n } else {\n hataMesajlari.push(${sonuc.reason.message}<\/code>);\n }\n });\n\n console.log(\"\\n--- Rapor Sonucu ---\");\n console.log(\"Ba\u015far\u0131yla Al\u0131nan Veriler:\");\n basariliVeriler.forEach(veri => console.log(- ${veri.kaynak}:<\/code>, veri.veri));\n\n if (hataMesajlari.length > 0) {\n console.warn(\"Hata Olu\u015fan Kaynaklar:\");\n hataMesajlari.forEach(hata => console.warn(- ${hata}<\/code>));\n }\n\n \/\/ Raporu kullan\u0131c\u0131ya sunma veya daha fazla i\u015fleme\n}\n\ntumVerileriBirle\u015ftir();\n<\/pre>\nPazarlama<\/code> API'si kas\u0131tl\u0131 olarak ba\u015far\u0131s\u0131z olmas\u0131na ra\u011fmen, Sat\u0131\u015f<\/code>, Operasyon<\/code> ve M\u00fc\u015fteri Hizmetleri<\/code> verileri ba\u015far\u0131yla al\u0131n\u0131r ve i\u015flenir. Promise.allSettled<\/code> sayesinde, t\u00fcm API \u00e7a\u011fr\u0131lar\u0131n\u0131n tamamlanmas\u0131n\u0131 bekleriz ve her birinin sonucunu (ba\u015far\u0131 veya hata) ayr\u0131 ayr\u0131 de\u011ferlendirerek raporu eksik de olsa sunabiliriz. Bu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan, bir hatadan dolay\u0131 t\u00fcm raporun g\u00f6sterilememesinden \u00e7ok daha iyidir.<\/p>\nMobil Uyumlu Tasar\u0131m ve Asenkron \u0130\u015flemlerin Entegrasyonu<\/h3>\n
\n\/* Mobil cihazlar i\u00e7in \u00f6zel stil ayarlar\u0131 *\/\n@media (max-width: 768px) {\n .urun-resim-galerisi img {\n max-width: 100%;\n height: auto;\n display: block; \/* Mobil cihazlarda resimleri alt alta s\u0131rala *\/\n margin-bottom: 10px;\n }\n}\n<\/pre>\nSonu\u00e7: JavaScript'te Daha Verimli Asenkron D\u00f6ng\u00fcler \u0130\u00e7in Ne Yapmal\u0131y\u0131z?<\/h2>\n
async\/await<\/code> sentaks\u0131na kadar asenkron programlaman\u0131n evrimini ve bu evrimin asenkron d\u00f6ng\u00fcler \u00fczerindeki etkilerini g\u00f6rd\u00fck. Geleneksel d\u00f6ng\u00fclerin asenkron i\u015flemlerle nas\u0131l yetersiz kald\u0131\u011f\u0131n\u0131 ve bu a\u00e7\u0131\u011f\u0131 kapatmak i\u00e7in for...of<\/code> ile s\u0131ral\u0131 beklemeyi, Promise.all<\/code> ile paralel \u00e7al\u0131\u015fmay\u0131 ve Promise.allSettled<\/code> ile daha robust hata y\u00f6netimini nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frendik.<\/p>\n\n
for...of<\/code> ve await<\/code> kullan\u0131n. \u0130\u015flemlerin paralel y\u00fcr\u00fct\u00fclmesi ve t\u00fcm\u00fcn\u00fcn ba\u015far\u0131l\u0131 olmas\u0131n\u0131 beklemek gerekiyorsa Promise.all<\/code>'\u0131 tercih edin. E\u011fer t\u00fcm i\u015flemlerin tamamlanmas\u0131n\u0131, ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z fark etmeksizin sonu\u00e7lar\u0131n\u0131 almak istiyorsan\u0131z Promise.allSettled<\/code> en iyi se\u00e7enektir.<\/li>\ntry...catch<\/code> bloklar\u0131, Promise.catch<\/code> veya Promise.allSettled<\/code>'\u0131n sundu\u011fu durum raporlamas\u0131 ile hatalar\u0131 mutlaka ele al\u0131n. Uygulaman\u0131z\u0131n beklenmedik durumlarda \u00e7\u00f6kmesini \u00f6nlemek ve kullan\u0131c\u0131lara anlaml\u0131 geri bildirimler sunmak i\u00e7in bu kritik \u00f6neme sahiptir.<\/li>\nPromise.race<\/code> gibi y\u00f6ntemlerle kendi limit havuzlar\u0131n\u0131z\u0131 olu\u015fturabilir veya uygun k\u00fct\u00fcphanelerden faydalanabilirsiniz. Bu, sunucuya veya taray\u0131c\u0131ya a\u015f\u0131r\u0131 y\u00fck bindirmeyi engeller.<\/li>\nasync\/await<\/code> sentaks\u0131n\u0131n sa\u011flad\u0131\u011f\u0131 okunabilirlik avantaj\u0131ndan tam olarak yararlan\u0131n. Asenkron kodu senkron koda benzer \u015fekilde yazmak, kod taban\u0131n\u0131z\u0131n bak\u0131m\u0131n\u0131 ve anla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131racakt\u0131r.<\/li>\n<\/ol>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
1.
forEach<\/code> ile async\/await<\/code> kullanmak neden beklenen gibi \u00e7al\u0131\u015fm\u0131yor?<\/h3>\nforEach<\/code> metodu, callback fonksiyonunuzdan d\u00f6nen Promise'lar\u0131 kendisi beklemez veya i\u015flemez. async<\/code> keyword'\u00fc forEach<\/code> callback'inin i\u00e7inde await<\/code> kullanman\u0131za izin verse de, forEach<\/code> metodu bu Promise'lar\u0131n tamamlanmas\u0131n\u0131 denetlemez. Bu nedenle, forEach<\/code> bir Promise d\u00f6nd\u00fcrmedi\u011fi i\u00e7in d\u0131\u015far\u0131dan await<\/code> ile bekleyemezsiniz. Asenkron i\u015flemlerin tamamlanmas\u0131n\u0131 beklemek istiyorsan\u0131z, for...of<\/code> d\u00f6ng\u00fcs\u00fc veya Promise.all<\/code> gibi y\u00f6ntemler kullanmal\u0131s\u0131n\u0131z.<\/p>\n<\/p><\/div>\n