جاوا اسکریپت Async: دریافت داده از API خارجی

دریافت داده از API خارجی - قسمت اول

در این قسمت از سری جاوا اسکریپت Async می خواهیم به دریافت داده از API خارجی بپردازیم. منظور من از API خارجی هر API ای است که روی کامپیوتر خودمان (محلی) نباشد. کلیت روش هایی که در این قسمت به شما توضیح خواهم داد برای انواع API ها کار می کند بنابراین حتی اگر در حال ساخت API روی سرور خودتان باشید می توانید از روش های توضیح داده شده در این قسمت استفاده کنید. API ای که ما از آن استفاده خواهیم کرد به Chuck Noris Project معروف است و شما می توانید برای اطلاعات بیشتر به آدرس ICNDB.com/api مراجعه کنید.

آدرس این وب سایت مخفف عبارت Internet Chuck Noris Database به معنی «پایگاه داده ی اینترنتی چاک نوریس» است. چاک نوریس یکی از بازیگران بسیار محبوب و مطرح سینمای آمریکا بوده است و جوک های فراوانی برای او ساخته شده است. این وب سایت درخواست AJAX ما را قبول کرده و در عوض یک عدد جوک در مورد چاک نوریس به صورت رندوم برای ما ارسال می کند.

ما در مقالات بعد بیشتر در مورد API ها صحبت می کنیم اما فعلا باید بدانید که هر API متفاوت است و کار کردن با آن به توسعه ی دهنده ی آن سایت مربوط است. البته مدل هایی برای نزدیک کردن این API ها ارائه شده است (مثلا REST API) اما هنوز هم ریزه کاری های هر API مخصوص به خودش است. به طور مثال من به عنوان توسعه دهنده ی یک وب سایت خاص API ای تعریف می کنم که مقدار posts/joke را قبول می کند و یک جوک را به ما پس می دهد اما اگر یک توسعه دهنده ی دیگر بخواهد عینا همین API من را بسازد می تواند posts/jokes یا database/jokes یا posts/myjokes و ... را پیاده سازی کند بنابراین هر دوی ما با اینکه دقیقا یک API را ساخته ایم اما روش استفاده از آن ها متفاوت خواهد بود.

هر زمان که بخواهید از یک API استفاده کنید حتما باید به documentation آن مراجعه کنید و هر API عمومی حتما و حتما یک API خاص برای خودش دارد و البته documentation خاصی را برای شما می فرستد. به طور مثال در همین ایران خودمان برای کار با API بانک های مختلف و ایجاد درگاه پرداخت روی سایت خود باید فایل pdf مربوط به توضیحات API که توسط بانک برای شما ارسال می شود را مطالعه کنید تا بتوانید با بانک ارتباط برقرار کنید.

مثلا در وب سایت بالا که خدمتتان عرض کردم (پروژه ی چاک نوریس) برای دریافت یک جوک تصادفی باید درخواست خود را به شکل زیر ارسال کنید:

api.icndb.com/jokes/random

با ارسال درخواست به آدرس بالا، یک پاسخ به شکل یک شیء JSON برای شما ارسال خواهد شد که دارای یک key به نام type است. type نتیجه ی درخواست را توضیح می دهد، آیا درخواست به شکل صحیح ارسال شده است و نتیجه ی آن چه بوده است؟ اگر همه چیز طبق مراد پیش برود مقدار type برابر با success خواهد بود. در صورتی که type برابر success باشد، پاسخ ما دارای یک key دیگر به نام value است که خودش یک شیء دیگر است و حاوی id (شماره ی جوک) و joke (متن جوک) خواهد بود. همچنین اگر بخواهید چندین جوک را دریافت کنید (مثلا 3 جوک) می توانید از ساختار زیر استفاده نمایید:

api.icndb.com/jokes/random/3

بنابراین برای هر API باید به documentation آن مراجعه کرد. برای شروع یک فایل index.html و یک فایل app.js خواهیم داشت. محتوای فایل index.html به شکل زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <title>Chuck Norris Joke Generator</title>
</head>
<body>
  <div class="container">
    <h2>Chuck Norris Joke Generator</h2>
    <form>
      <div>
        <label for="number">Number of jokes</label>
        <input type="number" id="number">
      </div>
      <div>
        <button class="get-jokes">Get Jokes</button>
      </div>
    </form>
    <ul class="jokes"></ul>
  </div>

  <script src="app.js"></script>
</body>
</html>

یعنی یک فرم ساده خواهیم داشت که برایمان جوک های مربوط به چاک نوریس را دریافت می کند. اولین قدم تعریف یک event-listener است تا با کلیک روی دکمه ی Get Jokes یک یا چند جوک در مورد چاک نوریس دریافت کنیم بنابراین وارد فایل app.js می شویم:

document.querySelector('.get-jokes').addEventListener('click', getJokes);

ما تابع getJokes را تعریف نکرده ایم بنابراین قدم بعدی تعریف این تابع است. من برای تست کردن این event-listener یک متن ساده را log می کنم:

function getJokes(e) {
    console.log('get jokes');

    e.preventDefault();
}

بهتر است همیشه event-listener های خود را در همان زمان تعریف شدن تست کنید چرا که برخی اوقات تمام event-listener را می نویسید و بعدا با مشکل برخورد می کنید. در این وضعیت تصور می کنید که مشکل شما از کدهای داخل event-listener است و ممکن است مدتی طولانی را به بررسی کدهای داخل اختصاص دهید در حالی که مشکل از نبود یک نقطه یا اشتباه گذاشتن id مربوط به دکمه بوده است. با اجرای دستور بالا نتیجه ی زیر را در کنسول مرورگر می بینیم:

get jokes

حالا باید عدد وارد شده توسط کاربر در فرم را دریافت کنیم. این عدد وارد شده مشخص می کند که کاربر چند عدد جوک می خواهد:

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;

    e.preventDefault();
}

البته راه های مختلفی برای دریافت اطلاعات این فرم وجود دارد اما من روش querySelector را انتخاب کرده ام. همچنین می توانیم برای تست کردن این کد آن را log کنیم:

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;
    console.log(number);

    e.preventDefault();
}

حالا اگر کاربر مثلا عدد 4 را در فرم وارد کرده و روی دکمه کلیک کند، در کنسول مرورگر عدد 4 را دریافت خواهیم کرد بنابراین کد ما سالم است. آیا می توانید حدس بزنید که مرحله ی بعدی چیست؟ در قسمت بعد پروژه را تکمیل خواهیم کرد.