Working with Fetch()_Requests

What is Fetch in JavaScript?

Fetch can be used for contacting and interacting with a Applications Programming Interface to retrieve data.

Types of Requests

Getting Started

Fetch is a JavaScript function that accepts two arguments which takes in a stringified URL and the second one is optional that will contain information about your request. If no second argument is provided, JavaScript will automatically expect a “GET” request.

fetch("http://localhost:3000/users")

Promises

When making a fetch request, it will always return a promise if the request was successful. However, the first promise that fetch sends is not as great looking.

fetch("http://localhost:3000/users")

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

This would return a response as shown below:

Response {type: "cors", url: "http://localhost:3000/users", redirected: false, status: 200, ok: true, ...} body: (...) bodyUsed: false headers: Headers {} ok: true redirected: false status: 200 statusText: "OK" type: "cors" url: "http://localhost:3000/users" __proto__: Response

As shown, the status was successful, but does not show the data of the API.

In order to see our data, we would need to parse it into something that JavaScript can read by converting it to JSON. However, by converting it to JSON, the method also returns another promise. Now we can actually work with the next promise.

fetch("http://localhost:3000/users")

.then(rsp => (rsp => rsp.json())

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

The last promise will return the data we want to manipulate within our objects.

( 45) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]

0: {id: 2, first_name: "Jacqulyn", last_name: "Jones", created_at: "2020-07-30T00:46:54.608Z", updated_at: "2020-07-30T00:46:54.608Z"} 1: {id: 3, first_name: "Ching", last_name: "Rice", created_at: "2020-07-30T00:46:54.612Z", updated_at: "2020-07-30T00:46:54.612Z"} 2: {id: 4, first_name: "Marcel", last_name: "Leffler", created_at: "2020-07-30T00:46:54.616Z", updated_at: "2020-07-30T00:46:54.616Z"} 3: {id: 5, first_name: "Lynwood", last_name: "Bechtelar", created_at: "2020-07-30T00:46:54.619Z", updated_at: "2020-07-30T00:46:54.619Z"} 4: {id: 6, first_name: "Chadwick", last_name: "Crist", created_at: "2020-07-30T00:46:54

Here’s The “Catch”

What if there is an error? How can I see what my error can be?

Well, we have to know what statuses does our request send us which are Successful, Pending, and Rejected.

By using the .catch() method, we can create an error, alerting us if our request was either not successful of rejected.

Here is a video on how we can implement the catch method

Pretty Simple?

Originally published at https://martinezjf2.github.io.

I am a graduate from Flatiron School for Software Engineer. Studied HTML, CSS, Ruby, Ruby on Rails, JavaScript, React, Redux, Sinatra, and Sqlite3