Fetch!

Photo by Brixiv from Pexels

Fetch is the perfect descriptive word that captures the action of the fetch method. And basically that action is to send a request to the back end server to be processed, and then retrieve the result and return it to the front end. Fetch requests can also be called API calls. So the fetch method is also referred to as the fetch API. Fetch makes these calls or requests using JavaScript.

The fetch method accepts two parameters. The first parameter is the URL address of the destination to which the fetch is being sent. This is known as the endpoint because the end of this destination address contains the data & methods necessary for proper processing.

The second parameter is optional and it’s a collection of options. The options are basically instructions on how the fetch request should be processed. These options can include the following CRUD operations; GET (capture and return data), DELETE (delete the identified data), POST (use input to create data), or PUT/PATCH (change existing data). If a fetch request does not identify one of those methods as an option, it will default to the GET method.

Now to demonstrate making fetch requests. Let’s say there’s an app called Great Dog Photos used by dog lovers all over the world.

GET

The following fetch request could capture and return all the dog pictures stored for the user to view:

Since I did not pass in an option containing the GET method and only passed in the URL address as a parameter, the request implicitly defaulted to a GET request. The following option contains the GET method:

I can add that option to my fetch request to explicitly make a GET request to return all the dog pictures stored for the user to view:

To see a picture of a specific dog, I would simply add that dog’s unique ID number for example dog number 77:

DELETE

The following fetch request is an example of how to delete dog number 77.

The POST and PUT/PATCH methods require input data to be sent in the fetch request. The input is extra instructions (body and headers) in addition to method inside of the option parameter.

POST

This fetch request will create a new dog image. I don’t need to include an ID number in my fetch request because let’s say the dog image prior to this one had an ID 99, this new dog image would automatically be assigned ID 100. In addition to a method, this option also contains a body and headers. The method is POST and body has the dog’s name and a picture of it in JSON form to send over the internet to the back end where it’s automatically assigned ID 100 and stored for future viewing. There’s also a header that indicates JSON is an acceptable content type. JSON is JavaScript Object Notation which is a way to package content so it can be sent over the internet.

PUT or PATCH

This fetch request will change data that already exists. For instance suppose I incorrectly saved the name of dog ID 100. To change its name from Kitty to the correct name, King, I would include the dog’s ID number and correct name in my fetch request:

NOTE Because I used PATCH, the body only needs to include the name being changed. If I used PUT, I would have to include the whole object, name and pic, in the body.

Now that you’ve had basic training on the JavaScript fetch API… go fetch!

Photo by Brixiv from Pexels

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reactive Streams in JavaScript with RSocket Flowable

HMS Kit in Mask Tracker

Introduction to Angular Testing

Build Instagram login page with Next.js and TailwindCSS Part 3— Add the input form

JavaScript: Call by Value vs Call by Reference

18 Tips For a Better React Code Review (TS/JS)

Warren Buffett’s Recent Explanation of How Money Now Works Is the Most Important in History

Better Navigation with State Machines

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wendy Raven McNair

Wendy Raven McNair

More from Medium

Coding Bootcamp Week 5/13: First Week on Back-end

JavaScript ES2020 features: Nullish Coalescing Operator (??) and Optional Chaining (?.)

Generating the JSON Web Token for the Google Play Developer API

A real time web chat with socket.io