Fetch Headers and Why They Matter

If you have ever used fetch or XMLHttpRequest then you have worked with HTTP Requests and HTTP Responses. That also means that you have been working with Headers, which are an integral part of every Request and Response.
This tutorial explains how you can find the headers, their values, and then use that as part of your fetch process.
Code from Video: gist.github.co...
MDN reference for the Headers object: developer.mozi...

[@Gollumfili]

Love how these videos are kept as simple as possible, but are still explained properly without all the waffle. Definitely my go to channel.

[@codesader]

This is powerful. I have always known there was more to the headers. I just didn't know it was this much. I bet this is just even a tip of the iceberg. Great content!

[@biswamohandwari6460]

Everytime I visit this channel I always find something which I don't know and then starts to learn it🙂

[@paxdriver]

Correction, I think important for newbies: arrays are not key-value pairs, an array is an ordered list aka index-value pairs (arrays don't have named keys like objects do). Good vids, love your work, thanks a mil 👍

[@reanibutani9555]

This is the best explaination about headers

[@ShreyasKumar]

Love you Steve you are a true GEM. Thank you for your lovely tutorials. 🙂

[@barungh]

Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much! Again.

[@deependrasinghshekhawat2856]

I came in to learn something and with that learned something else as well. thanks as always.

[@barungh]

Very very useful, I was looking into 'Lorem Picsum' - Rndom Image Generator API, and wanted to control the response Thank You so much.

[@oussamasethoum1665]

why tutorials doesn't touch the necessary part which is setting the headers in the request.

[@SteveGriffith-Prof3ssorSt3v3]

like this? - kzbin.info/www/bejne/j3uai5p9o82Ba80

[@armin3529]

That's us great man thanks ❤️❤️❤️

[@tralalili_dwarf]

i'm sorry but something is confusing me in the code. but it's not realy related to the vid. how does a for of loop work with resp.headers if resp.headers is an object? doesn't a for of loop only works with itterables?

[@SteveGriffith-Prof3ssorSt3v3]

The headers object itself is iterable. It works the exact same way as if you used for( let entry of myHeaders.entries() ){ } developer.mozilla.org/en-US/docs/Web/API/Headers/entries

[@tralalili_dwarf]

@@SteveGriffith-Prof3ssorSt3v3 I really appreciate the quick answer, steve. it helped a lot. thank you very much, i love your channel !!

[@pjmclenon]

hello this does not work on a mobile or even any phone wifi for json why?

[@SteveGriffith-Prof3ssorSt3v3]

Most likely you are missing the response header from the server. The client side code should work everywhere.

[@pjmclenon]

@@SteveGriffith-Prof3ssorSt3v3 hello i tried many differnt lines of code and it never worked Lisa

[@devstefancho]

awesome!

[@whyredvince]

You should start a blog.

[@SteveGriffith-Prof3ssorSt3v3]

Here ya go - dev.to/prof3ssorst3v3/you-can-convert-your-callbacks-to-promises-141n

[@joaovaz3473]

I'll be honest: I know nothing about headers except for what they are (I'd say some kind of array of information that's returned with a file) lmao

[@SteveGriffith-Prof3ssorSt3v3]

That is actually a pretty good description. When you send an HTTP request it has a header, body, and footer. The HTTP response also has those three things. the body is where the uploaded or downloaded file (or formatted data) goes. The header is the description of where it is going, where it came from, and other meta information. The footer is for verifying that you have the whole thing.

[@senseicodes]

First viewer😁

[@rajkumarvelumani6283]

Hi bro.. How to fetch single data from database using JavaScript Make a video for this

[@SteveGriffith-Prof3ssorSt3v3]

I released a whole playlist on IndexedDB with JS last week