وقتی برنامه‌های پویا را با جاوا اسکریپت می‌سازید که داده‌های بی‌درنگ را نمایش می‌دهند - مانند یک برنامه هواشناسی یا داشبورد ورزشی زنده - به راهی برای واکشی خودکار داده‌های جدید از یک منبع خارجی بدون ایجاد اختلال در تجربه کاربر نیاز دارید.

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

فهرست مطالب

تابع Callback چیست؟

چرا از توابع Callback استفاده کنیم؟

ساختار اصلی یک تابع برگشت به تماس

نحوه پاسخگویی به تماس ها

نحوه رسیدگی به خطاها با پاسخ به تماس

مشکل جهنم برگشت به تماس

نحوه استفاده از Promises و Async/Await

نتیجه

تابع Callback چیست؟

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

این مکانیسم به جاوا اسکریپت اجازه می‌دهد تا کارهایی مانند خواندن فایل‌ها، درخواست HTTP یا انتظار برای ورودی کاربر را بدون مسدود کردن اجرای برنامه انجام دهد. این به اطمینان از تجربه کاربری روان کمک می کند.

چرا از توابع برگشت به تماس استفاده می کنیم؟

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

ساختار اصلی یک تابع برگشت به تماس

برای نشان دادن، اجازه دهید به یک مثال ساده نگاه کنیم:

 function greet(name, callback) { console.log(`Hello, ${name}!`); callback(); } function sayGoodbye() { console.log("Goodbye!"); } greet("Alice", sayGoodbye);

در این کد:

greet تابعی است که یک نام و یک تابع callback به عنوان آرگومان می گیرد.

پس از احوالپرسی کاربر، تابع callback را فراخوانی می کند.

نحوه پاسخگویی به تماس ها

انتقال تابع: تابعی که می خواهید بعد از چند عملیات اجرا شود به عنوان آرگومان به تابع دیگری ارسال می شود.

اجرای Callback: تابع main تابع callback را در زمان مناسب اجرا می کند. این می تواند پس از یک تاخیر، پس از تکمیل یک کار، یا زمانی که یک رویداد رخ می دهد.

در اینجا یک مثال دقیق تر با یک عملیات ناهمزمان شبیه سازی شده با استفاده از setTimeout آورده شده است:

 function fetchData(callback) { setTimeout(() => { const data = { id: 1, name: "Alice" }; callback(data); }, 2000); // Simulating a delay of 2 seconds } fetchData((data) => { console.log("Data received:", data); });

در این مثال:

fetchData واکشی داده ها را پس از 2 ثانیه تاخیر شبیه سازی می کند.

تابع callback داده ها را پس از دریافت ثبت می کند.

نحوه رسیدگی به خطاها با پاسخ به تماس

در سناریوهای دنیای واقعی، اغلب باید خطاها را مدیریت کنید. یک الگوی رایج ارسال یک خطا به عنوان اولین آرگومان به تابع callback است:

 function readFile(filePath, callback) { const fs = require('fs'); fs.readFile(filePath, 'utf8', (err, data) => { if (err) { callback(err, null); } else { callback(null, data); } }); } readFile('example.txt', (err, data) => { if (err) { console.error("Error reading file:", err); } else { console.log("File content:", data); } });

اینجا:

تابع readFile یک فایل را به صورت ناهمزمان می خواند.

پاسخ تماس را با یک خطا (در صورت وجود) یا داده های فایل فراخوانی می کند.

مشکل جهنم برگشت به تماس

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

 function stepOne(callback) { setTimeout(() => callback(null, 'Step One Completed'), 1000); } function stepTwo(callback) { setTimeout(() => callback(null, 'Step Two Completed'), 1000); } function stepThree(callback) { setTimeout(() => callback(null, 'Step Three Completed'), 1000); } stepOne((err, result) => { if (err) return console.error(err); console.log(result); stepTwo((err, result) => { if (err) return console.error(err); console.log(result); stepThree((err, result) => { if (err) return console.error(err); console.log(result); }); }); });

خواندن و نگهداری این کد دشوار است. برای حل این مشکل، جاوا اسکریپت مدرن Promises و syntax async/await را ارائه می‌کند که کد را پاک‌تر و مدیریت آن را آسان‌تر می‌کند.

نحوه استفاده از Promises و Async/Await

وعده ها نشان دهنده تکمیل (یا شکست) نهایی یک عملیات ناهمزمان و مقدار حاصل از آن است.

 function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ id: 1, name: "Alice" }); }, 2000); }); } fetchData() .then(data => { console.log("Data received:", data); }) .catch(error => { console.error("Error:", error); });

دستور Async/Await کار با Promises را ساده می کند:

 async function getData() { try { const data = await fetchData(); console.log("Data received:", data); } catch (error) { console.error("Error:", error); } } getData();

این رویکرد باعث می‌شود کد ناهمزمان شبیه کد همزمان به نظر برسد و رفتار کند و خوانایی و قابلیت نگهداری را بهبود می‌بخشد.

در اینجا می‌توانید درباره وعده‌ها و همگام‌سازی/انتظار بیشتر بخوانید .

نتیجه

توابع پاسخ به تماس در جاوا اسکریپت برای مدیریت عملیات ناهمزمان اساسی هستند. در حالی که آنها یک راه قدرتمند برای مدیریت جریان ناهمزمان ارائه می دهند، می توانند پیچیده و نگهداری آنها دشوار باشد.

استفاده از Promises و syntax async/wait می‌تواند کد شما را ساده‌تر کند و مدیریت آن را ساده‌تر و تمیزتر کند.

درک این مفاهیم به شما کمک می کند تا کد جاوا اسکریپت کارآمدتر و قابل نگهداری بیشتری بنویسید.

اگر این را مفید دیدید، در لینکدین و توییتر با من در ارتباط باشید.

خبرکاو