התמיכה ב Fetch API כבר נכנסה לרוב הדפדפנים אז נראה שזה זמן טוב להכיר ואולי אף להתחיל להשתמש בו. המנגנון מספק את אותן יכולות של XMLHttpRequest אבל בתחביר מעט שונה ובלי התחילית המבלבלת XML. הנה 3 דוגמאות שיהיה לכם עם מה לעבוד.

1. שליחת הודעות GET ופענוח התשובה

התחביר של fetch מבוסס על Promises בדומה למה שקורה בספריות Ajax מודרניות. בעיה מוכרת בכתיב זה היא שאין אפשרות עדיין לקבל Progress Events, לכן בינתיים לצורך העלאת קבצים נראה לי יותר פשוט להישאר עם XMLHttpRequest. הקוד כולל שליחת בקשה והגדרת שתי כותרות: Accept ו X-Requested-With שעוזרות לשרת להבין שאנחנו בבקשת Ajax:

fetch('/path/to/thing', {
  headers: {
    'Accept': 'application/json',
    'X-Requested-With', 'XMLHttpRequest',    
  }
}).
  then((res) => res.json()).
  then(function(data) {
  }).
  catch(function(err) {
    alert('Error: ' + err.message);
  });

אפשר לראות את הקוד בפעולה כאן:

2. שליחת בקשת POST

מעבר לבקשת POST דורש הוספת פרמטר לסוג הבקשה ועוד כותרת עבור סוג התוכן שאנו שולחים. כך נראה הקוד:

  fetch('/path/to/thing', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
    }
  }).
    then(function(res) {
      if (!res.ok) throw new Exception('HTTP error: ' + res.statusText);
    }).
    catch(function(err) {
      alert('Error: ' + err.message);
    });

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