This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

If you are trying to GET a URL, make an async request to fetch(URL). Resolve the promise and you will have a response. But if you reached a 4xx or a 5xx, prepare to handle it with a catch(). Headers in fetch() are your best friends to POST data to a URL.

Additional Context

How did I think about this?

As a JavaScript developer, I wanted the one-byte explainer to:

• Tell me the new concepts, if I am seeing this API for the first time OR
• Refresh my memory of it's usage, if I have worked it with earlier.

In my opinion to use the Fetch API one must be aware of the following concepts:

• Asynchronous requests: fetch() makes a network request without blocking the main JavaScript thread of execution.
• Promises: For understanding how this API works and what to expect when handling the return values (i.e. resolving the response) and errors during API fetch (i.e. catch())
• Headers: These will differentiate the usage of this API to make HTTP GET, POST and many requests.
• HTTP Error Codes: We are web developers and of course we hate 4xx errors codes in our consoles.

... and hence their inclusion in the one-byte explainer!

All credits to MDN.

All work on this prompt challenge is an individual effort.