Web Devs

#Promise
#Javascript

کاربرد Promise در جاوا اسکریپت یا React Native

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

خب حالا این به چه درد میخورد؟ برخی از کارها هست در برنامه ما که نمی دانیم دقیقا کی اجرایش به اتمام می رسد. این کارها مثل سایر خطوط کد ما خطی اجرا نمی شوند. مثلا یک در خواست Ajax یا fetch . شبکه دارای تاخیر است. ارسال درخواست و دریافت پاسخ از سمت سرور اندکی طول میکشد. خب ما که نمی توانیم کل برنامه را معطل رسیدن پاسخ سرور کنیم. اگر اینکار کنیم برنامه کند میشود. اصطلاحا دارای لگ می شود و برای کاربر مشهود است.

پس برای جلوگیری از این مشکل جاوااسکریپت این نوع از کدها را بصورت موازی با سایر کدها اجرا می کند و منتظر رسیدن پاسخ سرور نمی ماند. اصطلاحا می گوییم بصورت غیر همزمان یا async اجرا می کند. در حالت نرمال که پس از اجرای هر خط کد به خط بعدی می رود می گوییم sync اجرا می شود.
پس promise برای دستورات async است. پس سناریو کلی اینگونه می شود:
شما یک درخواست مثلا ajax ایجاده کرده و برای سرور می فرستید.نمی دانید پاسخ دقیقا کی می رسد. توابعی را که بعد از رسیدن پاسخ باید اجرا شود به promise می دهید.می روید سراغ اجرای خطوط بعدی کد Promise هم به شما قول می دهد وقتی پاسخ از سرور رسید توابع مورد نظر شما را اجرا کند.
در مثال زیر به نحوه ایجاد یک Promise دقت کنید:

 let myFirstPromise = new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code.
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

@ABlueDeveloper

ورودی constructor آبجکت promise دو تابع به نام resolve و reject است. هنگام اجرای موفقت آمیز درخواست async ما تابع resolve و هنگام اجرای ناموفق آن تابع reject را فراخوانی می کنیم.
به یک مثال دیگر که کاربرد Promise در XMLHttpRequest را نشان می دهد دقت کنید:

 function myAsyncFunction(url) { return new Promise((resolve, reject) => {    const xhr = new XMLHttpRequest();  xhr.open("GET", url);    xhr.onload = () => resolve(xhr.responseText);   xhr.onerror = () => reject(xhr.statusText);    xhr.send();  });}

طور دیگری هم می تواند از promise استفاده کرد. آبجکت Promise دارای دو تابع به نام then و catch است که ترتیب در زمان اجرای موفقیت آمیز و غیر موفقیت آمیز کد async ، تابع ورودی خود را اجرا می کنند. خود then و catch نیز آبجکت promise بر می گردانند. بنابراین می توان چندیدن تا از آنها را بصورت زنجیر یا chain پشت هم بکار برد.
به کاربرد این دوتابع در fetch دقت کنید. این مثال می تواند در ری اکت نیتیو هم کاربرد داشته باشد.
تابع fetch کارش ارسال درخواست http است و خود promise بر می گرداند.

 function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

برگرفته از سایت جعبه آبی

@ABlueDeveloper

776 viewsedited 06:17