JS: قول یا تماس؟ – انجمن DEV

Summarize this content to 400 words in Persian Lang

درک وعده ها در مقابل پاسخ به تماس ها در جاوا اسکریپت

سوالات و پاسخ های کلیدی برای تست گواهینامه

تابع callback چیست و چه تفاوتی با یک تابع معمولی دارد؟

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

چگونه Promises خوانایی کد را بهبود می بخشد و عملیات ناهمزمان را در مقایسه با تماس های برگشتی مدیریت می کند؟

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

حالت‌های اصلی یک وعده چیست و چگونه بین این حالت‌ها جابه‌جا می‌شوند؟

حالت های اصلی عبارتند از: در انتظار (وضعیت اولیه)، انجام شده (عملیات با موفقیت انجام شد)، و رد شده (عملیات ناموفق). یک وعده از حالت معلق به انجام شده یا رد شده تغییر می کند.

چگونه می‌توانید با استفاده از Promises خطاها را مدیریت کنید، و این چگونه با رسیدگی به خطا با تماس‌های برگشتی مقایسه می‌شود؟

وعده ها ارائه می کنند catch روشی برای رسیدگی به خطاها به روشی ساده، در حالی که رسیدگی به خطا با تماس‌های بک اغلب نیازمند ارسال اشیاء خطا و بررسی‌های متعدد در تماس‌های تودرتو است.

چه فرقی با هم دارند Promise.all و Promise.raceو چه زمانی از هر کدام استفاده می کنید؟

Promise.all زمانی که تمام وعده‌های ورودی حل می‌شوند، حل می‌شود، و برای انتظار برای تکمیل چندین عملیات ناهمزمان مفید است. Promise.race به محض حل شدن یکی از وعده های ورودی حل می شود، برای سناریوهایی که به نتیجه عملیات تکمیل شده اول نیاز است، مفید است.

چگونه async/await نحو کار با Promises را ساده می کند و قوانین استفاده از آن چیست await?

را async/await سینتکس اجازه می دهد تا کدهای ناهمزمان را به صورت همزمان بنویسید و خوانایی را بهبود می بخشد. await فقط در داخل قابل استفاده است async عملکرد می کند و اجرا را متوقف می کند تا زمانی که Promise حل شود.

معرفی

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

مزایای وعده در مقابل تماس تلفنی

خوانایی و نگهداری بهبود یافته

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

مثالی از Callback Hell:

fetchData(function(response1) {
fetchMoreData(response1, function(response2) {
fetchEvenMoreData(response2, function(response3) {
console.log(response3);
});
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با وعده‌ها بهبود یافت:

fetchData()
.then(response1 => fetchMoreData(response1))
.then(response2 => fetchEvenMoreData(response2))
.then(response3 => console.log(response3))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رسیدگی به خطا

با فراخوانی، رسیدگی به خطا می تواند دست و پا گیر شود زیرا باید اشیاء خطا را ارسال کنید و آنها را در هر سطح مدیریت کنید.

رسیدگی به خطا با پاسخ به تماس:

function fetchData(callback) {
setTimeout(() => {
if (/* error condition */) {
callback(new Error(‘An error occurred’), null);
} else {
callback(null, ‘data’);
}
}, 1000);
}

fetchData((error, data) => {
if (error) {
console.error(error);
} else {
console.log(data);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رسیدگی به خطا با وعده ها:

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (/* error condition */) {
reject(new Error(‘An error occurred’));
} else {
resolve(‘data’);
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روش های پیشرفته وعده

Promise.all

Promise.all زمانی مفید است که قبل از ادامه، باید منتظر بمانید تا چندین عملیات ناهمزمان کامل شوند.

مثال:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, ‘foo’);
});

Promise.all([promise1, promise2, promise3]).then(values => {
console.log(values); // [3, 42, “foo”] });

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Promise.race

Promise.race زمانی مفید است که به نتیجه سریعترین عملیات نیاز دارید.

مثال:

const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, ‘one’);
});

const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, ‘two’);
});

Promise.race([promise1, promise2]).then(value => {
console.log(value); // “two”
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ساده سازی کد ناهمزمان با async/await

را async/await syntax به شما امکان می دهد کدهای ناهمزمان بنویسید که همزمان به نظر می رسد، خوانایی را افزایش می دهد و پیچیدگی زنجیره Promises را کاهش می دهد.

مثال:

async function fetchData() {
return ‘data’;
}

async function processData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}

processData();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

در حالی که تماس‌های برگشتی پایه‌ای را برای مدیریت عملیات ناهمزمان در جاوا اسکریپت ایجاد کردند، Promises به طور قابل توجهی خوانایی، قابلیت نگهداری و قابلیت‌های مدیریت خطا کد ناهمزمان را بهبود بخشیده است. درک چگونگی و زمان استفاده موثر از این ابزارها برای توسعه جاوا اسکریپت مدرن بسیار مهم است. با وعده ها و async/await نحو، توسعه دهندگان می توانند کدهای تمیزتر و قابل مدیریت تر بنویسند و راه را برای برنامه های کاربردی قوی تر هموار کنند.

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();