Network Request Exercises

git clone https://github.com/turingschool-examples/network-request-exercises.git
cd network-request-exercises
npm i
npm start

Practicing Our Network Requests

We are going to be focusing on just writing network requests today working with GET, POST, and DELETE. A great tool for testing network requests is Postman. Instead of spending time trying to write & debug your code, you can test your post requests and see what you are getting back very quickly. It’s a powerful tool to learn about an api very quickly so you know exactly what you need when writing your fetch calls later.

Passing the Options Argument

So far, we have spent the majority of time using fetch for GET requests. GET is the default HTTP verb used in fetch and as such, we are not required to pass it any additional information besides the url/endpoint we want to get data from.

However, if we want to perform another type of action with the API we are interacting with (such as POST or DELETE), we will need to pass fetch a second argument - the options object!

fetch can actually take two arguments:

1. the URL or API endpoint we’re trying to hit
2. an optional object of configuration settings for our request. This object may contain what kind of request we’re making (e.g. GET, POST, or DELETE) and any data we might need to pass along with it

const options = {
  method: 'POST',
  body: JSON.stringify({
    jokeName: 'Another bad joke',
    jokeValue: 'What did the triangle say to the circle? You’re so pointless.'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
};
//Passing the Options argument to fetch
fetch('/api/v1/jokes', options);

In this example, we’re making a POST request that would add a new joke. In the body of our options object, we are passing a stringified version of the data required by the API to post a joke.

One thing to note is that we will still get back a promise when we use fetch even if we are using another verb besides GET!

When this initial Promise resolves to the Response object, we can often utilize information coming back in the body of the Response object by parsing it out using the .json() method.

We would handle this promise with both a .then() and .catch() just like we would in our standard GET requests.

const options = {
  method: 'POST',
  body: JSON.stringify({
    jokeName: 'Another bad joke',
    jokeValue: 'What did the triangle say to the circle? You’re so pointless.'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('/api/v1/jokes', options)
  .then(response => response.json())
  .then(joke => renderJoke(joke))
  .catch(error => console.log(error));

User Endpoints

Sport Team Endpoints

Animal Endpoints