Fetch() is a function used to retrieve data. It is a promise that once finished some data will be available. So lets breakdown what all is needed for a fetch() function to retrieve data.

First you will need the url for where the data is coming from. This is important because without it where is your data coming from. When you call fetch() you are putting in a request for some data to be retrieved. The fetch method is a global method and will take in an argument. Fetch() will only reject if there is a network error, usually a permissions issue. It will not reject on HTTP errors.

Step 1: fetch("https://rickandmortyapi.com/api/character/108")

Fetch does not return the actual content, so we need to first return the data from the fetch and then we can use said data. The first step is to use the then() method to callback the data. We also need to convert the data from JSON string by using the json() method. This method will convert the data into Javascript objects that we can use.

Step 2: .then((response) => response.json())

The response in the above example refers to the data that we fetched from the url above. The response.json is returning the data as a Javascript object. Next we will need another then() method. This last .then() is where the actual data is called back.

Step 3: .then((data) => {

console.log(data);

})

From here there are a few different options you can do with your data. You can console.log() the data, alert(), or pass the data into another function to be manipulated. Console.log() will print the data we fetched to our console. The alert() function will display the text in a dialog box that appears on the screen aka an alert message. All together our fetch would look like this:

fetch("https://rickandmortyapi.com/api/character/108")

.then((response) => response.json())

.then((data) => console.log(data));

Fetch() can also take in a second option that can allow you to control different setting. There are many different options available to use with fetch(). I will go over a few that you may use. Body: this will be anything that you want to add to the body of the object you are requesting. Headers: any headers you want to add to the request. Not any header can be used. Method: the most common methods will be "GET" and "POST". "GET is the default setting. "POST" will add it to the request. "PATCH" will update the request. "DELETE" will remove from the request. There are custom methods that can be used. You will just have to capitalize them in your own code.

fetch("https://rickandmortyapi.com/api/character/108"), {

method: "DELETE",

headers: {

'Content-Type': 'application/json'

},

body: null

})

.then((response) => response.json())

.then((data) => console.log(data))

);

In the above example we requested some data that we would like to delete. The method tells the function what type of request we are making. The header content-type is telling the function what kind of data we are sending. Since we are not sending any additional data to the request we will put null in under body.

One way to check for errors within the fetch() is to use a handler within the then(). Within the .then function you will have to run response.ok and/or response.status. From there you are able to read the error codes.

Another way to check for errors is to use a catch(). The catch method is very helpful with the fetch method because it can be chained on like the then() method to the fetch. The purpose of the catch method is when a promise is called it and does not return successfully, the catch method will in turn give the user the reason why the promise was not fulfilled.

Sources:

“JavaScript Fetch API.” JavaScript Fetch API, www.w3schools.com/jsref/api_fetch.asp. Accessed 28 Mar. 2024.

MozDevNet. “Fetch() Global Function - Web Apis: MDN.” MDN Web Docs, developer.mozilla.org/en-US/docs/Web/API/fetch. Accessed 28 Mar. 2024.

MozDevNet. “Promise.Prototype.Catch() - Javascript: MDN.” MDN Web Docs, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch. Accessed 28 Mar. 2024.