Рубрики
Без рубрики

Извлекать

Браузеры поддерживали Fetch () в течение многих лет (кроме Internet Explorer), но я все еще вижу много Develo … Помечено JavaScript, HTML, Codepen.

Браузеры поддерживали 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”