نحوه استفاده از Axios Interceptors برای رسیدگی به پاسخ های خطای API

Summarize this content to 400 words in Persian Lang
هنگام ساختن برنامه های کاربردی وب مدرن، رسیدگی به تماس های API و پاسخ های آنها بخش مهمی از توسعه است. Axios، یک کتابخانه محبوب جاوا اسکریپت، درخواست های HTTP را ساده می کند، اما دارای ویژگی های داخلی مانند رهگیرها که به توسعه دهندگان اجازه می دهد تا پاسخ ها و خطاها را به شیوه ای ساده تر و کارآمدتر مدیریت کنند.

در این مقاله، ما بر روی استفاده از رهگیرهای Axios برای مدیریت موثر پاسخ‌های خطای API تمرکز می‌کنیم و به شما این امکان را می‌دهد تا مدیریت خطا را در کل برنامه خود استاندارد کنید.

Axios چیست؟

Axios یک سرویس گیرنده HTTP مبتنی بر وعده برای جاوا اسکریپت است که از آن پشتیبانی می کند async/await نحو برای درخواست به APIها. این محبوب است زیرا استفاده از آن ساده است و قابلیت های آن به راحتی قابل افزایش است رهگیرها.

مثال پایه Axios:

import axios from ‘axios’;

axios.get(‘/api/data’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(‘Error fetching data:’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در حالی که این مثال نحوه رسیدگی به درخواست ها و خطاها را نشان می دهد .then و .catch، استفاده از رهگیرها می تواند کد شما را زمانی که نیاز به مدیریت چندین درخواست API دارید کارآمدتر کند.

Axios Interceptors چیست؟

Axios رهگیرها توابعی هستند که به شما این امکان را می دهند که درخواست ها و پاسخ ها را قبل از پردازش توسط آنها رهگیری و رسیدگی کنید .then یا .catch. این به ویژه زمانی مفید است که شما نیاز به اعمال پیکربندی های رایج برای همه درخواست ها یا رسیدگی به پاسخ های خطا به روشی یکسان دارید.

دو نوع اصلی رهگیر وجود دارد:

درخواست رهگیر: برای اصلاح یا افزودن سرصفحه ها، نشانه ها یا سایر تنظیمات به درخواست ها قبل از ارسال استفاده می شود.

رهگیر پاسخ: برای رسیدگی به پاسخ ها یا خطاها در سطح جهانی، از جمله ثبت گزارش یا تلاش مجدد درخواست ها در صورت لزوم استفاده می شود.

چرا از رهگیرهای پاسخ استفاده کنیم؟

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

با یک رهگیر پاسخ، می‌توانید تمام پاسخ‌های خطا را در یک مکان مدیریت کنید و از یک رویکرد ثابت برای رسیدگی به خطاها در سراسر برنامه خود اطمینان حاصل کنید.

راه اندازی یک رهگیر پاسخ Axios

1. Axios را نصب کنید

ابتدا مطمئن شوید که Axios را در پروژه خود نصب کرده اید:

npm install axios

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. یک نمونه Axios ایجاد کنید

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

import axios from ‘axios’;

const apiClient = axios.create({
baseURL: ‘https://api.example.com’, // Replace with your API base URL
headers: {
‘Content-Type’: ‘application/json’,
Accept: ‘application/json’,
},
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. یک رهگیر پاسخ اضافه کنید

شما می توانید یک را اضافه کنید رهگیر پاسخ برای گرفتن و رسیدگی به خطاها قبل از رسیدن به شما .then یا .catch در تماس های API فردی شما مسدود می شود.

apiClient.interceptors.response.use(
(response) => {
// If the response is successful (status code 2xx), return the response data
return response;
},
(error) => {
// Handle errors globally
if (error.response) {
// Server responded with a status code out of 2xx range
const statusCode = error.response.status;
const errorMessage = error.response.data.message || ‘An error occurred’;

// Handle different status codes accordingly
if (statusCode === 401) {
// Handle unauthorized error, for example by redirecting to login
console.error(‘Unauthorized access – redirecting to login’);
} else if (statusCode === 500) {
// Handle server errors
console.error(‘Server error – try again later’);
} else {
// Handle other types of errors
console.error(`Error ${statusCode}: ${errorMessage}`);
}
} else if (error.request) {
// No response received (network error, timeout, etc.)
console.error(‘Network error – check your internet connection’);
} else {
// Something else happened during the request
console.error(‘Request error:’, error.message);
}

// Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
return Promise.reject(error);
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. برقراری تماس های API

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

// Example API call
apiClient.get(‘/users’)
.then(response => {
console.log(‘User data:’, response.data);
})
.catch(error => {
// This will be triggered if the error isn’t handled by the interceptor
console.error(‘Error fetching users:’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این تنظیمات، برای هر تماس API نیازی به نوشتن کد مدیریت خطا ندارید. رهگیر این منطق را متمرکز می کند و تماس های API شما را تمیزتر و نگهداری آسان تر می کند.

موارد استفاده عملی برای رهگیرهای Axios

1. به روز رسانی خودکار نشانه

اگر API شما از نشانه‌های احراز هویت (مثلاً JWT) استفاده می‌کند، ممکن است با وضعیتی مواجه شوید که در آن نشانه منقضی می‌شود و باید آن را به‌روزرسانی کنید. از رهگیرهای Axios می‌توان برای تازه‌سازی خودکار توکن استفاده کرد 401 Unauthorized پاسخ دریافت می شود.

apiClient.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
if (error.response.status === 401) {
try {
// Call a function to refresh the token
const newToken = await refreshAuthToken();
error.config.headers[‘Authorization’] = `Bearer ${newToken}`;
// Retry the original request with the new token
return axios(error.config);
} catch (refreshError) {
console.error(‘Token refresh failed:’, refreshError);
// Optionally redirect to login
return Promise.reject(refreshError);
}
}

return Promise.reject(error);
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. رسیدگی به خطاهای شبکه

اگر برنامه شما به API های خارجی متکی است، مشکلات شبکه می تواند یک مشکل رایج باشد. رهگیرهای Axios می توانند به ارائه پیام های خطای کاربر پسند در صورت خرابی شبکه کمک کنند.

apiClient.interceptors.response.use(
(response) => response,
(error) => {
if (!error.response) {
alert(‘Network error: Please check your internet connection’);
}
return Promise.reject(error);
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مزایای استفاده از Axios Interceptors

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

نتیجه گیری

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

Interceptors یکی از ویژگی های قدرتمند Axios است که می تواند برای طیف گسترده ای از موارد استفاده، از مدیریت به روز رسانی رمز تا نمایش پیام های خطای کاربر پسند در هنگام خرابی شبکه، استفاده شود. استفاده از رهگیرهای Axios را از امروز شروع کنید تا مدیریت خطا را ساده کنید و انعطاف پذیری برنامه خود را بهبود بخشید!

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

npm install axios

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',  // Replace with your API base URL
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

apiClient.interceptors.response.use(
  (response) => {
    // If the response is successful (status code 2xx), return the response data
    return response;
  },
  (error) => {
    // Handle errors globally
    if (error.response) {
      // Server responded with a status code out of 2xx range
      const statusCode = error.response.status;
      const errorMessage = error.response.data.message || 'An error occurred';

      // Handle different status codes accordingly
      if (statusCode === 401) {
        // Handle unauthorized error, for example by redirecting to login
        console.error('Unauthorized access - redirecting to login');
      } else if (statusCode === 500) {
        // Handle server errors
        console.error('Server error - try again later');
      } else {
        // Handle other types of errors
        console.error(`Error ${statusCode}: ${errorMessage}`);
      }
    } else if (error.request) {
      // No response received (network error, timeout, etc.)
      console.error('Network error - check your internet connection');
    } else {
      // Something else happened during the request
      console.error('Request error:', error.message);
    }

    // Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
    return Promise.reject(error);
  }
);

// Example API call
apiClient.get('/users')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    // This will be triggered if the error isn't handled by the interceptor
    console.error('Error fetching users:', error);
  });

apiClient.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.response.status === 401) {
      try {
        // Call a function to refresh the token
        const newToken = await refreshAuthToken();
        error.config.headers['Authorization'] = `Bearer ${newToken}`;
        // Retry the original request with the new token
        return axios(error.config);
      } catch (refreshError) {
        console.error('Token refresh failed:', refreshError);
        // Optionally redirect to login
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (!error.response) {
      alert('Network error: Please check your internet connection');
    }
    return Promise.reject(error);
  }
);