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

دریافت داده از API خارجی

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

در قسمت قبل توضیحاتی در رابطه با اصل پروژه (پروژه ی چاک نوریس به آدرس ICNDB.com/api) و تفاوت های موجود در هر نوعی از API را خدمت شما ارائه کردم. امیدوارم نکته ی اصلی این توضیحات را درک کرده باشید که برای کار با هر API خاصی باید documentation آن را مطالعه کنید چرا که هیچ قانون یکسانی برای API ها وجود ندارد، حتی زمانی که از الگوهای استاندارد و خاص مانند REST API استفاده کنیم. همچنین در قسمت قبل کدهای خود را با طراحی UI شروع کرده و به event-listener دکمه ی فرم رساندیم. برای تست این دکمه console.log انجام دادیم و مشکلی در نحوه ی اجرای کدها پیدا نکردیم. در این قسمت نوبت ایجاد شیء XHR و درخواست AJAX می باشد. ابتدا باید شیء XHR خود را مثل همیشه از طریق constructor آن (با کلمه ی new) ساخته و در یک متغیر قرار دهیم:

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

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    e.preventDefault();
}

پس از ساخت شیء xhr مثل همیشه از متد open استفاده کرده ایم اما به جای آنکه آدرس فایلی را به آن بدهیم باید آدرس ارائه شده در documentation را به آن بدهیم. من در آخر این آدرس عدد وارد شده توسط کاربر را نیز وارد کرده ام تا تعداد جوک ها به دلخواه کاربر مشخص شود.

حالا باید مشخص کنیم که پس از دریافت پاسخ با آن چه کار کنیم:

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

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function () {
        if (this.status === 200) {

        }
    }

    e.preventDefault();
}

برای این کار طبق معمول از متد onload استفاده می کنم و در یک شرط if چک می کنم که وضعیت درخواست حتما 200 باشد. حالا می توانیم پاسخ سرور را دریافت کرده و در یک متغیر قرار دهیم، البته این متغیر باید با تابع JSON.parse تبدیل به یک شیء جاوا اسکریپتی شود:

    xhr.onload = function () {
        if (this.status === 200) {
            const response = JSON.parse(this.responseText);

        }
    }

حالا می توانیم پاسخ را برای تست کردن log کنیم:

    xhr.onload = function () {
        if (this.status === 200) {
            const response = JSON.parse(this.responseText);
            console.log(response);
        }
    }

اگر در فرم عددی وارد کرده (مثلا 4) و فرم را ثبت کنیم، در قسمت کنسول مرورگر شاهد پاسخی شبیه به پاسخ زیر خواهیم بود:

پاسخ ارسال شده از سمت API (توضیحات این پاسخ در documentation سایت اصلی موجود است)
پاسخ ارسال شده از سمت API (توضیحات این پاسخ در documentation سایت اصلی موجود است)

بنابراین فرآیند دریافت پاسخ از سمت API کامل شده و قسمت باقی مانده پیاده سازی داده ها در صفحه برای کاربر است. برای انجام این کار باید مطمئن شویم که type برگردانده شده برابر success باشد:

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

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function () {
        if (this.status === 200) {
            const response = JSON.parse(this.responseText);

            let output = '';

            if (response.type === 'success') {
                response.value.forEach(function (joke) {
                    output += `<li>${joke.joke}</li>`;
                });
            } else {
                output += '<li>Something went wrong</li>';
            }

            document.querySelector('.jokes').innerHTML = output;
        }
    }

    e.preventDefault();
}

برای نمایش اطلاعات برگردانده شده از API ابتدا یک متغیر به نام output را تعریف کرده ایم که مقدار خاصی ندارد، سپس با یک شرط if مطمئن شده ایم که type برابر success باشد. مرحله ی بعد، مرحله ی مهمی است! از آنجایی که ممکن است کاربر درخواست بیشتر از 1 جوک را داشته باشد ما از حلقه ی forEach استفاده کرده ایم اما نکته ی مهم اینجاست که باید حلقه ی forEach را روی value تنظیم کنیم نه روی کل شیء برگشت داده شده! اگر به تصویر بالا از log شدن پاسخ نگاه کنید متوجه می شوید که پاسخ برگردنده شده یک شیء است! همانطور که می دانید ما نمی توانیم درون یک شیء گردش کنیم و از حلقه ها استفاده نماییم (این کار مخصوص آرایه ها است) بنابراین حلقه ی forEach را روی response.value قرار داده ایم نه روی خود response!

سپس برای هر جوک را درون یک <li> قرار داده ایم. برای مقدار joke.joke که در <li> قرار گرفته است باید توضیح بدهم که joke اول مربوط به هر جوک در یک گردش است (پارامتر برای حلقه) و joke دوم یکی از key های داخل value (پاسخ سرور API) می باشد. از طرفی در صورتی که type برابر چیزی به غیر از success باشد یعنی به مشکل برخورده ایم و بنابراین output را روی یک <li> می گذاریم که می گوید something went wrong (یعنی مشکلی به وجود آمده است). در نهایت نیز جوک های موردنظر را با استفاده از innerHTML درون صفحه نمایش داده ایم. یادتان نرود که در آخر کار، شیء xhr را send کنید:

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

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

  const xhr = new XMLHttpRequest();

  xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

  xhr.onload = function () {
    if (this.status === 200) {
      const response = JSON.parse(this.responseText);

      let output = '';

      if (response.type === 'success') {
        response.value.forEach(function (joke) {
          output += `<li>${joke.joke}</li>`;
        });
      } else {
        output += '<li>Something went wrong</li>';
      }

      document.querySelector('.jokes').innerHTML = output;
    }
  }

  xhr.send();

  e.preventDefault();
}

حالا اگر به مرورگر رفته و آن را تست کنید، کدها بدون مشکل اجرا می شوند. توجه داشته باشید که تمام API ها بدین سادگی نیستند! مثلا برخی از API های موجود (حتی برخی از API های عمومی) دارای سیستم احراز هویت هستند که باید در آن ها ثبت نام کرده و برنامه ی خودتان را نیز در آن ها ثبت کنید. آن ها پس از ثبت نام یک Token یا API Key به شما می دهند که مخصوص شما است و نباید با کسی به اشتراک گذاشته شود، سپس با استفاده از سیستم هایی مانند سیستم معروف oAth برای شناسایی شما و برنامه هایتان استفاده می کنند. به طور مثال گیت هاب به شما اجازه ی ارسال حدود 100 درخواست در روز را می دهد و اگر تعداد درخواست هایتان بیشتر از آن باشد باید در گیت هاب ثبت نام کرده و برنامه ی خودتان را به آن ها معرفی کنید.

در قسمت های بعدی با REST API ها کار خواهیم کرد و همچنین به سراغ متدهای دیگر HTTP می رویم (تا اینجای کار تنها از متد GET استفاده کرده ایم).

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت نامتقارن توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (4 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دولوپر
23 آذر 1401
اولین جایی هست که می بینم مبحث API ها رو با کیفیت بالا و به سادگی هرچه تمام آموزش میده... تا اینجا که واقعا راضی بودم و لذت بردم... خسته نباشید و آرزوی موفقیت دارم...

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محسن
25 مهر 1400
سلام آدرس این api کار نمیکنه .باید http رو به https تغییر بدید تا کار کنه.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
06 دی 1398
سلام دوست عزیز، کد هاتون رو دوباره چک کنید. اگر باز هم نشد این سورس کد پروژه هست که می تونید اون رو توی مرورگر اجرا کنید و تفاوتش رو با کد های خودتون ببینید: https://drive.google.com/open?id=1pVmlerK6aBMELZ7rl-uAI6uZrRTT9O4m اتصالتون به اینترنت رو هم چک کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

میثم
05 دی 1398
برنامه ای ک نوشتین اصلا کار نداد

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.