آموزش ایجاد برنامه های ناهمزمان با جاوا اسکریپت

تغییر ترتیب اجرای کد می تواند گیج کننده باشد، اما برای برنامه های خاص حیاتی است. یاد بگیرید که چگونه از جاوا اسکریپت به صورت غیر خطی استفاده کنید.

برنامه نویسی ناهمزمان جزء اصلی در توسعه نرم افزار است. باورش سخت است که این مفهوم برنامه نویسی فقط از قرن بیست و یکم وجود داشته است. زبان برنامه نویسی F# اولین زبانی بود که در بین همتایان خود برنامه نویسی ناهمزمان را در سال 2007 معرفی کرد.

زبان های دیگری مانند سی شارپ، پایتون، جاوا اسکریپت و سی پلاس پلاس به تدریج پشتیبانی از برنامه نویسی ناهمزمان را اضافه کردند. سوال بزرگ این است که برنامه نویسی ناهمزمان چه ارزشی به برنامه های شما می افزاید؟

این مقاله به آن و سایر سؤالات پاسخ می دهد، بنابراین شما همه چیز را در مورد نحوه استفاده از برنامه نویسی ناهمزمان خواهید یافت.

برنامه نویسی همزمان چیست؟

برنامه نویسی همزمان به یک برنامه در ابتدایی ترین شکل آن اشاره دارد. این مدل برنامه نویسی خطوط کد را در یک برنامه یا اسکریپت به صورت متوالی پردازش می کند. همیشه از اولین خط کد یک برنامه شروع می شود. سپس صبر می کند تا هر خط کد اجرای خود را کامل کند و سپس به خط بعدی می رود.

مدل سنکرون همچنین شامل کدهای شرطی مانند دستورات if و while است. اگرچه فقط برخی از کدها در یک دستور شرطی اجرا می شوند، برنامه همچنان به صورت متوالی اجرا می شود.

مثال برنامه همزمان

const SyncCode = () => {
    console.log("This is the first line in the program")
    console.log("This is the second line in the program")
    console.log("This is the final line in the program")
}
 
SyncCode();

اجرای برنامه جاوا اسکریپت در بالا خروجی زیر را در کنسول تولید می کند:

This is the first line in the program
This is the second line in the program
This is the final line in the program

خروجی بالا دقیقاً همان چیزی است که باید انتظار داشته باشید. برنامه از بالا شروع می شود و منتظر می ماند تا یک خط کد به پایان برسد و سپس به خط بعدی منتقل شود.

برنامه نویسی ناهمزمان چیست؟

برنامه نویسی ناهمزمان برعکس برنامه نویسی همزمان است. مدل برنامه نویسی ناهمزمان چندین خط کد را به طور همزمان پردازش می کند. منتظر نمی ماند تا خط قبلی کد در یک برنامه اجرای خود را کامل کند و سپس به خط بعدی منتقل شود.

مطالب مرتبط: برنامه نویسی همزمان در مقابل برنامه نویسی ناهمزمان: چه تفاوتی با هم دارند؟

برنامه نویسی ناهمزمان می تواند زمان اجرا را به نصف کاهش دهد و به طور موثر رایانه های سریع تری ایجاد کند.

مثال برنامه ناهمزمان

const AsyncCode = () => {
    console.log("This is the first line in the program")
 
    setTimeout(() => {
        console.log("This is the second line in the program")
    }, 3000)
 
    console.log("This is the final line in the program")
}
 
AsyncCode();

اجرای کد جاوا اسکریپت در بالا خروجی زیر را در کنسول شما تولید می کند:

This is the first line in the program
This is the final line in the program
This is the second line in the program

اگر خروجی کنسول بالا را با برنامه ناهمزمان که آن را تولید می کند مقایسه کنید، خواهید دید که یک اختلاف آشکار وجود دارد. فراخوانی برای ورود به سیستم که می گوید “این خط دوم در برنامه است” قبل از تماسی که می گوید “این خط نهایی در برنامه است” رخ می دهد. با این حال، خروجی کنسول این را منعکس نمی کند.

با توجه به اینکه جاوا اسکریپت اساساً همزمان است، کد موجود در برنامه بالا به صورت متوالی اجرا می شود. اما جاوا اسکریپت از برنامه نویسی ناهمزمان از طریق ویژگی هایی مانند متد setTimeout() پشتیبانی می کند.

متد setTimeout() یک متد جاوا اسکریپت ناهمزمان است که دو آرگومان می گیرد: یک تابع و یک تاخیر. تاخیر یک تایمر (بر حسب میلی ثانیه) است که اجرای تابع را به تاخیر می اندازد. بنابراین، در حالی که برنامه بالا منتظر سه ثانیه برای اجرای تابع در متد ()setTimeout است، به خط بعدی در کد می‌رود. این منجر به اجرای سومین فراخوانی تابع قبل از دوم می شود.

فن آوری های جاوا اسکریپت ناهمزمان

جدا از روش setTimeout() که در بالا ذکر شد، چندین فناوری جاوا اسکریپت از برنامه نویسی ناهمزمان استفاده می کنند. این فناوری ها از مدل برنامه نویسی ناهمزمان برای توسعه سریعتر برنامه های غیر مسدود کننده استفاده می کنند. برخی از این فناوری ها عبارتند از:

• جی کوئری آژاکس
• Axios
• NodeJS

مطالب مرتبط: Node.js چیست؟ در اینجا نحوه استفاده از جاوا اسکریپت سمت سرور آورده شده است

ایجاد برنامه های ناهمزمان با جاوا اسکریپت

روش های مختلفی برای مدیریت کدهای ناهمزمان وجود دارد. روشی که انتخاب می کنید باید به نوع برنامه ای که می خواهید توسعه دهید بستگی دارد. این روش ها شامل توابع پاسخ به تماس، وعده ها و همگام سازی/انتظار هستند.

توابع پاسخ به تماس

دو ویژگی مهم تابع callback وجود دارد. آنها به عنوان پارامترهایی برای سایر عملکردها عمل می کنند و برای انجام وظایف خود به رویدادهای خارجی متکی هستند. متد setTimeout() مورد استفاده در مثال ناهمزمان بالا یک تابع callback است. برنامه به عنوان یک پارامتر (عملکرد برگشت تماس) آن را به عنوان یک تابع گزارش ارسال می کند و تنها پس از سه ثانیه (رویداد) آن را اجرا می کند.

توابع پاسخ به تماس برای برنامه های کوچک عالی هستند، اما با رشد برنامه های شما، ممکن است خیلی سریع پیچیده شوند. این به این دلیل است که توابع پاسخ به تماس اغلب توابع دیگر تماس را فراخوانی می کنند و زنجیره ای از تماس های تو در تو را ایجاد می کنند.

استفاده از وعده ها

جاوا اسکریپت پشتیبانی از وعده ها را پس از توابع پاسخ به تماس اضافه کرد. آنها جایگزین خوبی برای ایجاد برنامه های بزرگتر هستند. یک وعده نشان دهنده آن چیزی است که ممکن است پس از یک عملیات ناهمزمان اتفاق بیفتد. این نتیجه بالقوه یکی از این دو شکل را خواهد داشت: حل شده یا رد شده. یک تابع جداگانه هر یک از این نتایج را مدیریت می کند و نیاز به تودرتو (مشکل تابع برگشت تماس) را از بین می برد. در عوض، وعده‌ها توابع زنجیره‌ای را تشویق می‌کنند که استفاده از آنها آسان‌تر است.

هر وعده با یک شی Promise جدید شروع می شود که دارای یک تابع ناشناس با پارامترهای Resol و Reject است. در این تابع، برنامه ناهمزمان را خواهید داشت که در صورت موفقیت آمیز بودن عملیات ناهمزمان، حل و فصل یا در غیر این صورت رد می شود.

تابع زنجیره ()thenn تابع Resolution را مدیریت می کند و تابع زنجیره ()catch تابع reject را مدیریت می کند. بنابراین، مانند توابع پاسخ به تماس، نیازی به دستورات if تودرتو نیست.

با استفاده از مثال وعده ها

const PromiseFunction = () => {
    returnnewPromise((resolve, reject) => {
        setTimeout(() => {
            resolve("this asynchronous operation executed well")
        }, 3000)
    })
}
 
PromiseFunction().then((result) => {
    console.log("Success", result)
}).catch((error) => {
    console.log("Error", error)
})

کد بالا خروجی زیر را در کنسول برمی گرداند:

Success this asynchronous operation executed well

این به این دلیل است که پروتکل تابع Resolution را برمی‌گرداند که نتایج خود را به تابع then() می‌دهد. اگر وعده تابع reject را برمی گرداند، برنامه به جای آن از تابع catch استفاده می کند.

با استفاده از Async/Await

اگر نمی‌خواهید یک زنجیره وعده در هنگام برخورد با عملیات ناهمزمان ایجاد کنید، می‌توانید async/wait را امتحان کنید. Async/wait یک ابزار ناهمزمان کاملاً متفاوت از وعده ها نیست، فقط روشی متفاوت برای مدیریت آنهاست. بدون استفاده از روش زنجیره ای به وعده ها رسیدگی می کند. بنابراین، به همان روشی که وعده‌ها عملکردهای ناهمزمان را بهتر از توابع پاسخ به تماس مدیریت می‌کنند، همگام‌سازی/انتظار مزایایی نسبت به وعده‌های ساده دارد.

دو ویژگی کلیدی برای هر تابع async/wait وجود دارد. آنها با کلمه کلیدی async شروع می شوند و کلمه کلیدی await منتظر نتیجه یک عملیات ناهمزمان است.

مثال برنامه Async/Await

const PromiseFunction = () => {
    returnnewPromise((resolve, reject) => {
        setTimeout(() => {
            resolve("this asynchronous operation executed well")
        }, 3000)
    })
}
 
const AsyncAwaitFunc = async () => {
    const result = await PromiseFunction();
    console.log(result);
}
 
AsyncAwaitFunc();

کد بالا خروجی زیر را در کنسول برمی گرداند:

this asynchronous operation executed well

مهم ترین موارد مصرفی چیست؟

چندین نکته اساسی وجود دارد که باید از این مقاله استفاده کنید:

• برنامه نویسی ناهمزمان با ارزش است زیرا زمان انتظار برنامه را کاهش می دهد و برنامه های سریع تری ایجاد می کند.
• یک تابع تماس می تواند همزمان یا ناهمزمان باشد.
• Promises راه بهتری برای مدیریت عملیات ناهمزمان نسبت به توابع پاسخ به تماس ارائه می دهد.
• توابع Async/wait به روشی بهتر از استفاده از توابع زنجیره ای به وعده ها رسیدگی می کنند.
• یک تابع ناهمگام/انتظار، عملیات ناهمزمان را به گونه ای انجام می دهد که همزمان به نظر می رسد و درک آن را آسان تر می کند.
• توابع پیکان به شما کمک می کنند کد بهتری بنویسید.

منبع مقاله