<\/div>\n
Merhaba,<\/p>\n
Bu makalemizde JavaScript’in do\u011fal olan asenkron yap\u0131s\u0131na kar\u015f\u0131 hakimiyet sa\u011flamam\u0131za yarayan Async ve Await keywordleri \u00fczerine konu\u015fuyor olaca\u011f\u0131z.<\/p>\n
\u0130lk olarak yukar\u0131da da bahsedildi\u011fi gibi JavaScript’in asenkron yap\u0131s\u0131 \u00fczerine konu\u015fal\u0131m.
\nJavaScript anatomik olarak asenkron yap\u0131ya sahip script dilidir. Yani \u00e7a\u011fr\u0131lan fonksiyonlar\u0131 sat\u0131r sat\u0131r i\u015flememekte bilakis asenkron temelli paralel bir \u00e7al\u0131\u015fma sergilemektedir ve \u00e7\u0131kt\u0131lar\u0131 i\u015flem s\u0131ralamas\u0131ndan ziyade yap\u0131lan i\u015flemlerin s\u00fcreleri baz al\u0131narak belirlemektedir.<\/p>\n
\r\nlet metot1 = () => {\r\n    console.log("metot1");\r\n};\r\nlet metot2 = () => {\r\n    console.log("metot2");\r\n};\r\nlet metot3 = () => {\r\n    console.log("metot3");\r\n};\r\nmetot1();\r\nmetot2();\r\nmetot3();\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer s\u0131ras\u0131yla “metot1”, “metot2” ve “metot3” \u00e7a\u011fr\u0131lmakta ve bu s\u00fcre\u00e7 asenkron bir \u015fekilde ceyran etmektedir. \u00c7\u0131kt\u0131 olarak ise s\u0131ras\u0131yla;
\nmetot1
\nmetot2
\nmetot3<\/em><\/code>
\nsonucu al\u0131nmaktad\u0131r.
\n“La hoca bunun neresi asenkron layn?<\/strong>” diyenleriniz olabilir. Tabi burada fonksiyonlar\u0131m\u0131z\u0131n i\u015flev maliyetleri neredeyse yok denecek kadar az oldu\u011fundan ve i\u015flev s\u00fcreleri ise mikrosaniye cinsinden hemen hemen birbirlerine yak\u0131n oldu\u011fundan \u00e7\u0131kt\u0131 olarak \u00e7a\u011fr\u0131lma s\u0131ras\u0131na uygun bir \u015fekilde sonu\u00e7lar elde edilmi\u015ftir. Ama a\u015fa\u011f\u0131daki gibi fonksiyonlar\u0131n i\u015flev s\u00fcreleriyle oynarsak;<\/p>\n
\r\nlet metot1 = () => {\r\n    setTimeout(() => {\r\n        console.log("metot1");\r\n    }, 5000);\r\n};\r\nlet metot2 = () => {\r\n    setTimeout(() => {\r\n        console.log("metot2");\r\n    }, 3000);\r\n};\r\nlet metot3 = () => {\r\n    setTimeout(() => {\r\n        console.log("metot3");\r\n    }, 4000);\r\n};\r\nmetot1();\r\nmetot2();\r\nmetot3();\r\n<\/pre>\n\u00e7\u0131kt\u0131 olarak;
\nmetot2
\nmetot3
\nmetot1<\/em><\/code>
\nsonucunu verecektir. Neden mi? “metot1″in be\u015f saniye, “metot2″nin \u00fc\u00e7 saniye ve “metot3″\u00fcn d\u00f6rt saniye i\u015flev s\u00fcresi vard\u0131r. Dolay\u0131s\u0131yla s\u00fcre\u00e7 asenkron i\u015fleyece\u011finden dolay\u0131 t\u00fcm metotlar ayn\u0131 anda paralel bir \u015fekilde tetiklenecek ve i\u015flev s\u00fcresi k\u0131sa olan \u00f6ncelikli \u00e7\u0131kt\u0131 verecektir. Nedeni budur…<\/p>\n
“Peki hoca bu fonksiyonlar\u0131 bir ba\u015fka fonksiyon i\u00e7erisinde \u00e7a\u011f\u0131rsak… O zaman senkron olmaz m\u0131?<\/strong>” diye s\u00f6yledi\u011finizi duyar gibiyim. Eee hadi dedi\u011finizi uygulay\u0131p, beraber inceleyelim.<\/p>\n
\r\nlet metot4 = () => {\r\n    metot1();\r\n    metot2();\r\n    metot3();\r\n};\r\nmetot4();\r\n<\/pre>\nYukar\u0131daki gibi olu\u015fturdu\u011fumuz fonksiyonu \u00e7a\u011f\u0131rd\u0131\u011f\u0131m\u0131zda gene benzer sonu\u00e7la kar\u015f\u0131la\u015f\u0131yoruz.
\nmetot2
\nmetot3
\nmetot1<\/em><\/code><\/p>\n
Hatta araya farkl\u0131 i\u015flemler t\u0131k\u0131\u015ft\u0131r\u0131p deneyelim;<\/p>\n
\r\nlet metot4 = () => {\r\n    metot1();\r\n    console.log("ara i\u015flem 1");\r\n    metot2();\r\n    console.log("ara i\u015flem 2");\r\n    metot3();\r\n};\r\n\r\nmetot4();\r\n<\/pre>\nara i\u015flem 1
\nara i\u015flem 2
\nmetot2
\nmetot3
\nmetot1<\/em><\/code>
\nYok! Nuh diyor, peygamber demiyor…<\/p>\n
“Eee, peki bu durumda ne yap\u0131yoruz hoca?<\/strong>”
\nEskiden metotlar\u0131m\u0131z\u0131 callback fonksiyonlara \u00e7evirerek \u00f6ncelikleri zahmetli bir \u015fekilde belirtebiliyorduk. Tabi sonraki s\u00fcre\u00e7lerde ayn\u0131 mant\u0131kta callback fonksiyonlar\u0131n\u0131 pratik kullanabilmek i\u00e7in geli\u015ftirilmi\u015f Promise Yap\u0131s\u0131n\u0131<\/a> kullanarak \u00e7al\u0131\u015fmalar\u0131m\u0131z\u0131 icra ediyorduk.<\/p>\n
Promise yap\u0131s\u0131n\u0131 kullanarak s\u00fcreci nas\u0131l senkron hale getirdi\u011fimizi inceleyelim.<\/p>\n
\r\nlet metot1 = () => {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            console.log("metot1");\r\n            resolve("");\r\n        }, 5000);\r\n    });\r\n};\r\nlet metot2 = () => {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            console.log("metot2");\r\n            resolve("");\r\n        }, 3000);\r\n    });\r\n};\r\nlet metot3 = () => {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            console.log("metot3");\r\n            resolve("");\r\n        }, 4000);\r\n    });\r\n};\r\n<\/pre>\nFonksiyonlar\u0131m\u0131z\u0131 Promise yap\u0131s\u0131na \u00e7evirdikten sonra a\u015fa\u011f\u0131daki gibi kullanabilmekteyiz;<\/p>\n
\r\nmetot1().then(() =>\r\n    metot2().then(() =>\r\n        metot3().then()\r\n    )\r\n);\r\n<\/pre>\n\u0130\u015fte bu \u015fekilde kulland\u0131\u011f\u0131m\u0131zda metotlar\u0131m\u0131z belirtilen s\u0131rada tetiklenece\u011finden dolay\u0131 sistem senkron i\u015flemi\u015f olacakt\u0131r ve beklenen \u00e7\u0131kt\u0131 al\u0131nacakt\u0131r.
\nmetot1
\nmetot2
\nmetot3<\/em><\/code><\/p>\n
“La hoca, biz JavaScript’te senkron \u00e7al\u0131\u015fmak i\u00e7in bunca u\u011fra\u015fa mecburmuyuz?<\/strong>” diye serzeni\u015fte bulundu\u011funuzu da duyar gibiyim. Durun… Hemen yelkenleri suya indirmeyin. Bu i\u00e7eri\u011fi bo\u015funa yazm\u0131yoruz \ud83d\ude42 Tabi ki de gelecek vaadeden bir dil kendindeki bu aksakl\u0131\u011f\u0131 daha pratik bir \u015fekilde \u00e7\u00f6z\u00fcme kavu\u015fturmak i\u00e7in \u00e7abalayacakt\u0131r. Dolay\u0131s\u0131yla ECMAScript \u00e7abalam\u0131\u015f ve netice olarak async ve await keywordleri ile s\u00fcreci senkron hale getirme imkan\u0131 tan\u0131m\u0131\u015ft\u0131r.<\/p>\n
Burada C# ile bir k\u0131yas yapmak istiyorum. C#, \u00f6z\u00fc itibariyle senkron bir programlama dilidir. Lakin asenkron programalama yapabilmek i\u00e7in bir\u00e7ok y\u00f6ntem aras\u0131nda async ve await komutlar\u0131 kullan\u0131l\u0131r. async ile i\u015faretlenmi\u015f metot i\u00e7erisinde asenkron bir i\u015flem uygulanaca\u011f\u0131 metoda bildirilir ve await keyword\u00fc ile de hangi i\u015flem oldu\u011fu i\u015faretlenir. Yani C#’ta async ve await keywordleri senkron \u00e7al\u0131\u015fmay\u0131 asenkron hale getirmektedir.<\/p>\n
ECMAScript’te ise durum tam tersidir. \u00d6z\u00fc itibariyle asenkron olan bir dildeki i\u015fleyi\u015fi senkron gibi y\u00f6netebilmek i\u00e7in yine async ve await keywordleri kullan\u0131l\u0131r.<\/p>\n
ECMAScript’te async ve await keywordlerini kullan\u0131rken dikkat etmeniz gerekenler;<\/p>\n
\nKullan\u0131lacak fonksiyon async ile i\u015faretlenip metot i\u00e7erisinde asenkron bir i\u015flem olaca\u011f\u0131 bildirilmelidir,<\/li>\n
await ile i\u015faretlenecek olan fonksiyon geriye Promise nesnesi d\u00f6nd\u00fcrmelidir,<\/li>\n
\u00d6rneklerde kullanmad\u0131k lakin sizler kesinlikle try – catch yap\u0131s\u0131 e\u015fli\u011finde kontrol mekanizmas\u0131nda \u00e7al\u0131\u015f\u0131n\u0131z,<\/li>\n
await keyword\u00fcne null de\u011ferini verirseniz bir hataya neden olmamaktad\u0131r,<\/li>\n
await keyword\u00fcne Promise nesnesi haricinde bir de\u011fer verirsek direkt olarak pass(ge\u00e7) edecektir. Benzer mant\u0131kla geriye Promise d\u00f6nmeyen herhangi bir fonksiyon verirseniz e\u011fer gene pass i\u015flemine tabi tutulacakt\u0131r.<\/li>\n<\/ul>\nYukar\u0131da metotlar\u0131n tan\u0131mland\u0131\u011f\u0131 en sonuncu Promise geri d\u00f6n\u00fc\u015fl\u00fc hallerini baz alarak a\u015fa\u011f\u0131daki gibi async ve await keywordlerini kullanabiliriz.<\/p>\n
\r\nasync function executeAsync() {\r\n    await metot1();\r\n    await metot2();\r\n    await metot3();\r\n}\r\nexecuteAsync();\r\n<\/pre>\nS\u00fcre\u00e7 senkron i\u015fleyece\u011finden dolay\u0131 \u00e7\u0131kt\u0131 beklendi\u011fi gibi olacakt\u0131r.<\/p>\n
Evet… Bir yaz\u0131m\u0131z\u0131n daha sonuna gelmi\u015f bulunmaktay\u0131z. Bol bol faydalanman\u0131z dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu makalemizde JavaScript’in do\u011fal olan asenkron yap\u0131s\u0131na kar\u015f\u0131 hakimiyet sa\u011flamam\u0131za yarayan Async ve Await keywordleri \u00fczerine konu\u015fuyor olaca\u011f\u0131z. \u0130lk olarak yukar\u0131da da bahsedildi\u011fi gibi JavaScript’in asenkron yap\u0131s\u0131 \u00fczerine konu\u015fal\u0131m. JavaScript anatomik olarak asenkron...<\/p>\n","protected":false},"author":1,"featured_media":8497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2443,2145],"tags":[2461,2440,2464,2462,2463],"class_list":["post-8543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecmascript-6","category-node-js","tag-async-await-keywordleri","tag-ecmascript-6","tag-ecmascript-6-asenkron","tag-ecmascript-6-async-await-keywordleri","tag-ecmascript-6-senkron"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8543"}],"version-history":[{"count":20,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8543\/revisions"}],"predecessor-version":[{"id":8563,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8543\/revisions\/8563"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8497"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}