Как получить headers в fetch?

Question

[exxagw]

fetch(url)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
      })

каким образом получить headers в "последнем" then (responseData)?

Answer 1

[Алексей Уколов]

Более красивого способа, к сожалению, нет:

let globalResponse;
fetch(url)
      .then((response) => {
            globalResponse = response;
            return response.json();
      })
      .then((responseData) => {
            console.log(responseData, globalResponse);
      })

Но можно использовать async/await:

const response = await fetch(url);
const responseData = await response.json();
console.log(responseData, response.headers);

Comments

[exxagw]

блин, почему-то не подумал о таком варианте, спасибо!

.then((response) => {
            return [response.json(), header];
      })
      .then((responseData, headers) => {

к такой конструкции никак не прийти? (вернуть 2 параметра из первого then и использовать во втором. но у меня все 2 параметра попадают в responseData

[Алексей Уколов]

exxagw, можно использовать деструкцию массива из ES6:
.then(([responseData, headers]) => {}

[exxagw]

Алексей Уколов, то что нужно, спасибо

Answer 2

[0xD34F]

fetch(url)
  .then(r => r.json().then(data => ({ data, headers: r.headers })))
  .then(r => console.log(r.data, r.headers));

Answer 3

[Ваге]

jsfiddle

fetch("https://jsonplaceholder.typicode.com/albums")
  .then(response => {
    console.log(response.headers.get("Content-Type")); // application/json; charset=utf-8
    console.log(response.status); // 200

    return response.json();
  })
  .then(res => {
    console.log(res); // iliakan
  })
  .catch(console.log);