DEV Community

Cover image for A quick byte of Fetch API πŸͺ
Salika Dave
Salika Dave

Posted on

3

A quick byte of Fetch API πŸͺ

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)