دریافت داده های خارجی در ری اکت

برنامه هایی که تا به اینجا ایجاد می کردیم، همگی استاتیک بودند. در این درس می خواهیم داده هایی را از یک سرور از راه دور دریافت و در برنامه نمایش دهیم.

اجرای یک درخواست برای داده های خارجی

در حالت عادی چرخه کاری مرورگرها بصورت غیرهمزمان است. هنگامی که مرورگر کدهای html را دریافت کند، محتوای کدهای html را تجزیه کرده و آنها را تبدیل به یک آبجکت درختی می کند ( به این آبجکت درختی معمولاً آبجکت DOM یا درخت DOM هم می گویند).

هنگامی که مرورگر آبجکت DOM را تجزیه می کند، در صورت برخورد با فایل های خارجی مثل <Link/> و تگ های <script/>، آنها را بصورت موازی درخواست می کند، اما بصورت غیرهمزمان آنها را اجرا می کند.

اما چطور می توان داده های خارج از سایت را دریافت کرد؟ داده هایی که برای آنها درخواست ایجاد می کنیم، در زمان اجرای برنامه در دسترس نیستند، اما این کار مشکلی در روند اجرای برنامه بوجود نمی آورد، چون درخواستی که برای دریافت این داده ها ایجاد می کنیم، بصورت غیرهمزمان است.

در حقیقت، بعد از ایجاد یک درخواست مدتی طول می کشد تا جواب از سمت API به برنامه ارسال شود و بعد از آن می توانیم توسط کدهای جاوا اسکریپت داده ها را مدیریت کنیم. برای شروع، ابتدا یک درخواست HTTP را توسط یک کتابخانه ای به نام fetch ایجاد می کنیم.

کتابخانه Fetch

برای استفاده از کتابخانه fetch باید ابتدا آنرا در برنامه ای که قبلاً ایجاد کرده بودیم، نصب کنیم. برای اینکار ترمینال را باز کرده و از دستور زیر برای نصب این کتابخانه استفاده کنید.

npm install --save whatwg-fetch

نصب کتابخانه fetch جهت کار با API در ری اکت — نصب کتابخانه fetch

بعد از نصب این کتابخانه می توانیم یک درخواست به سرور خارجی ارسال می کنیم. همچنین برای استفاده از این کتابخانه، باید آنرا به فایل src/App.js پروژه import کنیم:

import React, { Component } from 'react';
import 'whatwg-fetch';
// ...

آبجکت whatwg-fetch یکی از معدود کتابخانه هایی است که آن را به یک آبجکت global یا سراسری متصل می کنیم (در مرورگر، این آبجکت همان window است). بر خلاف کتابخانه ری اکت، در اینجا نیازی به کنترل کردن خروجی این کتابخانه (Export) که روی آبجکت سراسری قابل دسترس است، ندارید.

بعد از اینکه کتابخانه whatwg-fetch را به برنامه وارد کردید، حال می توانید با استفاده از متد ()fetch یک درخواست ایجاد کنید. اما قبل از اینکه یک درخواست واقعی را ایجاد کنیم.

تا به اینجای کار شما یاد گرفتید که چگونه از promise ها استفاده کنید. در درس بعدی به استفاده از متد fetch پرداخته و داده های خارجی را نمایش می دهیم.

برچسب‌ها: آموزش React