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.
