Браузеры поддерживали fetch ()
В течение многих лет (кроме Internet Explorer), но я все еще вижу, что многие разработчики используют классический XHR «AJAX».
Почему это? Я думаю – частично – это потому, что fetch ()
отсутствует Тайм-аут
и более легкий способ обработки ошибок. Тем не менее, разработчики сделать хочу использовать его из-за его простоты. Другими словами: это Fetch-22 ситуация (плохой каламбур;)
Я написал небольшой модуль, fetch22 (), который расширяет init-объект fetch () с:
- Обратный вызов (правда | false) : Функция, чтобы позвонить, когда Fetch запускается (true) и заканчивается (false)
- ErrorHandler (ошибка) : пользовательская функция для запуска Если возникает ошибка
- errorlist : Массив статус-кодов, чтобы вручную запустить ошибки
- Парсер (ответ) : Пользовательская функция для анализа ответа, по умолчанию будет использовать .json () или .text (), в зависимости от типа контента ответа
- Parserargs : Массив дополнительных аргументов для отправки на пользовательский парсер после ответа
- Тайм-аут : Период в миллисекундах, чтобы допустить до ошибки тайм-аута. По умолчанию 9999 мс
Сам модуль может быть схватил здесь И ручка с примерами можно увидеть здесь (но перейти к кодепене и увидеть его в полноэкранном режиме):
Вот некоторые из примеров из демонстрации:
Пользовательский обратный вызов
Пользовательский обратный вызов называется дважды, один раз, когда привлечения инициирует, а затем, когда Fetch завершится:
function startStop(bool) { if (bool) { console.log('START'} else { console.log('STOP'); } }
Пользовательский CurryHandler.
Получает объект ошибки, как только параметр:
function handleError(error) { console.error(error.name, error.message); }
Пользовательский парсер
Парсер по умолчанию возвращает JSON или Text, в зависимости от Content-Type
Отказ Пример пользовательского парсера, нахождение <Символ>
по ID
В SVG:
async function getSymbolFromSVG(response, id) { const text = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(text, "text/xml"); const svg = doc.getElementById(id); return svg.outerHTML.toString(); }
Надеюсь, что это будет полезно для вас, как это было для меня.
Спасибо за чтение, и счастливое кодирование!
Оригинал: “https://dev.to/madsstoumann/fetch-22-41mg”