Fetch в JavaScript - Полный курс [AXIOS, XmlHttpRequest] (Статусы, методы, network, api, query)
Хватит использовать Fetch API в JavaScript
Источник: Nuances of Programming Перед разработчиком нередко встает вопрос, какие использовать пакеты, инструменты и способы реализации задуманного. К примеру, каким способом стоит создавать HTTP-запросы? В данной статье я расскажу о библиотеке Axios и Fetch API, попутно продемонстрировав их отличия. О чем вообще речь? Когда требуется осуществлять информационный обмен с серверами через HTTP, мы отправляем запросы и получаем в ответ данные — этот процесс называется AJAX (асинхронный JavaScript и XML)...
➡️Заменяем fetch на wretch Все мы знаем про метод fetch() - современный и очень мощный, который присутствует в JS по умолчанию. Однако, этот метод имеет некоторые особенности, давайте рассмотрим их. Например, мы отправляем такой запрос через fetch(): fetch('/user') .then(res => res.json()) .then(user => { // работаем с user }) ⚠️ Но наш запрос может вернуть нам ошибку 400, 404 или 401. Вы можете сказать, что мы можем добавить блок catch() - однако, этот метод не позволяет нам обрабатывать статусы запросов. Тогда мы можем проверить статус запроса в первом then(), так как во втором мы получаем JSON-ответ. fetch('/user') .then(res => { if (!res.ok) { // обрабатываем ошибки switch (res.status) { case 400: break; case 401: break; case 404: break; case 500: break; } return res.json() }) .then(user => { // работаем с user }) Получаем очень много кода. ✅ И вот тут на сцену выходит wretch - это маленькая обертка над fetch() (ссылочка на либу https://elbywan.github.io/wretch/). И наш код превращается… превращается вот в это: wretch('/user') .get() .badRequest(err => {}) .notFound(err => {}) .unathorized(err => {}) .internalError(err => {}) .then(user => { // объект user }) Красивые цепочки и никаких switch case😉