Axios ב-React Native: אינטרספטורים, רענון טוקן וטיפוסים

למה Axios, ולא fetch?

ביישומי React Native בייצור, אנו נתקלים לעיתים קרובות במשימה של הגדרת לקוח HTTP. במבט ראשון, fetch עובד, אבל בתרחישים אמיתיים עם אימות, פסקי זמן וביטול בקשות, הוא דורש קוד בונוס נוסף. Axios פותר את הבעיות האלה, אבל ההגדרה שלו חייבת להיות מחושבת.

בפועל, Axios מאיץ את הפיתוח פי 2: במקום לבדוק ידנית response.ok ולנתח JSON, אתה מקבל טרנספורמציה אוטומטית וטיפול מובנה בשגיאות. באחד הפרויקטים שלנו (אפליקציית פינטק עם יותר מ-50,000 משתמשים), המעבר מ-fetch ל-Axios הפחית באגים ב-30% רק באמצעות טיפול מרכזי בקוד 401, וחסך כ-$2,000 בעלויות ניפוי באגים במשך 6 חודשים. יתר על כן, Axios מאפשר הגדרת פסק זמן יחיד (למשל, 10 שניות) וממיר תגובות אוטומטית.

איך להגדיר חידוש אוטומטי של טוקן?

אינטרספטורים הם תכונת מפתח של Axios. בעזרתם, אנו מיישמים חידוש חלק של טוקן גישה על 401. אנו יוצרים מופע מוגדר טיפוסים:

import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';

const apiClient: AxiosInstance = axios.create({
  baseURL: process.env.API_BASE_URL ?? 'https://api.example.com/v1',
  timeout: 10_000,
  headers: {
    'Content-Type': 'application/json',
  },
});

כעת אנו מוסיפים אינטרספטור בקשות שמזריק את טוקן ה-Bearer, ואינטרספטור תגובות שתופס 401 ומבצע חידוש:

apiClient.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = tokenStore.getAccessToken();
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  }
);

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const newToken = await tokenStore.refresh();
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return apiClient(originalRequest);
      } catch {
        tokenStore.clear();
        navigationRef.navigate('Login');
      }
    }
    return Promise.reject(error);
  }
);

הדגל import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios'; const apiClient: AxiosInstance = axios.create({ baseURL: process.env.API_BASE_URL ?? 'https://api.example.com/v1', timeout: 10_000, headers: { 'Content-Type': 'application/json' }, }); מונע לולאות אינסופיות — בלעדיו, חידוש שנכשל היה גורם ל-401 נוסף. תיעוד Axios ממליץ על גישה זו. לאחר חידוש מוצלח, הבקשה המקורית נשלחת שוב עם הטוקן החדש.

יישום שלב אחר שלב של חידוש טוקן

1. צור מופע axios עם כתובת בסיס ופסק זמן.
2. באינטרספטור הבקשות, הוסף את טוקן ה-Bearer מהאחסון.
3. באינטרספטור התגובות, על 401 ללא דגל _retry, בצע חידוש.
4. בהצלחה, עדכן את הכותרת ונסה שוב את הבקשה דרך apiClient.
5. בכישלון, נקה טוקנים והפנה לדף התחברות.

אילו בעיות פותר הגדרת Axios נכונה?

הגדרת Axios נכונה מבטלת מספר בעיות אופייניות. ראשית, טיפול מרכזי בקודי 401 ו-403 חוסך זמן בכתיבת בדיקות חוזרות בכל בקשה. שנית, ביטול אוטומטי של בקשות ביציאה מהמסך מפחית עומס זיכרון: בפרויקט אחד זה נתן שיפור ביצועים של 15% בניווט מהיר. שלישית, טיפוס תגובות באמצעות TypeScript תופס שגיאות בזמן קומפילציה, ומקצר את זמן ניפוי הבאגים פי 3.

מה כלול בהגדרת Axios סוהר?

אנו מציעים הגדרה מלאה של שכבת הרשת, כולל תיעוד וסקירת קוד:

• יצירת לקוח API מוגדר טיפוסים עם כתובת בסיס אחת;
• אינטרספטור אימות עם חידוש אוטומטי של טוקן (עם דגל _retry);
• רישום במצב פיתוח באמצעות AxiosRequestConfig;
• טיפול בשגיאות (401, רשת, 500) עם הודעות מותאמות;
• אינטגרציה עם React Query או SWR לשמירה במטמון וביטול מטמון;
• ביטול בקשות בניקוי useEffect באמצעות AbortController;
• דוגמאות בקשות ומוקי בדיקה.

התוצאה היא שכבת רשת יציבה ללא באגים אופייניים. ההגדרה הסוהר שלנו עולה $300–$600 וכוללת שעתיים של תמיכה. הזמינו עכשיו וקבלו ייעוץ לפרויקט שלכם.

איך לטיפוס תגובות ולבטל בקשות?

טיפוס תגובות תופס שגיאות בזמן קומפילציה. אנו משתמשים בגנריקה של Axios:

interface PaginatedResponse<T> {
  data: T[];
  meta: {
    total: number;
    page: number;
    perPage: number;
  };
}

async function getProducts(page: number): Promise<PaginatedResponse<Product>> {
  const { data } = await apiClient.get<PaginatedResponse<Product>>('/products', {
    params: {
      page,
      per_page: 20,
    },
  });
  return data;
}

ביטול בקשות ביציאה מהמסך חוסך זיכרון: צור AbortController והעבר את ה-signal שלו לבקשה. קרא ל-_retry בניקוי useEffect. בפרויקט אחד, זה הפחית את עומס ה-RAM ב-15% במהלך ניווט מהיר.

השוואה: fetch לעומת Axios

מניסיוננו, Axios פרודוקטיבי פי 2 מ-fetch עבור יישומי ייצור. הנה השוואה מפורטת:

שגיאות אופייניות ופתרונות

למידע נוסף על יכולות Axios, ראה את התיעוד הרשמי.

לוחות זמנים ואחריות

לצוות שלנו יש יותר מ-5 שנות ניסיון בפיתוח יישומי React Native והוא השלים יותר מ-30 פרויקטים, המעבדים יותר ממיליון בקשות בחודש. הגדרה בסיסית אורכת 3–6 שעות; אינטגרציה עם שמירה במטמון וטיפול מקיף בשגיאות אורכת 1–2 ימים. כל העבודה מגיעה עם אחריות ליציבות וסקירת קוד. צרו קשר לקבלת הערכה מדויקת לפרויקט שלכם.