Key Concepts

Review core concepts you need to learn to master this subject

JSON-Formatted Response Body

fetch('url') .then( response => response.json() ).then(jsonResponse => { console.log(jsonResponse); });

The .json() method will resolve a returned promise to a JSON object, parsing the body text as JSON.

In the example code, the .json() method is used on the response object which returns a promise to a JSON-formatted response body as jsonResponse.

Requests with Fetch API
Lesson 1 of 1
  1. 1
    Have you ever wondered what happens after you click a “Submit” button on a web page? For instance, if you are submitting information, where does the information go? How is the information processed…
  2. 2
    The first type of requests we’re going to tackle is GET requests using fetch(). The fetch() function: * Creates a request object that…
  3. 3
    In the previous exercise, we went over the boilerplate code for a GET request using fetch() and .then(). In this exercise, we’re going to apply that code to access the [Datamuse API](https://www.da…
  4. 4
    Great job making it this far! In the previous exercise, we called the fetch() function to make a GET request to the Datamuse API endpoint. Then, you chained a .then() method and passed two callba…
  5. 5
    In the previous exercise, we successfully wrote a GET request using the fetch API and handled Promises to get word suggestions from Datamuse. Give yourself a pat on the back (or two to treat yourse…
  6. 6
    In the previous exercise, we walked through the boilerplate code for making a POST request using fetch() and .then(). In this exercise, we’re going to use that boilerplate code to shorten a URL…
  7. 7
    In the previous exercise, we set up the POST request by providing the endpoint and the object containing all the necessary information. In this exercise, we’ll handle the response. The request ret…
  8. 8
    In the following exercises, we’re going to take what we’ve learned about chaining Promises and make it simpler using functionality introduced in ES8: [async](https://developer.mozilla.org/en-US/doc…
  9. 9
    In the previous exercise, we walked through the boilerplate code for making a GET request using async and await. In this exercise, we’re going to apply the code to get nouns that describe the inp…
  10. 10
    Now that you’ve made an async GET request, let’s start getting familiar with the async POST request. As we’ve seen before, a POST request requires more information. Take a look at the diagram to …
  11. 11
    Since we’ve reviewed the boilerplate code for an async POST request, the next step is to incorporate that logic into making a real request. In this exercise, we’ll need to retrieve our Rebrandly …
  12. 12
    In this lesson, we learned how to make GET and POST requests using the Fetch API and async/await keywords. Let’s recap on the concepts covered in the previous exercises: * GET and POST requests ca…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo