58- آموزش جاوااسکریپت | Async/Await : مدیریت مدرن عملیات ناهمگام
در این بخش با قابلیت Async/Await آشنا میشویم. یاد میگیریم چگونه این ویژگی مدرن، کدهای ناهمگام را سادهتر کرده و ساختار زنجیرهای Promises را به کدهایی خوانا و شبیه به برنامهنویسی همزمان تبدیل میکند. در نهایت، کاربرد آن را در Fetch API بررسی خواهیم کرد.
در این بخش، به بررسی ویژگی قدرتمند Async/Await میپردازیم. این قابلیت که بخشی از استاندارد ES7 (یا ES2016) است، تحولی در مدیریت عملیاتهای ناهمگام (Asynchronous) در جاوااسکریپت ایجاد کرده است. اگرچه این قابلیت در مرورگرهای مدرن مانند کروم کاملاً پشتیبانی میشود، اما برای پروژههای تجاری پیشنهاد میشود از ابزارهایی مانند Webpack و Babel برای کامپایل کد به نسخههای سازگارتر استفاده کنید.
کلمه کلیدی Async
اضافه کردن کلمه async به ابتدای تعریف یک تابع، باعث میشود که آن تابع بهطور خودکار یک Promise برگرداند. این کار ما را از نوشتن دستی new Promise() بینیاز میکند.
// تعریف تابع معمولی
async function myFunc() {
return 'Hello';
}
// نحوه فراخوانی
myFunc().then(response => console.log(response));
کلمه کلیدی Await
قدرت اصلی زمانی مشخص میشود که از کلمه کلیدی await در کنار async استفاده کنیم. این کلمه به جاوااسکریپت دستور میدهد که اجرای تابع را تا زمان resolve شدن Promise متوقف کند. این ویژگی کد ما را از حالت زنجیرهای (Chaining) خارج کرده و حالتی خطی و خوانا به آن میدهد.
در مثال زیر، تابع تا زمانی که Promise اجرا نشود (پس از ۱ ثانیه)، صبر میکند:
async function myFunc() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Hello'), 1000);
});
const response = await promise; // اینجا برنامه صبر میکند تا Promise کامل شود
return response;
}
myFunc().then(res => console.log(res));
کاربرد Async/Await در Fetch API
یکی از بهترین موارد استفاده از Async/Await در کار با APIها است. به جای استفاده از چندین .then() متوالی، میتوانیم کد را بسیار تمیزتر بنویسیم:
async function getUsers() {
// منتظر پاسخ اولیه fetch میمانیم
const response = await fetch('https://jsonplaceholder.typicode.com/users');
// منتظر تبدیل پاسخ به فرمت JSON میمانیم
const data = await response.json();
return data;
}
// فراخوانی
getUsers().then(users => console.log(users));
همانطور که مشاهده کردید، این روش بسیار تمیزتر از روشهای قدیمی است. در بخش بعدی، از همین ساختار برای بازنویسی و بهینهسازی کامل کتابخانه EasyHTTP استفاده خواهیم کرد.