Axios czy Fetch - czego lepiej używać?

Axios to słynny moduł JavaScript. Jest on klientem HTTP dla przeglądarek i NodeJS opartym na obietnicach (promise). Jeśli ktoś z Was pracował w ostatnich latach z JavaScript, to z pewnością go używał. 

W październiku 2019, Axios został pobrany z npm przez ponad 25 milionów użytkowników. 

A co jeśli powiedziałbym Ci, że to martwy projekt? Jeden z wątków na Reddicie tak właśnie sugeruje. 

Przesłanki ku temu są następujące:

• Bardzo niska aktywność na Githubie
• Github issues i Pull Requests są ignorowane
• Nie ma komunikacji z głównym zespołem

Kontrowersyjna luka w bezpieczeństwie pogorszyła jeszcze sprawę. Snyk zaraportował lukę w 2017. Była ona jednak ignorowana przez twórców przez ponad dwa lata. 

Kiedy axios stał się popularny, nie było podobnego klienta dla przeglądarek, który byłby oparty na obietnicach. Naturalny interfejs żądania XML HTTP (XHR) był nędzny i ciężko się z nim pracowało. 

Programiści przylgnęli do Axiosa, ponieważ ułatwiał im życie. W 2015 został wydany Fetch. Dlaczego więc cały czas używamy Axiosa? 

Mniej boilerplate’u

Używając Fetch

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// }

Używając Axiosa

axios.get("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => console.log("response", response.data))

// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// }

Pracując z Fetch musimy zająć się dwoma obietnicami. Pracując z Axiosem możemy z kolei bezpośrednio uzyskać dostęp do wyniku JSON bezpośrednio z obiektu odpowiedzi przez właściwość data.

Metoda json() o mixinu Body bierze strumień odpowiedzi i odczytuje go do końca. Zwraca wtedy obietnicę, która zostaje rozwiązana z ciałem odpowiedzi sparsowanym jako JSON.

Dodatkowy boilerplate jest wyraźniejszy kiedy pracujemy z żądaniami POST. 

Używając Fetch

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Title of post",
    body: "Post Body"
  })
})
  .then(res => {
    if (!response.ok) throw Error(response.statusText);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));

Używając Axiosa

axios
  .post("https://jsonplaceholder.typicode.com/posts", {
    title: "Title of post",
    body: "Body of post"
  })
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

Pracując z Axiosem możesz uniknąć boilerplate’u i pisać czystszy i bardziej zwięzły kod.

Obsługa błędów

Używając fetch

fetch("https://jsonplaceholder.typicode.com/todos/100000")
  .then(response => {
    if (!response.ok) throw Error(response.statusText);
    return response.json();
  })
  .then(data => console.log("data", data))
  .catch(error => {
    console.log("error", error);
  });

// error Error: Not Found

Używając Axiosa

axios
  .get("https://jsonplaceholder.typicode.com/todos/100000")
  .then(response => {
    console.log("response", response);
  })
  .catch(error => {
    console.log("error", error);
  });

// error Error: Not Found

Fetch nie wyrzuca błędów sieciowych, a Axios już tak. Pracując z Fetch trzeba zawsze sprawdzać właściwość response.ok. Aby to ułatwić i móc używać tego w przyszłości, możesz wyciągnąć sprawdzanie błędów do funkcji. 

const checkForError = response => {
  if (!response.ok) throw Error(response.statusText);
  return response.json();
};

fetch("https://jsonplaceholder.typicode.com/todos/100000")
  .then(checkForError)
  .then(data => console.log("data", data))
  .catch(error => {
    console.log("error", error);
  });

Brakujące funkcje 

Axios może monitorować postęp ładowania danych. Nie jest to jednak możliwe z Fetch. Jeśli tworzysz aplikację która uploaduje video lub grafiki, monitorowanie postępu ładowania może być decydującym czynnikiem.

const config = {
  onUploadProgress: event => console.log(event.loaded)
};

axios.put("/api", data, config);

Alternatywne biblioteki

• ky- mały i elegancki klient HTTP oparty na window.fetch
• superagent- mała i progresywna biblioteka żądań HTTP działająca po stronie klienta w oparciu o XMLHttpRequest

Czego więc powinniśmy używać?

To zależy. Jeśli zależy Ci na śledzeniu postępu ładowania, wybierz Axiosa lub Superagent. Jeśli jesteś w stanie poradzić sobie z ograniczeniami Fetcha, to będzie Ci z nim lepiej. Aby usunąć trochę boilerplateu, wypróbuj wrapper typu ky.