טיפים לביצוע בקשות HTTP באמצעות axios

axios היא ספרייה מדהימה שמאפשרת לבצע בקשות HTTP בצורה קלה ונעימה.
בפוסט זה אסביר על axios, על ההבדלים העיקריים מ-fetch ובעיקר אתן מספר טיפים לספרייה הנהדרת הזו.

אז מה זה axiox?

אז עבור מי שלא מכיר, תכירו – axios, אחת מהספריות הכי פופולאריות ב-JavaScript עם מיליוני הורדות בכל שבוע.
axios היא ספרייה שמאפשרת לנו לבצע בקשות HTTP כלומר get, post, put ו-delete באמצעות promises.
אם אתם מפתחים ב-Angular למשל, לא תזדקקו לספריה כזו מאחר ו-Angular הוא Framework שלם שמכיל בתוכו ממשק לביצוע בקשות HTTP.
מצד שני, אם אתם מפתחים בספרייה כדוגמת React או Vue.js, כדאי לכם להכיר ולהשתמש ב-axios ורוב הסיכויים שאתם כבר עושים זאת.
אם אתם כבר משתמשים ב-axios בפרויקטים שלכם כיום, אני מציע לכם לקרוא את המשך המאמר בכל זאת, אולי תלמדו משהו חדש 🙂

אבל מה רע ב-fetch?

אז קודם כל, מה זה fetch בכלל? fetch הוא ממשק JavaScript לביצוע בקשות HTTP ללא הצורך להתקין ספרייה חיצונית כדוגמת axios.
אין ספק ש-fetch הוא פתרון מעולה ואין בו שום דבר רע אבל יש מספר הבדלים בין fetch לבין axios שכדאי להכיר.

הבדל בכתיבת הבקשות ואופן קבלת הנתונים

על מנת שנוכל להבחין בהבדלים, הנה 2 דוגמאות לבקשת post באצעות fetch ובאמצעות axios:

fetch:

let apiUrl = 'https://example.com/api';
let options = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                firstName: 'John',
                lastName: 'Doe'
            })
        };
let res = await fetch(apiUrl, options);
if (res && res.ok) {
    let resData = await res.json();
}

axios:

let apiUrl = 'https://example.com/api';
let options = {
            method: 'POST',
            url: apiUrl,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                firstName: 'John',
                lastName: 'Doe'
            }
        };
let res = await axios(options);
if (res && res.status === 200) {
    let resData = await response.data;
}

הבדלים בכתיבת הבקשה

ניתן לראות מספר הבדלים באופן כתיבת הבקשה:

• ב-fetch הנתונים מועברים ב-body ואילו ב-axios ב-data
• ב-fetch ה-body חייב להיות stringified וב-axios הוא לא
• ב-fetch ה-url חייב להישלח כפרמטר (שורה 14)

הבדלים בקבלת התוצאה

ישנם גם הבדלים בעת קבלת הנתונים:

• יש הבדל באובייקט התוצאה שמתקבל ובאופן שבו ה-status code מתקבל
• כאשר משתמשים ב-fetch צריך להשתמש ב-json() בעת קבלת הנתונים

תמיכה בדפדפנים

חיסרון גדול ב-fetch הוא שהוא לא נתמך ב-IE, לעומת axios שנתמך באופן רחב יותר ואפשר להגיד נתמך לגמרי.

תמיכה בהגנת XSRF

יתרון גדול ל-axios הוא שהוא תומך בהגנה מ-XSRF.
מי שמעוניין לקרוא על XSRF יכול לקרוא את הערך בויקיפדיה.
בעמוד של axios ב-npm באחת הדוגמאות יש שימוש בזה.

טיפים ל-axios

אז כמו שכבר הבנו, axios היא ספרייה מעולה אבל מעבר לשימוש הפשוט, יש כמה פיצ'רים שכדאי להכיר שיעזרו לכם לחסוך בזמן, יהפכו את הבקשות שלכם למסודרות יותר וימנעו חזרה מיותרת על קוד.

ברירת מחדל גלובליים (Global defaults)

axios תומך בערכי ברירת מחדל גלובליים, למשל, במקום שה-url שפונה ל-api שלכם יופיע בכמה מקומות בקוד תוכלו לציין את כתובת ה-url פעם אחת כ-baseUrl ובכך כל בקשה שלכם תכיל בתוכה את ה-url הזה.
איך עושים זאת?
פשוט מאוד, מיד לאחר הייבוא של הספריה הוסיפו את השורה הבאה ושנו לכתובת ה-api שלכם כמובן.

axios.defaults.baseURL = 'https://example.com/api';

כך תיראה בקשה ללא השימוש ב-baseURL:

axios.post('https://example.com/api/users', data)
        .then(res => console.log(res))
        .catch(error => console.log(error))

וכך היא תיראה לאחר מכן:

axios.post('/users', data)
        .then(res => console.log(res))
        .catch(error => console.log(error))

ניתן להוסיף ערכי ברירת מחדל גם ל-headers, למשל:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

או להגדיר timeout לבקשה:

axios.defaults.timeout = 2200;

Custom instance

axios מאפשר לכם ליצור Instance (מופע) "נפרד" מה-instance ברירת המחדל ולו ניתן לקבוע ערכי ברירת מחדל שונים, לדוגמה:

const customInstance = axios.create ({
  baseURL : 'https://example.com/api2'
})

customInstance.defaults.timeout = 3000;
customInstance.defaults.headers.post['Accept'] = 'application/json'

Interceptors

דבר נפלא נוסף ב-axios הוא Interceptors.
אם אתם מפתחים ב-Express למשל, אתם ודאי יודעים מה זה middlewares, באופן כללי, זה בדיוק אותו הדבר.
Interceptors ב-axios מאפשר לבצע פעולה לפני ביצוע של כל בקשה (request) או קבלת נתונים (response).
לדוגמה הדפסת ה-method של הבקשה וה-url בכל request אל ה-api:

axios.interceptors.request.use(req => {
  console.log(`The request method is: ${req.method}, the api url is: ${req.url}`);
  return req;
});

דוגמה לביצעו Interceptor בעת response:

axios.interceptors.response.use(res => {
  if (res.status === 404) {
    console.log('404 Error!');
  }
  return response;
});

כמובן שיש לזה שימושים נרחבים יותר.

ביטול בקשה

axios מאפשר לנו לבטל בקשה במידה ונרצה.
הנה דוגמה לבקשה כזו:

const source = axios.CancelToken.source();

axios.get('/users', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log(thrown.message);
  } else {
    // handle error
  }
});

source.cancel('Request canceled!');

סיכום

אין ספק ש-axios היא ספריה מדהימה היא אפשרויות רבות שמשדרגות את האופן את הבסיסי שבו מבצעים פקודות HTTP.
axios היא ספריה ותיקה, יציבה, פופולארית במיוחד וכזו שתצטרכו בהמון פרויקטים וכדאי להכיר אותה לעומק.
בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)