*That’s so fetching: an introduction to fetch requests, and what you can do with the information fetched. *
A fetch request is used to request information from a server and load or manipulate that information on a webpage. The types of request you can do are
- GET
- POST
- PATCH
- PUT
- DELETE
- HEAD
- OPTIONS
- CONNECT
- TRACE
For this blog we will be focusing on the most common: GET, POST, PATCH, PUT, DELETE. These are also known as CRUD operations: create, read, update, and delete.
GET
The GET request, or read, is your default request. All other request methods must be specified when performing the fetch. An example of a GET request would be something like loading your favorite webpage, or searching for sports data. In JavaScript the syntax is
fetch(“http://localhost:9000”)
.then(response => response.json())
.then(data => console.log(data)
Fetch requests are asynchronous; the response received from the request is a promise to get the information requested and send it back to the client. To make information easier to send across the web, it is sent as a string. Once that information is sent back to the client we call .json(), another promise, which turns that string into a Javascript object that we can use.
POST/PUT
The POST request, or create, is generally used to submit information to the server. An example would be anything with a submit button, or adding your account information to a database when you join a new website. A POST/PUT is not a regular GET request, it requires a bit more information to be passed into it. It needs a method parameter to tell what type of request we need. A headers parameter to represent what type of information we are using, and a body parameter that holds the information we are trying to add. Lastly we need to turn body information into a string to send the information across the web. To do this we use a tool called JSON.stringify(), which converts json objects into strings.
fetch(“http://localhost:9000”, {
Method: ‘POST’
Headers: {
‘Content-Type’: ‘application/json’,
},
Body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data)
You could also use a PUT in place of a POST, both do the same action. The main difference is that PUT requests are idempotent, meaning that an identical request can be made once or several times in a row with the same effect while leaving the server in the same state, in other words PUT won’t load duplicates.
PATCH
The PATCH request, or update, is used to update or modify a particular piece of information in the API. An example would be editing or updating your personal information. This method is written similarly to a POST request.
fetch(“http://localhost:9000” + id, {
Method: ‘PATCH’
Headers: {
‘Content-Type’: ‘application/json’,
},
Body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data)
DELETE
The DELETE request requires the URL path to be specific, sometimes with an id passed to specify which item to delete. An example would be canceling your online subscription, or terminating your account. For a DELETE request all that needs to be done is the type of method. The headers and body are not needed.
fetch(“http://localhost:9000” + id, {
Method: ‘DELETE’
})
.then(response => response.json())
.then(data => console.log(“Deleted”))
There are many more options available for working with fetch requests. The options mentioned in this blog are the most commonly used which will be used for the majority of the basic website work in gathering and submitting information. Using fetch requests isn’t the only way of performing these basic tasks but it is an easy and logical way of asynchronously working with data that is built into JavaScript.
Top comments (0)