За день я погуглил-пролистал-скопировал множество ответов, поэтому я собираюсь начать этот пост с tl; dr - если вы здесь, чтобы исправить, просто прочитайте первую часть. Если вам интересно узнать больше о том, что происходит (варианты использования, методы и т. Д.), Читайте дальше!

Заголовки скрыты в методе entries(), который возвращает не объект, а итератор, который затем предоставляет доступ к заголовкам в формате ключ / значение через цикл for...of. (Подробнее об этом на сайте MDN)

Например, если вы fetch мой сайт и выйдете из цикла, вы получите следующее:

// code
fetch('https://stevemiller.dev')
  .then((response) => {
    for (var pair of response.headers.entries()) {
      console.log(pair[0]+ ': '+ pair[1]);
    }
  });
// logs
cache-control: max-age=600
content-type: text/html; charset=utf-8
expires: Sun, 07 Jul 2019 03:54:43 GMT
last-modified: Sun, 07 Jul 2019 03:43:47 GMT

Подробнее: Использование заголовка ответа

Некоторые RESTful API используют заголовки ответов для указания важной информации после вызова. Например, некоторые сторонние API-интерфейсы будут включать информацию о текущих ограничениях скорости в настраиваемые заголовки.

В моем случае я использовал удобный пакет json-server для некоторых тестовых данных.

При выполнении запроса к набору данных json-server он возвращает заголовок с общим количеством результатов для этого запроса, чтобы помочь с разбивкой на страницы (x-total-count).

Javascript Fetch API

Используя интерфейс React, я вызывал API json-сервера, используя встроенную функциональность выборки с Javascript:

fetch(`/events?q=${query}&_page=${page}`)
  .then((response) => {
    return response.json();
  })
  // then setting state, etc

(Мне нравится fetch, потому что он встроен в Javascript, поэтому нет необходимости в дополнительном пакете)

Но, чтобы помочь с разбивкой на страницы, мне нужно было точно знать, сколько «страниц» контента может предоставить этот запрос. Доступ к таким заголовкам регистрирует пустой объект:

console.log(reponse.headers);
// output: Headers {}

Это потому, что заголовки не объекта, это iterator

Доступ к заголовкам с помощью for...of и entries()

Вы не можете напрямую получить доступ к заголовкам в ответе на вызов fetch - вам нужно выполнить итерацию после использования метода entries() для заголовков. Пример кода (с использованием реакции и поиском количества запросов) ниже:

fetch(`/events?q=${query}&_page=${page}`)
  .then((response) => {
    for (var pair of response.headers.entries()) { // accessing the entries
      if (pair[0] === 'x-total-count') { // key I'm looking for in this instance
        this.setState({
          total: pair[1] // saving that value where I can use it
        })
      }
    }
    return response.json();
  });

Отсюда вы можете создать свой собственный объект с помощью цикла или отфильтровать определенные значения (как я сделал в верхней части сообщения).

Первоначально опубликовано на https://stevemiller.dev 6 июля 2019 г.