A quick byte of Fetch API 🍪

Salika Dave - Apr 1 - - Dev Community

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.

. . . .