Modern web ve mobil uygulamalar\u0131n kalbinde yatan asenkron JavaScript kavram\u0131, Swiggy veya Zomato gibi pop\u00fcler yemek sipari\u015fi platformlar\u0131n\u0131n sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan temel mekanizmalardan biridir. Bir yeme\u011fi sipari\u015f ederken uygulaman\u0131n donup kalmamas\u0131n\u0131, arka planda farkl\u0131 i\u015flemler y\u00fcr\u00fct\u00fcl\u00fcrken bile kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn ak\u0131c\u0131 kalmas\u0131n\u0131 sa\u011flayan bu b\u00fcy\u00fcl\u00fc d\u00fcnyay\u0131 ke\u015ffetmeye haz\u0131r m\u0131s\u0131n\u0131z?<\/p>\n
Hayat\u0131m\u0131zdaki bir\u00e7ok sistem gibi, yaz\u0131l\u0131m d\u00fcnyas\u0131nda da i\u015flemlerin nas\u0131l y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fcn\u00fc a\u00e7\u0131klayan iki temel d\u00fczen vard\u0131r: Senkron (e\u015f zamanl\u0131) ve Asenkron (e\u015f zamans\u0131z). Bu kavramlar\u0131 anlamak i\u00e7in gelin, kendimizi yo\u011fun bir restorandaki yemek sipari\u015fi s\u00fcrecine b\u0131rakal\u0131m.<\/p>\n
Senkron Restoran Deneyimi: Her \u015eey S\u0131rayla<\/strong><\/p>\n Senkron bir restoranda, bir m\u00fc\u015fteri sipari\u015f verdi\u011finde mutfaktaki a\u015f\u00e7\u0131 o yeme\u011fi tamamen bitirmeden ba\u015fka hi\u00e7bir i\u015fe ba\u015flamaz. Diyelim ki peynirli tost ve ard\u0131ndan \u00e7orba sipari\u015f ettiniz. A\u015f\u00e7\u0131 \u00f6nce tostu haz\u0131rlayacak, pi\u015firecek ve servis edilebilir hale getirecek. Bu s\u00fcre\u00e7te mutfakta ba\u015fka hi\u00e7bir aktivite ger\u00e7ekle\u015femez. Tost masan\u0131za gelmeden \u00e7orban\u0131n yap\u0131m\u0131na ba\u015flanmaz. Bu, bir yandan bak\u0131ld\u0131\u011f\u0131nda basit ve d\u00fczenli g\u00f6r\u00fcnebilir; ancak restoran\u0131n kapasitesini ciddi \u015fekilde s\u0131n\u0131rlar ve bekleme s\u00fcrelerini uzat\u0131r. M\u00fc\u015fteri olarak siz de ilk sipari\u015finiz tamamlanana kadar di\u011fer i\u015flerinizi yapamaz, sadece beklemek zorunda kal\u0131rs\u0131n\u0131z.<\/p>\n JavaScript d\u00fcnyas\u0131nda da durum benzerdir. JavaScript, varsay\u0131lan olarak “tek i\u015f par\u00e7ac\u0131kl\u0131” (single-threaded) bir dildir. Bu, bir anda sadece tek bir g\u00f6revi y\u00fcr\u00fctebilece\u011fi anlam\u0131na gelir. E\u011fer senkron bir i\u015flem uzun s\u00fcrerse (\u00f6rne\u011fin, b\u00fcy\u00fck bir dosyay\u0131 indirmek veya karma\u015f\u0131k bir hesaplama yapmak), bu i\u015flem bitene kadar di\u011fer t\u00fcm g\u00f6revler (kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcncellemek, t\u0131klamalara yan\u0131t vermek vb.) bloke olur. Yani, uygulaman\u0131z donar ve kullan\u0131c\u0131n\u0131n etkile\u015fimi yan\u0131t vermez. \u0130\u015fte bu “donma” durumu, Swiggy gibi uygulamalarda asla istemeyece\u011fimiz bir durumdur.<\/p>\n Asenkron Restoran Deneyimi: Ak\u0131ll\u0131 \u0130\u015f B\u00f6l\u00fcm\u00fc ve Paralel Y\u00f6netim<\/strong><\/p>\n \u015eimdi de asenkron bir restorana ge\u00e7elim. Swiggy veya Zomato’nun mutfaklar\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Siz peynirli tost ve \u00e7orba sipari\u015f etti\u011finizde, mutfaktaki a\u015f\u00e7\u0131 tostu f\u0131r\u0131na verir ve pi\u015fmesini beklerken hemen \u00e7orbay\u0131 haz\u0131rlamaya ba\u015flar. Hatta belki de ba\u015fka bir masan\u0131n salatas\u0131n\u0131 yapmaya bile koyulur. A\u015f\u00e7\u0131, “toast pi\u015fti\u011finde beni uyar” veya “\u00e7orba kaynad\u0131\u011f\u0131nda haber ver” gibi talimatlar verir ve bu g\u00f6revler arka planda y\u00fcr\u00fct\u00fcl\u00fcrken di\u011fer i\u015flere odaklan\u0131r. Bir yemek haz\u0131r oldu\u011funda, garson onu hemen masan\u0131za getirir. Bu s\u0131rada siz di\u011fer yeme\u011finizi beklerken telefonunuza bakabilir, arkada\u015flar\u0131n\u0131zla sohbet edebilir veya uygulaman\u0131n ba\u015fka yerlerini gezebilirsiniz. Restoran hi\u00e7bir zaman “durup” tek bir i\u015fi bitirmeyi beklemez.<\/p>\n Asenkron JavaScript de tam olarak b\u00f6yle \u00e7al\u0131\u015f\u0131r. Uzun s\u00fcren i\u015flemleri (\u00f6rne\u011fin, Swiggy’den restoran listesini \u00e7ekmek, bir kullan\u0131c\u0131n\u0131n konumunu belirlemek veya \u00f6deme i\u015flemini yapmak gibi a\u011f istekleri) ba\u015flat\u0131r ve bunlar\u0131 “arka plana” iter. Bu s\u0131rada ana i\u015f par\u00e7ac\u0131\u011f\u0131 serbest kal\u0131r ve kullan\u0131c\u0131 aray\u00fcz\u00fc etkile\u015fimlerine yan\u0131t vermeye devam edebilir. Uzun s\u00fcren i\u015flem tamamland\u0131\u011f\u0131nda, JavaScript’in “Olay D\u00f6ng\u00fcs\u00fc” (Event Loop) bu i\u015flemi tespit eder ve ana i\u015f par\u00e7ac\u0131\u011f\u0131 bo\u015fta oldu\u011funda sonucunu i\u015fler. B\u00f6ylece uygulaman\u0131z hi\u00e7bir zaman donmaz, kullan\u0131c\u0131 her zaman ak\u0131c\u0131 bir deneyim ya\u015far.<\/p>\n Bu temel fark, modern web uygulamalar\u0131n\u0131n neden bu kadar h\u0131zl\u0131 ve tepkisel oldu\u011funu anlamak i\u00e7in kritik \u00f6neme sahiptir. Senkron blokajlardan ka\u00e7\u0131nmak, kullan\u0131c\u0131 deneyiminin anahtar\u0131d\u0131r. Dolay\u0131s\u0131yla, Swiggy’de bir yemek sipari\u015fi verdi\u011finizde aray\u00fcz\u00fcn ak\u0131c\u0131 kalmas\u0131n\u0131n arkas\u0131ndaki s\u0131r, JavaScript’in asenkron yetenekleridir.<\/p>\n Asenkron programlaman\u0131n ilk ve en temel mekanizmalar\u0131ndan biri callback (geri arama) fonksiyonlar\u0131d\u0131r. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bir callback fonksiyonu, belirli bir olay\u0131n ger\u00e7ekle\u015fmesi veya bir i\u015flemin tamamlanmas\u0131 durumunda \u00e7a\u011fr\u0131lmas\u0131 gereken bir fonksiyondur. Yemek sipari\u015fi analogisine geri d\u00f6nelim.<\/p>\n Garsonun Not Defteri ve Geri Arama Sistemi<\/strong><\/p>\n Bir restoranda garsona sipari\u015f verirken, yeme\u011finiz haz\u0131r oldu\u011funda size haber verilmesini istersiniz. Garson, “Yemek haz\u0131r oldu\u011funda masan\u0131za getirece\u011fim” veya “Bu numaray\u0131 arayarak size haber verece\u011fim” der. \u0130\u015fte bu “haberdar etme” eylemi, callback fonksiyonunun \u00e7al\u0131\u015fma prensibine benzer. Siz yeme\u011finizi beklerken kendi i\u015flerinize devam edersiniz (telefonunuza bakmak, arkada\u015flar\u0131n\u0131zla sohbet etmek gibi). Yemek haz\u0131rland\u0131\u011f\u0131nda, mutfak garsona haber verir ve garson da size yeme\u011fi getirir. Bu durumda, garsonun size yeme\u011fi getirme eylemi, bir callback fonksiyonunun \u00e7a\u011fr\u0131lmas\u0131 gibidir.<\/p>\n JavaScript’te callback fonksiyonlar\u0131, \u00f6zellikle eski kod tabanlar\u0131nda veya basit asenkron i\u015flemler i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r. \u00d6rne\u011fin, bir API iste\u011fi g\u00f6nderdi\u011finizde, iste\u011fin cevab\u0131 geldi\u011finde \u00e7al\u0131\u015facak bir fonksiyonu callback olarak tan\u0131mlars\u0131n\u0131z. En bilinen \u00f6rneklerden biri <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Callback Cehennemi (Callback Hell): Labirentteki Kay\u0131p Sipari\u015fler<\/strong><\/p>\n Callback'ler basit senaryolar i\u00e7in harika olsa da, karma\u015f\u0131k veya birbirine ba\u011f\u0131ml\u0131 asenkron i\u015flemleri y\u00f6netmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda \"callback cehennemi\" (callback hell) denen bir durumla kar\u015f\u0131la\u015f\u0131r\u0131z. Bu, i\u00e7 i\u00e7e ge\u00e7mi\u015f callback fonksiyonlar\u0131n\u0131n olu\u015fturdu\u011fu piramit benzeri, okunmas\u0131 ve bak\u0131m\u0131 zor bir kod yap\u0131s\u0131d\u0131r.<\/p>\n \u015e\u00f6yle d\u00fc\u015f\u00fcn\u00fcn: Swiggy'den bir sipari\u015f verirken \u00f6nce restoran\u0131 se\u00e7meniz, sonra men\u00fcy\u00fc y\u00fcklemeniz, ard\u0131ndan yeme\u011fi sepete eklemeniz, sonra \u00f6deme y\u00f6ntemini se\u00e7meniz ve son olarak sipari\u015fi onaylaman\u0131z gerekir. Her ad\u0131m bir \u00f6ncekinin sonucuna ba\u011fl\u0131d\u0131r ve her bir ad\u0131m asenkron bir i\u015flem olabilir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki kod blo\u011fu, birden fazla i\u00e7 i\u00e7e callback'in nas\u0131l bir \"piramit\" veya \"merdiven\" yap\u0131s\u0131 olu\u015fturdu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu yap\u0131, hem okunakl\u0131l\u0131\u011f\u0131 d\u00fc\u015f\u00fcr\u00fcr hem de hata y\u00f6netimini (her ad\u0131mda Callback cehenneminin getirdi\u011fi zorluklar, JavaScript toplulu\u011funu daha iyi bir \u00e7\u00f6z\u00fcm aramaya itti ve b\u00f6ylece Promise'ler (Vaatler) ortaya \u00e7\u0131kt\u0131. Promise'ler, gelecekte tamamlanacak veya ba\u015far\u0131s\u0131z olacak bir i\u015flemin nihai sonucunu temsil eden nesnelerdir. Onlar\u0131, bir yemek sipari\u015fi verdi\u011finizde size verilen bir \"taahh\u00fct\" veya \"sipari\u015f fi\u015fi\" gibi d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n Sipari\u015f Fi\u015finiz: Promise'in \u00dc\u00e7 Hali<\/strong><\/p>\n Swiggy veya Zomato'dan bir sipari\u015f verdi\u011finizde, uygulama size hemen yeme\u011finizin masan\u0131za gelmesini sa\u011flamaz. Bunun yerine, bir \"sipari\u015f fi\u015fi\" verir (uygulamadaki sipari\u015f durumunuz gibi). Bu fi\u015fin \u00fc\u00e7 olas\u0131 durumu vard\u0131r:<\/p>\n Promise'ler sayesinde, bir asenkron i\u015flemin sonucunu hemen beklemek yerine, o i\u015flemin gelecekteki durumuna dair bir \"s\u00f6z\" alm\u0131\u015f olursunuz. Bu s\u00f6z\u00fcn yerine getirilmesini veya reddedilmesini takip edebilir, buna g\u00f6re hareket edebilirsiniz.<\/p>\n Promise'ler Nas\u0131l Kullan\u0131l\u0131r? Zincirleme ve Hata Y\u00f6netimi<\/strong><\/p>\n Promise'ler, Callback cehennemi \u00f6rne\u011fini Promise'ler ile yeniden yazal\u0131m:<\/p>\n <\/code><\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Promise'lerle kod daha yatay ve okunabilir hale geldi. Her Promise'ler, callback cehennemine \u00f6nemli bir \u00e7\u00f6z\u00fcm getirmi\u015f olsa da, \u00f6zellikle uzun Promise zincirlerinde yine de okunabilirlik ve kodun ak\u0131\u015f\u0131 konusunda baz\u0131 zorluklar ya\u015fanabilirdi. \u0130\u015fte bu noktada JavaScript'e ECMAScript 2017 (ES8) ile eklenen Mutfakta \"Bekleyen\" A\u015f\u00e7\u0131, \u00c7al\u0131\u015fan Restoran<\/strong><\/p>\n Async\/Await'i anlamak i\u00e7in yine restoran analogisine d\u00f6nelim. A\u015f\u00e7\u0131 yeme\u011fi haz\u0131rlarken bazen belirli bir malzemenin haz\u0131r olmas\u0131n\u0131 beklemek zorundad\u0131r (\u00f6rne\u011fin, f\u0131r\u0131ndaki kekin pi\u015fmesini beklemek gibi). Bu \"bekleme\" ( <\/code><\/p>\n Yukar\u0131daki kodu inceledi\u011fimizde, asenkron i\u015flemlerin sanki senkron bir \u015fekilde, ad\u0131m ad\u0131m yaz\u0131lm\u0131\u015f gibi g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc fark edeceksiniz. Hata y\u00f6netimi K\u0131sacas\u0131, Swiggy, Zomato ve benzeri mobil odakl\u0131 platformlar\u0131n ba\u015far\u0131s\u0131n\u0131n anahtarlar\u0131ndan biri, kullan\u0131c\u0131ya sunduklar\u0131 kesintisiz ve h\u0131zl\u0131 deneyimdir. Asenkron JavaScript, bu ak\u0131c\u0131 deneyimin temelini olu\u015fturur. Peki, asenkronluk tam olarak nas\u0131l bir \"performans canavar\u0131\"na d\u00f6n\u00fc\u015f\u00fcyor ve mobil uygulamalardaki tak\u0131lmalar\u0131 nas\u0131l \u00f6nl\u00fcyor?<\/p>\n API \u00c7a\u011fr\u0131lar\u0131 ve Aray\u00fcz Ak\u0131c\u0131l\u0131\u011f\u0131<\/strong><\/p>\n Bir yemek sipari\u015fi uygulamas\u0131nda, arka u\u00e7 sunucular\u0131ndan s\u00fcrekli olarak veri \u00e7ekilir: restoran listeleri, men\u00fcler, kullan\u0131c\u0131 yorumlar\u0131, teslimat b\u00f6lgeleri, promosyonlar ve daha fazlas\u0131. Bu veri \u00e7ekme i\u015flemleri (API \u00e7a\u011fr\u0131lar\u0131), a\u011f gecikmelerine tabidir ve genellikle birka\u00e7 y\u00fcz milisaniye hatta saniyeler s\u00fcrebilir. E\u011fer bu \u00e7a\u011fr\u0131lar senkron olsayd\u0131, her API iste\u011fi g\u00f6nderildi\u011finde uygulama tamamen donar, kullan\u0131c\u0131 ekranda hi\u00e7bir \u015fey yapamazd\u0131. Bu durum, mobil kullan\u0131c\u0131lar i\u00e7in kabul edilemez bir deneyim olurdu.<\/p>\n Asenkron JavaScript sayesinde, uygulaman\u0131z bir restoran listesi i\u00e7in API \u00e7a\u011fr\u0131s\u0131 yapt\u0131\u011f\u0131nda, bu i\u015flem arka plana at\u0131l\u0131r ve ana i\u015f par\u00e7ac\u0131\u011f\u0131 serbest kal\u0131r. Bu, kullan\u0131c\u0131n\u0131n bu s\u00fcre\u00e7te men\u00fcler aras\u0131nda gezinebilece\u011fi, filtreleri ayarlayabilece\u011fi veya konumunu g\u00fcncelleyebilece\u011fi anlam\u0131na gelir. API'den veri geldi\u011finde, asenkron mekanizmalar sayesinde uygulama verileri i\u015fler ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcnceller, t\u00fcm bunlar kullan\u0131c\u0131n\u0131n hissedece\u011fi bir tak\u0131lma olmadan ger\u00e7ekle\u015fir.<\/p>\n G\u00f6rsel Y\u00fcklemeler ve Kullan\u0131c\u0131 Deneyimi<\/strong><\/p>\n Swiggy ve Zomato, g\u00f6rselli\u011fe dayal\u0131 uygulamalard\u0131r. Restoran foto\u011fraflar\u0131, yemek g\u00f6rselleri, banner'lar gibi y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir\u00e7ok resim y\u00fcklenir. Bu resimlerin indirilmesi ve belle\u011fe y\u00fcklenmesi de zaman al\u0131c\u0131 asenkron bir i\u015flemdir. Asenkron y\u00fckleme sayesinde, resimler birer birer veya topluca arka planda indirilirken, kullan\u0131c\u0131n\u0131n ekranda di\u011fer i\u00e7erikleri g\u00f6rmesi veya uygulaman\u0131n geri kalan\u0131yla etkile\u015fim kurmas\u0131 engellenmez. Y\u00fcklenen resimler haz\u0131r olduk\u00e7a ekranda belirir, bu da kullan\u0131c\u0131n\u0131n uygulaman\u0131n \"canl\u0131\" ve tepkisel oldu\u011fu hissini g\u00fc\u00e7lendirir.<\/p>\n Mobil Uyumlu Tasar\u0131m ve Performans<\/strong><\/p>\n Mobil cihazlar, farkl\u0131 ekran boyutlar\u0131na ve a\u011f ko\u015fullar\u0131na sahiptir. Asenkron JS, bu farkl\u0131l\u0131klar\u0131 y\u00f6netmeye yard\u0131mc\u0131 olur. \u00d6rne\u011fin, d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip bir kullan\u0131c\u0131 i\u00e7in resimlerin daha d\u00fc\u015f\u00fck kalitede y\u00fcklenmesi veya verilerin daha k\u00fc\u00e7\u00fck paketler halinde al\u0131nmas\u0131 gibi stratejiler asenkron i\u015flemlerle entegre edilebilir. Ayr\u0131ca, aray\u00fcz\u00fcn mobil cihazlarda d\u00fczg\u00fcn g\u00f6r\u00fcnmesi i\u00e7in HTML ve CSS'in duyarl\u0131 olmas\u0131 gerekir. Asenkron i\u015flemler aray\u00fcz\u00fcn ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 sa\u011flarken, duyarl\u0131 tasar\u0131m da g\u00f6r\u00fcn\u00fcm\u00fcn do\u011fru olmas\u0131n\u0131 garantiler.<\/p>\nCallback Fonksiyonlar\u0131: Garsonlar Nas\u0131l Haber Veriyor?<\/h2>\n
setTimeout<\/code> fonksiyonudur:<\/p>\n\n\/\/ Yemek haz\u0131rlama sim\u00fclasyonu\nfunction yemekHazirla(yemekAdi, callback) {\n console.log(${yemekAdi} haz\u0131rlan\u0131yor...<\/code>);\n setTimeout(() => {\n console.log(${yemekAdi} haz\u0131r!<\/code>);\n callback(yemekAdi); \/\/ Yemek haz\u0131r oldu\u011funda callback'i \u00e7a\u011f\u0131r\n }, Math.random() * 3000 + 1000); \/\/ 1 ila 4 saniye aras\u0131 rastgele s\u00fcre\n}\n\n\/\/ Sipari\u015fleri verelim\nyemekHazirla(\"\u00c7orba\", (hazirYemek) => {\n console.log(M\u00fc\u015fteriye \"${hazirYemek}\" servis edildi.<\/code>);\n});\n\nyemekHazirla(\"Salata\", (hazirYemek) => {\n console.log(M\u00fc\u015fteriye \"${hazirYemek}\" servis edildi.<\/code>);\n});\n\nconsole.log(\"Di\u011fer m\u00fc\u015fterilere bakmaya devam ediyorum...\");\n<\/pre>\nyemekHazirla<\/code> fonksiyonu asenkron bir i\u015flemi (yeme\u011fi haz\u0131rlama) sim\u00fcle eder. Bu i\u015flem tamamland\u0131\u011f\u0131nda, fonksiyona parametre olarak verilen callback<\/code> fonksiyonu \u00e7a\u011fr\u0131l\u0131r. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, yemekHazirla<\/code> \u00e7a\u011fr\u0131ld\u0131ktan hemen sonra \"Di\u011fer m\u00fc\u015fterilere bakmaya devam ediyorum...\" mesaj\u0131 yazd\u0131r\u0131l\u0131r. Bu, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n bloke olmad\u0131\u011f\u0131n\u0131, di\u011fer i\u015flere devam etti\u011fini g\u00f6sterir.<\/p>\n\nfunction restoranSec(callback) {\n console.log(\"Restoranlar y\u00fckleniyor...\");\n setTimeout(() => {\n const restoran = \"Burgerc\u00fc Baba\";\n console.log(${restoran} se\u00e7ildi.<\/code>);\n callback(null, restoran); \/\/ Hata yok, restoran bilgisi\n }, 1000);\n}\n\nfunction menuyuGetir(restoran, callback) {\n console.log(${restoran} men\u00fcs\u00fc y\u00fckleniyor...<\/code>);\n setTimeout(() => {\n const menu = [\"Hamburger\", \"Patates\", \"Kola\"];\n console.log(\"Men\u00fc y\u00fcklendi.\");\n callback(null, menu);\n }, 1500);\n}\n\nfunction sepeteEkle(menu, urun, callback) {\n console.log(${urun} sepete ekleniyor...<\/code>);\n setTimeout(() => {\n if (menu.includes(urun)) {\n console.log(${urun} sepete eklendi.<\/code>);\n callback(null, { urun, miktar: 1 });\n } else {\n callback(\"\u00dcr\u00fcn men\u00fcde yok!\", null);\n }\n }, 800);\n}\n\nfunction siparisiOnayla(sepet, callback) {\n console.log(\"Sipari\u015f onaylan\u0131yor...\");\n setTimeout(() => {\n const siparisID = Math.floor(Math.random() * 10000);\n console.log(Sipari\u015finiz ${siparisID} ile onayland\u0131!<\/code>);\n callback(null, siparisID);\n }, 2000);\n}\n\n\/\/ Callback Cehennemi \u00f6rne\u011fi:\nrestoranSec((err, restoran) => {\n if (err) return console.error(err);\n menuyuGetir(restoran, (err, menu) => {\n if (err) return console.error(err);\n sepeteEkle(menu, \"Hamburger\", (err, sepetUrun) => {\n if (err) return console.error(err);\n sepeteEkle(menu, \"Patates\", (err, sepetUrun2) => { \/\/ Bir \u00fcr\u00fcn daha ekleyelim\n if (err) return console.error(err);\n siparisiOnayla([sepetUrun, sepetUrun2], (err, id) => {\n if (err) return console.error(err);\n console.log(Mutlu son! Sipari\u015f ID: ${id}<\/code>);\n });\n });\n });\n });\n});\n<\/pre>\nif (err) return...<\/code> kontrol\u00fc) karma\u015f\u0131kla\u015ft\u0131r\u0131r. \u0130\u015fte bu noktada modern JavaScript, Promise'ler ve Async\/Await ile devreye girerek bu karma\u015f\u0131kl\u0131\u011f\u0131 \u00e7\u00f6zmek i\u00e7in daha zarif ve g\u00fc\u00e7l\u00fc y\u00f6ntemler sunar.<\/p>\nPromise'lerin Kurtar\u0131c\u0131 Rol\u00fc: Yemek Sipari\u015finizin Gelece\u011fine Dair Bir Taahh\u00fct<\/h2>\n
\n
new Promise()<\/code> ile olu\u015fturulan ba\u015flang\u0131\u00e7 durumu).<\/li>\n.then()<\/code>, .catch()<\/code> ve .finally()<\/code> metodlar\u0131 arac\u0131l\u0131\u011f\u0131yla kullan\u0131l\u0131r. Bu metodlar, Promise'in durumuna g\u00f6re hangi kodun \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirtmenizi sa\u011flar ve en \u00f6nemlisi, birbirlerine zincirlenebilirler, bu da callback cehennemini ortadan kald\u0131r\u0131r.<\/p>\n\n
.then(onFulfilled, onRejected)<\/code>: Promise ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda (onFulfilled<\/code>) veya reddedildi\u011finde (onRejected<\/code>) \u00e7al\u0131\u015facak fonksiyonlar\u0131 tan\u0131mlar. Genellikle onRejected<\/code> i\u00e7in ayr\u0131 bir .catch()<\/code> kullan\u0131l\u0131r.<\/li>\n.catch(onRejected)<\/code>: Promise reddedildi\u011finde (bir hata olu\u015ftu\u011funda) \u00e7al\u0131\u015facak fonksiyonu tan\u0131mlar. Hata y\u00f6netimini merkezi hale getirir.<\/li>\n.finally(onFinally)<\/code>: Promise'in durumu ne olursa olsun (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z), her zaman \u00e7al\u0131\u015facak fonksiyonu tan\u0131mlar. Genellikle temizleme i\u015flemleri i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, y\u00fckleme animasyonunu kapatmak).<\/li>\n<\/ul>\n\nfunction restoranSecPromise() {\n console.log(\"Restoranlar y\u00fckleniyor (Promise)...\");\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const restoran = \"Burgerc\u00fc Baba\";\n console.log(${restoran} se\u00e7ildi.<\/code>);\n resolve(restoran); \/\/ Ba\u015far\u0131l\u0131, restoran\u0131 geri d\u00f6nd\u00fcr\n }, 1000);\n });\n}\n\nfunction menuyuGetirPromise(restoran) {\n console.log(${restoran} men\u00fcs\u00fc y\u00fckleniyor (Promise)...<\/code>);\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const menu = [\"Hamburger\", \"Patates\", \"Kola\"];\n console.log(\"Men\u00fc y\u00fcklendi.\");\n resolve(menu);\n }, 1500);\n });\n}\n\nfunction sepeteEklePromise(menu, urun) {\n console.log(${urun} sepete ekleniyor (Promise)...<\/code>);\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (menu.includes(urun)) {\n console.log(${urun} sepete eklendi.<\/code>);\n resolve({ urun, miktar: 1 });\n } else {\n reject(\u00dcr\u00fcn \"${urun}\" men\u00fcde yok!<\/code>); \/\/ Hata\n }\n }, 800);\n });\n}\n\nfunction siparisiOnaylaPromise(sepet) {\n console.log(\"Sipari\u015f onaylan\u0131yor (Promise)...\");\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const siparisID = Math.floor(Math.random() * 10000);\n console.log(Sipari\u015finiz ${siparisID} ile onayland\u0131!<\/code>);\n resolve(siparisID);\n }, 2000);\n });\n}\n\n\/\/ Promise zincirlemesi ile daha temiz kod:\nrestoranSecPromise()\n .then(restoran => menuyuGetirPromise(restoran)) \/\/ Restoran se\u00e7ilince men\u00fcy\u00fc getir\n .then(menu => Promise.all([ \/\/ Birden fazla \u00fcr\u00fcn\u00fc ayn\u0131 anda sepete ekle (ileride detayland\u0131r\u0131lacak)\n sepeteEklePromise(menu, \"Hamburger\"),\n sepeteEklePromise(menu, \"Patates\")\n ]))\n .then(sepetUrunleri => siparisiOnaylaPromise(sepetUrunleri)) \/\/ Sepet \u00fcr\u00fcnleri gelince sipari\u015fi onayla\n .then(siparisID => console.log(Mutlu son! Sipari\u015f ID: ${siparisID}<\/code>)) \/\/ Sipari\u015f onaylan\u0131nca ID'yi g\u00f6ster\n .catch(error => console.error(\"Bir hata olu\u015ftu:\", error)) \/\/ Herhangi bir ad\u0131mda hata olursa yakala\n .finally(() => console.log(\"Sipari\u015f ak\u0131\u015f\u0131 tamamland\u0131.\")); \/\/ Her durumda \u00e7al\u0131\u015f\n<\/pre>\n.then()<\/code> blo\u011fu, bir \u00f6nceki Promise'in ba\u015far\u0131l\u0131 sonucunu al\u0131r ve bir sonraki asenkron i\u015flemi ba\u015flat\u0131r. Zincirin herhangi bir noktas\u0131nda bir hata olu\u015fursa, kontrol hemen en yak\u0131n .catch()<\/code> blo\u011funa atlar, bu da hata y\u00f6netimini \u00e7ok daha kolay ve merkezi hale getirir. Art\u0131k, Swiggy'de bir sipari\u015fin birden fazla a\u015famadan ge\u00e7erken uygulaman\u0131n nas\u0131l bu kadar ak\u0131c\u0131 kald\u0131\u011f\u0131n\u0131 daha iyi anl\u0131yorsunuz. Promise'ler sayesinde her ad\u0131m bir sonrakine s\u00f6z vererek ilerler ve kullan\u0131c\u0131 deneyimi kesintisiz olur.<\/p>\nAsync\/Await: Yemek Haz\u0131rlan\u0131rken Mutfakta Beklemek Gibi mi?<\/h2>\n
async\/await<\/code> anahtar kelimeleri devreye girdi. Async\/Await, Promise'ler \u00fczerine kurulu \"sentaktik bir \u015feker\" olup, asenkron kodu senkron kod gibi, \u00e7ok daha temiz ve okunakl\u0131 bir \u015fekilde yazmam\u0131z\u0131 sa\u011flar.<\/p>\nawait<\/code>) an\u0131nda a\u015f\u00e7\u0131 o anki g\u00f6revi i\u00e7in durur, ancak restoran\u0131n geri kalan\u0131 (garsonlar, di\u011fer a\u015f\u00e7\u0131lar) \u00e7al\u0131\u015fmaya devam eder. Yani, a\u015f\u00e7\u0131 belirli bir i\u015fi \"beklerken\" ana mutfak (JavaScript'in ana i\u015f par\u00e7ac\u0131\u011f\u0131) bloke olmaz, di\u011fer i\u015flere devam edebilir. Ancak, a\u015f\u00e7\u0131n\u0131n kendisi o an i\u00e7in \"bekleme\" durumundad\u0131r.<\/p>\nasync<\/code> Fonksiyonlar ve await<\/code> Anahtar Kelimesi<\/strong><\/p>\nasync<\/code> kelimesi bir fonksiyonun \u00f6n\u00fcne yaz\u0131ld\u0131\u011f\u0131nda, o fonksiyonun her zaman bir Promise d\u00f6nd\u00fcrece\u011fini belirtir. Bu fonksiyonun i\u00e7inde await<\/code> anahtar kelimesini kullanabiliriz. await<\/code> ise sadece async<\/code> fonksiyonlar i\u00e7inde kullan\u0131labilir ve bir Promise'in tamamlanmas\u0131n\u0131 bekler. Promise yerine getirildi\u011finde (resolved), await<\/code> bize Promise'in de\u011ferini d\u00f6nd\u00fcr\u00fcr; e\u011fer reddedilirse (rejected), bir hata f\u0131rlat\u0131r.<\/p>\n\n\/\/ Promise'leri d\u00f6nd\u00fcren fonksiyonlar\u0131m\u0131z zaten mevcut:\n\/\/ restoranSecPromise(), menuyuGetirPromise(), sepeteEklePromise(), siparisiOnaylaPromise()\n\nasync function siparisVerAsync() {\n console.log(\"--- Async\/Await ile Sipari\u015f Verme ---\");\n try {\n const restoran = await restoranSecPromise(); \/\/ Restoran se\u00e7ilmesini bekle\n const menu = await menuyuGetirPromise(restoran); \/\/ Men\u00fcn\u00fcn gelmesini bekle\n \n \/\/ Birden fazla \u00fcr\u00fcn\u00fc paralel olarak sepete ekle (Promise.all ile)\n const sepetUrunleri = await Promise.all([\n sepeteEklePromise(menu, \"Hamburger\"),\n sepeteEklePromise(menu, \"Patates\")\n ]);\n\n const siparisID = await siparisiOnaylaPromise(sepetUrunleri); \/\/ Sipari\u015fin onaylanmas\u0131n\u0131 bekle\n console.log(Sonu\u00e7: Async\/Await ile sipari\u015f ID: ${siparisID}<\/code>);\n } catch (error) {\n console.error(\"Async\/Await hatas\u0131:\", error); \/\/ Hata yakalama\n } finally {\n console.log(\"Async\/Await sipari\u015f ak\u0131\u015f\u0131 tamamland\u0131.\");\n }\n}\n\nsiparisVerAsync();\n<\/pre>\nawait<\/code> sayesinde, bir Promise tamamlanana kadar kodun o sat\u0131rda \"duraklamas\u0131n\u0131\" sa\u011flayabiliriz. Ancak unutulmamal\u0131d\u0131r ki bu \"duraklama\", sadece async<\/code> fonksiyonun kendi i\u00e7indeki y\u00fcr\u00fctmeyi durdurur, JavaScript'in ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmez. Ana i\u015f par\u00e7ac\u0131\u011f\u0131, await<\/code> edilen Promise'in tamamlanmas\u0131n\u0131 beklerken di\u011fer i\u015fleri yapmaya devam eder. Promise \u00e7\u00f6z\u00fcmlendi\u011finde veya reddedildi\u011finde, async<\/code> fonksiyon kald\u0131\u011f\u0131 yerden devam eder.<\/p>\ntry...catch<\/code> bloklar\u0131 ile Promise'lerden bile daha tan\u0131d\u0131k ve anla\u015f\u0131l\u0131r bir \u015fekilde yap\u0131labilir, t\u0131pk\u0131 senkron kodlarda oldu\u011fu gibi. .finally()<\/code> blo\u011fu da ayn\u0131 i\u015flevi g\u00f6r\u00fcr ve i\u015flem ba\u015far\u0131l\u0131 olsun ya da olmas\u0131n \u00e7al\u0131\u015f\u0131r.<\/p>\nasync\/await<\/code> kullan\u0131m\u0131, \u00f6zellikle Swiggy ve Zomato gibi karma\u015f\u0131k etkile\u015fimlerin oldu\u011fu uygulamalarda kodun bak\u0131m\u0131n\u0131, test edilebilirli\u011fini ve genel okunabilirli\u011fini muazzam derecede art\u0131r\u0131r. Restoran listesinin y\u00fcklenmesi, filtreleme uygulanmas\u0131, sipari\u015fin \u00f6deme a\u015famas\u0131na ge\u00e7ilmesi gibi bir\u00e7ok ad\u0131m\u0131n sorunsuz bir \u015fekilde birbirini takip etmesi, b\u00fcy\u00fck \u00f6l\u00e7\u00fcde bu modern asenkron programlama deseni sayesinde m\u00fcmk\u00fcn olmaktad\u0131r.<\/p>\nasync\/await<\/code> ile asenkronlu\u011fun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak, adeta \"mutfakta bekliyormu\u015f gibi\" ama asl\u0131nda t\u00fcm restoran\u0131n ak\u0131\u015f\u0131n\u0131 bozmadan, ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunmak art\u0131k \u00e7ok daha kolay.<\/p>\nasync<\/code> fonksiyonlar her zaman bir Promise d\u00f6nd\u00fcr\u00fcr. E\u011fer async<\/code> bir fonksiyon i\u00e7inde a\u00e7\u0131k\u00e7a bir de\u011fer d\u00f6nd\u00fcrmezseniz, varsay\u0131lan olarak Promise.resolve(undefined)<\/code> d\u00f6nd\u00fcr\u00fcr. Bu, async<\/code> fonksiyonlar\u0131 di\u011fer Promise tabanl\u0131 kodlarla kolayca entegre etmenizi sa\u011flar.\n<\/div>\nPerformans Canavar\u0131: Swiggy ve Zomato Nas\u0131l Tak\u0131lmadan \u00c7al\u0131\u015f\u0131yor?<\/h3>\n
\n\n\n\n \n \n