Javascript’te Asenkron Programlama<\/p>\n
Merhaba! Fatih Soysal burada. Bug\u00fcn Javascript’te asenkron programlaman\u0131n inceliklerine dalaca\u011f\u0131z. Bildi\u011finiz gibi, Javascript tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir. Bu, bir seferde sadece bir g\u00f6rev yapabilece\u011fi anlam\u0131na gelir. Ancak, bir\u00e7ok web uygulamas\u0131 a\u011f istekleri, dosya okuma gibi zaman alan i\u015flemler gerektirir. \u0130\u015fte burada asenkron programlama devreye giriyor; uygulaman\u0131z\u0131n bu i\u015flemler bitene kadar donmas\u0131n\u0131 engelliyor ve di\u011fer g\u00f6revleri yapmaya devam etmesini sa\u011fl\u0131yor.<\/p>\n
En eski asenkron programlama y\u00f6ntemlerinden biri callback fonksiyonlar\u0131d\u0131r. Bir fonksiyonun, zaman alan bir i\u015flemin tamamland\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lacak ba\u015fka bir fonksiyonu parametre olarak almas\u0131 anlam\u0131na gelir. \u00d6rne\u011fin, bir a\u011f iste\u011fi g\u00f6nderdi\u011finizde, iste\u011fin sonucu callback fonksiyonu i\u00e7inde i\u015flenir. Ancak, bir\u00e7ok callback fonksiyonunun ard arda kullan\u0131lmas\u0131 “callback cehennemi” olarak bilinen bir durum ortaya \u00e7\u0131kar\u0131r, kodu okumay\u0131 ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
\nfunction istekYap(url, callback) {\n \/\/ A\u011f iste\u011fi sim\u00fclasyonu\n setTimeout(() => {\n const veri = { mesaj: \"\u0130stek ba\u015far\u0131l\u0131!\" };\n callback(veri);\n }, 2000);\n}\n\nistekYap(\"https:\/\/fatihsoysal.com\/api\", (veri) => {\n console.log(veri); \/\/ \u0130ste\u011fin sonucu burada i\u015fleniyor\n});\n<\/code><\/pre>\nPromise’ler<\/h2>\n
Promise’ler, callback cehennemini \u00f6nlemek i\u00e7in geli\u015ftirilmi\u015ftir. Bir Promise, hen\u00fcz ger\u00e7ekle\u015fmemi\u015f bir de\u011feri temsil eder. .then() metodu ile ba\u015far\u0131l\u0131 sonu\u00e7lar\u0131, .catch() metodu ile de hatalar\u0131 yakalayabilirsiniz. Promise’ler daha temiz ve okunabilir bir kod yazman\u0131za yard\u0131mc\u0131 olur. Dahas\u0131, .then() metodlar\u0131n\u0131 zincirleme yoluyla birden fazla asenkron i\u015flemi s\u0131ralayabilirsiniz.<\/p>\n
\nfunction istekYap(url) {\n return new Promise((resolve, reject) => {\n \/\/ A\u011f iste\u011fi sim\u00fclasyonu\n setTimeout(() => {\n const veri = { mesaj: \"Promise ile istek ba\u015far\u0131l\u0131!\" };\n resolve(veri); \/\/ Ba\u015far\u0131l\u0131 sonu\u00e7\n \/\/reject(new Error(\"\u0130stek ba\u015far\u0131s\u0131z!\")); \/\/ Hata durumunda\n }, 2000);\n });\n}\n\nistekYap(\"https:\/\/fatihsoysal.com\/api\")\n .then(veri => console.log(veri))\n .catch(hata => console.error(hata));\n<\/code><\/pre>\nAsync\/Await<\/h2>\n
Async\/Await, Promise’leri kullanarak asenkron kodu daha senkron bir \u015fekilde yazman\u0131za olanak tan\u0131r. async anahtar kelimesi ile bir fonksiyonu asenkron hale getirebilirsiniz ve await anahtar kelimesi ile bir Promise’in \u00e7\u00f6z\u00fcmlenmesini bekleyebilirsiniz. Bu sayede kodunuz daha okunakl\u0131 ve anla\u015f\u0131l\u0131r hale gelir. Karma\u015f\u0131k asenkron i\u015flemleri y\u00f6netmek i\u00e7in idealdir.<\/p>\n
\nasync function istekYapAsync(url) {\n try {\n const veri = await istekYap(url); \/\/ Promise'in \u00e7\u00f6z\u00fcmlenmesini bekler\n console.log(veri);\n } catch (hata) {\n console.error(hata);\n }\n}\n\nistekYapAsync(\"https:\/\/fatihsoysal.com\/api\");\n<\/code><\/pre>\n