اصطلاحات در REST و توابع callback

اصطلاحات در REST

در قسمت قبل کار با JSON در درخواست های AJAX را یاد گرفتیم اما تا حالا فقط با درخواست های GET (خواندن یا دریافت اطلاعات) در AJAX کار کرده ایم. در این قسمت می خواهم شما را به صورت تئوری با برخی از انواع درخواست های دیگر آشنا کنم و سپس به سراغ توضیح موضوعی به نام توابع callback می رسیم و آن ها را نیز بررسی خواهیم کرد. توابع callback تقریبا در تمام زبان های برنامه نویسی وجود دارند و یادگیری آن ها کمک بزرگی به توسعه ی انواع برنامه ها خواهد داشت.

مهم ترین متدهای درخواست های HTTP در AJAX به شرح زیر هستند:

• متد GET: برای دریافت و خواندن resource خاصی (مثلا یک فایل متنی یا اطلاعات برگردانده شده از یک سرور) استفاده می شود.
• متد POST: برای ثبت و ارسال داده ها برای پردازش و ثبت در یک resource (مثلا ساخت یک کاربر جدید، یا ثبت اطلاعات جدید و غیره) استفاده می شود.
• متد PUT: برای بروز رسانی یک resource خاص استفاده می شود. در این حالت resource ما از قبل ساخته شده است (توسط POST) و حالا می خواهیم چیزی که از قبل وجود داشته را ویرایش کنیم.
• متد DELETE: برای حذف یک resource استفاده می شود.

البته باید بدانید متدهای دیگری نیز وجود دارند اما چهار مورد بالا، متدهای اصلی هستند. به طور مثال:

• متد HEAD: دقیقا مثل GET است با این تفاوت که body را برنمی گرداند و فقط یک header برایتان ارسال می کند.
• متد OPTIONS: برای دریافت متدهای HTTP پشتیبانی شده استفاده می شود. به طور مثال ممکن است سروری از متد DELETE پشتیبانی نکند در این صورت می توانید با ارسال OPTIONS انواع متدهای پذیرفته شده را پیدا کنید (البته در صورتی که خود این متد پیاده سازی شده باشد).
• متد PATCH: برای بروز رسانی resource های جزئی و قسمت های خاص استفاده می شود.

مبحث بعدی که باید در مورد API ها بدانیم، endpoint ها هستند. اگر بخواهم به زبان ساده بگویم، Endpoint ها URL هایی هستند که برای انجام متدهای خاص به آن ها متصل می شویم. به طور مثال یکی از رایج ترین قالب های دریافت کاربران در یک REST API به شکل زیر است:

https://someurl.com/api/users

این URL یک Endpoint است که با متد GET تمام کاربران را به شما برمی گرداند. البته این یک مثال است و ممکن است این API فرضی حالتی داشته باشد که مشخص کند چند کاربر را برگرداند:

https://someurl.com/api/users/3

مثلا در اینجا 3 کاربر را انتخاب کرده ایم. همچنین ممکن است آدرس ما متفاوت باشد چرا که هر API متفاوت است، به طور مثال:

https://api.someurl.com/users/

از طرفی این آدرس فرضی برای کار با کاربران است و متد ارسال ما مشخص می کند که چه می خواهیم. به طور مثال اگر درخواست خود به URL زیر را با متد GET ارسال کنیم، کاربران به ما برگردانده می شوند:

https://someurl.com/api/users

اما اگر درخواست خود را با متد POST و اطلاعات مناسب به همین URL ارسال کنیم، می توانیم یک کاربر جدید بسازیم و دیگر کاربری به ما برگدانده نمی شود. بنابراین endpoint ها برای resource های خاص و مستقل از انواع متدها هستند، بلکه این متد ما است که رفتار آن ها را مشخص می کند. به طور مثال حتی اگر بخواهیم کاربری را ویرایش و بروز رسانی کنیم، اطلاعات جدید را به همان آدرس بالا ارسال خواهیم کرد.

توابع Callback

دلیل صحبت کردن ما در مورد توابع callback (صرف نظر از کاربرد و محبوبیت آن ها) این است که در جلسات بعد می خواهیم یک کتابخانه ی AJAX را از صفر بسازیم تا بتوانیم با استفاده از آن درخواست های AJAX را به آسانی پیاده سازی کنیم و نیازی نباشد هر بار شیء XHR و عملیات های تکراری را انجام دهیم. کتابخانه ای که در جلسات بعد خواهیم نوشت از توابع callback استفاده می کند و به همین دلیل می خواهم ابتدا شما را با آن ها آشنا کنم.

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

بگذارید یک مثال برایتان بزنم تا متوجه فایده ی callback ها بشوید. بسیاری از اوقات ما پست ها یا اطلاعات خاصی را از یک API دریافت می کنیم و از آنجایی که این API روی یک سرور دیگر است، دریافت آن ها طول خواهد کشید. در چنین مواقعی اگر مراقب نباشیم ممکن است تابع نمایش پست ها را زودتر از دریافت تمام پست ها (یا هر اطلاعات دیگری) اجرا کنیم و نتیجه این می شود که تمام پست ها نمایش داده نمی شوند. من با جاوا اسکریپت این تاخیر را شبیه سازی می کنم تا متوجه مشکل بشوید:

const posts = [
  {title: 'Post One', body: 'This is post one'},
  {title: 'Post Two', body: 'This is post two'}
];

function createPost(post) {
  setTimeout(function() {
    posts.push(post);
  }, 2000);
}

function getPosts() {
  setTimeout(function() {
    let output = '';
    posts.forEach(function(post){
      output += `<li>${post.title}</li>`;
    });
    document.body.innerHTML = output;
  }, 1000);
}

createPost({title: 'Post Three', body: 'This is post three'});

getPosts();

در این کد یک آرایه به نام posts داریم، یک تابع به نام createPost (برای دریافت پست ها از API فرضی) و یک تابع به نام getPosts (برای نمایش پست ها) نیز وجود دارد. اگر به حالت عادی هر دو تابع را مانند روش بالا صدا بزنیم (با اینکه createPost قبل از getPosts آمده و نباید مشکلی باشد) تنها Post one و Post two نمایش داده می شوند و پست سوم نمایش داده نخواهد شد. چرا؟ به دلیل اینکه 2 ثانیه طول می کشد تا پست ها از سرور دریافت شوند (تابع setTimeout برای createPost روی 2000 میلی ثانیه است) اما تابع نمایش پست ها فقط 1 ثانیه زمان می خواهد و این همان مشکل شایع ما است!

برای حل آن می توانیم از تابع getPosts به عنوان یک callback برای تابع createPost استفاده کنیم:

function createPost(post, callback) {
  setTimeout(function () {
    posts.push(post);
    callback();
  }, 2000);
}

function getPosts() {
  setTimeout(function () {
    let output = '';
    posts.forEach(function (post) {
      output += `<li>${post.title}</li>`;
    });
    document.body.innerHTML = output;
  }, 1000);
}

createPost({ title: 'Post Three', body: 'This is post three' }, getPosts);

حالا با اجرای این کد هر سه پست نمایش داده می شوند. این هنر callback ها است! حالا که با callback ها آشنا شدیم در قسمت بعد به سراغ نوشتن کتابخانه ی AJAX خودمان می رویم.