Объём шаблонного кода

- 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
// }

- Axios

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
// }

При использовании Fetch приходится иметь дело с двумя промисами. А вот при работе с Axios у нас есть прямой доступ к JSON-результату в свойстве data объекта ответа.

Метод json() миксина Body принимает поток Response и полностью читает его. Он возвращает промис, который разрешается JSON-результатом разбора текста тела запроса.

Ещё больше шаблонного кода в Fetch приходится использовать при работе с POST-запросами.

- 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));

- Axios

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));

Использование Axios позволяет избежать написания больших объёмов шаблонного кода и сделать код чище и понятнее.

Обработка ошибок

- 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

- Axios

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

Библиотека Axios выдаёт сведения о сетевых ошибках, а API Fetch - нет. Работая с Fetch всегда нужно проверять свойство response.ok. Для того чтобы упростить решение данной задачи, проверку этой ошибки можно оформить в виде отдельной функции:

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);
	});

Отсутствующие возможности

Axios умеет следить за ходом выгрузки данных. Fetch это не поддерживает. Это может стать решающим фактором выбора технологии для тех, кто разрабатывает приложение, позволяющее пользователям выгружать на сервер фотографии или видеофайлы.

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

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

Альтернативные библиотеки

Вот пара альтернатив Axios и API Fetch:

  • Ky - миниатюрный и продуманный HTTP-клиент, основанный на window.fetch.
  • Superagent - маленькая прогрессивная клиентская HTTP-библиотека, основанная на XMLHttpRequest.

Итоги

Чем стоит пользоваться? Это зависит от многого. Например, если вам нужно отслеживать прогресс выгрузки материалов на сервер, то вам лучше всего подойдёт Axios или Superagent. Если вы можете справиться с ограничениями Fetch - тогда вам лучше воспользоваться именно этим API. А для того, чтобы немного улучшить Fetch-код, попробуйте библиотеку-обёртку наподобие Ky.