کتابخانه‌های شخص ثالث در React – استفاده از axios و async/await برای دریافت داده‌ها

مقدمه

در نسخه‌های قبلی اپلیکیشن، از fetch برای دریافت داده از API استفاده می‌کردیم. اما این API در برخی مرورگرهای قدیمی یا محیط‌های تست headless پشتیبانی نمی‌شود. برای حل این مشکل، می‌توان از کتابخانهٔ axios استفاده کرد که یک جایگزین پایدار و قدرتمند برای fetch است.

نصب و استفاده از axios

ابتدا axios را نصب می‌کنیم:

npm install axios

سپس آن را در فایل App.jsx وارد می‌کنیم:

import axios from 'axios';

در تابع دریافت داده‌ها، به‌جای fetch از axios.get() استفاده می‌کنیم:

const handleFetchStories = React.useCallback(() => {
  dispatchStories({ type: 'STORIES_FETCH_INIT' });
  axios
    .get(url)
    .then((result) => {
      dispatchStories({
        type: 'STORIES_FETCH_SUCCESS',
        payload: result.data.hits,
      });
    })
    .catch(() =>
      dispatchStories({ type: 'STORIES_FETCH_FAILURE' })
    );
}, [url]);

بازنویسی با async/await

برای خوانایی بیشتر، می‌توان از async/await به‌جای then/catch استفاده کرد:

const handleFetchStories = React.useCallback(async () => {
  dispatchStories({ type: 'STORIES_FETCH_INIT' });
  try {
    const result = await axios.get(url);
    dispatchStories({
      type: 'STORIES_FETCH_SUCCESS',
      payload: result.data.hits,
    });
  } catch {
    dispatchStories({ type: 'STORIES_FETCH_FAILURE' });
  }
}, [url]);

با استفاده از async/await، کد به‌صورت هم‌زمانی (synchronous-like) خوانده می‌شود و مدیریت خطا با try/catch ساده‌تر می‌شود.

مزایای استفاده از axios و async/await

• سازگاری بهتر با مرورگرهای قدیمی و محیط‌های تست
• عدم نیاز به تبدیل دستی پاسخ به JSON
• کاهش پیچیدگی کد با حذف تو در تویی then
• امکان استفاده از interceptors و تنظیمات پیشرفته

جمع‌بندی

استفاده از کتابخانه‌های شخص ثالث مانند axios در React باعث افزایش پایداری و قابلیت توسعه‌پذیری اپلیکیشن می‌شود. همچنین با استفاده از async/await، کد دریافت داده‌ها خواناتر و قابل مدیریت‌تر خواهد بود. این تکنیک‌ها برای پروژه‌های واقعی و مقیاس‌پذیر ضروری هستند.