Magic of Axios Interceptors: A Deep Dive

این را تصور کنید: شما در حال ساختن یک برنامه شیک آماده تولید هستید و تماس‌های API شما به چپ، راست و مرکز پخش می‌شوند. اما پس از آن، یک خطای API وحشی ظاهر می شود! اکنون در حال تقلا هستید تا بفهمید توکن شما کجا رفته است، چرا درخواست شما مجاز نیست و آیا واقعاً همه خطاهای موجود را دیده‌اید یا خیر. آشنا به نظر می رسد؟ رهگیرهای Axios را وارد کنید – بهترین دوست جدید شما برای مدیریت درخواست‌ها و پاسخ‌های HTTP مانند یک حرفه‌ای.

به هر حال رهگیرهای Axios چیست؟

رهگیرها را به‌عنوان پرکننده‌هایی برای تماس‌های API خود در نظر بگیرید. آنها پشت دروازه می نشینند و تصمیم می گیرند که چه چیزی وارد (درخواست ها) و چه چیزی (پاسخ) می شود. آیا نیاز به پیوست کردن یک نشانه احراز هویت به هر درخواست دارید؟ رهگیر. آیا می خواهید تمام خطاهای 404 خود را در یک مکان پیدا کنید؟ رهگیر. به دنبال ثبت هر تماس API هستید؟ بله، شما آن را حدس زدید – رهگیر.

چرا باید اهمیت دهید؟

معامله اینجاست: اگر استفاده می کنید fetch، شما به صورت دستی سرصفحه ها را اضافه می کنید و خطاها را مدیریت می کنید تک تک درخواست ها. خسته کننده است، درست است؟ رهگیرهای Axios تمام دیگ بخار را در یک مکان مدیریت می‌کنند، و در زمان و نیروی مغز برای چیزهای مهم صرفه‌جویی می‌کنند – مانند نام‌گذاری متغیرها بهتر از data1 و data2.

TL;DR:

• منطق متمرکز: یک بار بنویس، همه جا از آن استفاده کن.
• رسیدگی به خطا: خطاها را در سطح جهانی مدیریت کنید، مانند یک رئیس.
• مدیریت توکن: به طور خودکار سرصفحه ها را پیوست کنید یا نشانه ها را به روز کنید.
• تبدیل داده ها: داده های درخواست/پاسخ را در لحظه تغییر دهید.
• اشکال زدایی آسان شد: ثبت هر تماس بدون لمس یک تابع API.

تنظیم مرحله: نصب Axios

اول از همه، اجازه دهید Axios را نصب کنیم:

npm install axios

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

yarn add axios

و بوم! Axios آماده رول است.

رهگیر درخواست توانا

رهگیرهای درخواست به شما امکان می دهند درخواست های خود را قبل از ارسال تغییر دهید. در اینجا به این صورت است:

مثال 1: افزودن سرصفحه های مجوز

import axios from 'axios';

axios.interceptors.request.use(
  (config) => {
    // Attach the token to every request
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // Handle request error
    return Promise.reject(error);
  }
);

// Now every request carries your token
axios.get('/api/protected').then(console.log).catch(console.error);

چرا این عالی است؟ با fetch، شما این کار را انجام می دهید:

const token = localStorage.getItem('authToken');
fetch('/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
  .then((response) => response.json())
  .then(console.log)
  .catch(console.error);

تکراری به نظر می رسد، اینطور نیست؟ با Axios، این یکی است و تمام شده است.

نجات دهنده: رهگیر پاسخ

رهگیرهای پاسخ داده ها را در راه بازگشت می گیرند. آیا می خواهید پیام های خطا را استاندارد کنید یا پاسخ ها را ثبت کنید؟ اینجا انجامش بده

مثال 2: مدیریت خطای جهانی

axios.interceptors.response.use(
  (response) => {
    // Do something with response data
    return response.data;
  },
  (error) => {
    // Handle errors globally
    if (error.response.status === 401) {
      alert('Unauthorized! Please log in again.');
    } else if (error.response.status === 404) {
      console.error('Resource not found:', error.config.url);
    } else {
      console.error('Something went wrong:', error.message);
    }
    return Promise.reject(error);
  }
);

axios.get('/api/unknown').catch((err) => console.error(err));

با fetch، شما به این نیاز دارید:

fetch('/api/unknown')
  .then((response) => {
    if (!response.ok) {
      if (response.status === 401) {
        alert('Unauthorized! Please log in again.');
      } else if (response.status === 404) {
        console.error('Resource not found');
      }
    }
    return response.json();
  })
  .catch((err) => console.error('Fetch error:', err));

آیا مچ دست شما هنوز خسته شده است؟

موارد استفاده پیشرفته

مثال 3: تبدیل درخواست ها

آیا نیاز به JSON.stringify برخی از داده ها قبل از ارسال آن دارید؟ مشکلی نیست

axios.interceptors.request.use((config) => {
  if (config.data) {
    config.data = JSON.stringify(config.data);
  }
  return config;
});

مثال 4: رفرش کردن خودکار توکن ها

اگر API شما 401 را به دلیل منقضی شدن توکن برمی گرداند، چرا آن را به طور خودکار رفرش نکنید؟

axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      const refreshToken = localStorage.getItem('refreshToken');
      const { data } = await axios.post('/api/refresh-token', { refreshToken });
      localStorage.setItem('authToken', data.token);
      error.config.headers.Authorization = `Bearer ${data.token}`;
      return axios(error.config); // Retry the original request
    }
    return Promise.reject(error);
  }
);

اکنون کاربران شما می توانند بدون مشکل وارد سیستم شوند.

چرا Axios Interceptors در تولید می درخشد؟

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

حکم: Axios در مقابل Fetch

Fetch برای درخواست‌های سریع و ساده عالی است، اما برای برنامه‌های آماده تولید که به مقیاس‌پذیری، سازگاری و قابلیت نگهداری نیاز دارند، Axios با رهگیرها راه حلی است.

کلمات پایانی

رهگیرهای Axios مانند سس مخفی در اسپاگتی API شما هستند. آنها قدرتمند، همه کاره هستند و شما را از تعداد زیادی کار تکراری نجات می دهند. چه در حال مدیریت نشانه‌ها، استانداردسازی مدیریت خطا یا تغییر داده‌ها باشید، رهگیرها به شما امکان می‌دهند پایگاه کد خود را تمیز و کارآمد نگه دارید.

بنابراین، ادامه دهید، تماس‌های API خود را تحت درمان رهگیر قرار دهید—خود آینده شما از شما تشکر خواهد کرد!

🌐 با من ارتباط برقرار کن

بیایید با هم ارتباط برقرار کنیم و چیزی عالی بسازیم! 🚀