Learn how to use the Fetch API and Promises to write HTTP requests.

Requests with Fetch API

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 yourself)! 

Now, we're going to learn how to use `fetch()` to construct POST requests! 

Take a look at the diagram to the right. It has the boilerplate code for a POST request using `fetch()`. 

Notice that the `fetch()` call takes two arguments: an endpoint and an object that contains information needed for the POST request. 

The object passed to the `fetch()` function as its second argument contains two properties: `method`, with a value of `'POST'`, and `body`, with a value of `JSON.stringify({id: '200'});`. This second argument determines that this request is a POST request and what information will be sent to the API.

A successful POST request will return a response body, which will vary depending on how the API is set up. 

The rest of the request is identical to the GET request. A `.then()` method is chained to the `fetch()` function to check and return the `response` as well as throw an exception when a network error is encountered. A second `.then()` method is added on so that we can use the response however we may choose.

Diagram depicting the boilerplate needed to make POST requests using the `fetch` API. 

Intro to POST Requests using Fetch

Diagram containing boilerplate syntax needed to make a GET request using the `fetch` API. 

The first type of requests we’re going to tackle is GET requests using [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). 

The `fetch()` function:
* Creates a request object that contains relevant information that an API needs.
* Sends that request object to the API endpoint provided.
* Returns a promise that ultimately resolves to a response object, which contains the status of the promise with information the API sent back.

Let’s walk through the boilerplate code to the right for using `fetch()` to create a GET request step by step.

First, call the `fetch()` function and pass it a URL as a string for the first argument, determining the endpoint of the request.

```js
fetch('https://api-to-call.com/endpoint')
```

The`.then()` method is chained at the end of the `fetch()` function and in its first argument, the response of the GET request is passed to the callback arrow function. The `.then()` method will fire only after the promise status of `fetch()` has been resolved.

Inside the callback function, the `ok` property of the `response` object returns a Boolean value. If there are no errors, `response.ok` will be `true` and the code will return `response.json()`.

If `response.ok` is a falsy value, our code will `throw` an error.

```js
throw new Error('Request failed!');
```

A second argument passed to `.then()` will be another arrow function that will be triggered when the promise is rejected. It takes a single parameter, `networkError`. This object logs the `networkError` if we could not reach the endpoint at all (e.g., the server is down).

A second `.then()` method will run after the previous `.then()` method has finished running without error. It takes `jsonResponse`, which contains the returned `response.json()` object from the previous `.then()` method, as its parameter and can now be handled, however we may choose. 

Intro to GET Requests using Fetch

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 callback functions as arguments &mdash; one to handle the promise if it resolves, and one to handle network errors if the promise is rejected.

In this exercise, we will chain another `.then()` method, which will allow us to take the information that was returned with the promise and manipulate the webpage! Note that if there is an error returned in the first `.then()` method, the second `.then()` method will not execute.

Handling a GET Request

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? The answer to the previous questions revolves around [HTTP requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). 

There are many types of HTTP requests. The four most commonly used types of HTTP requests are GET, POST, PUT, and DELETE. In this lesson, we'll cover GET and POST requests. 

With a GET request, we're retrieving, or _getting_, information from some source (usually a website). For a POST request, we're _posting_ information to a source that will process the information and send it back.

JavaScript uses an [event loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop) to handle asynchronous function calls. When a program is run, function calls are made and added to a stack. The functions that make requests that need to wait for servers to respond then get sent to a separate queue. Once the stack has cleared, then the functions in the queue are executed.

Web developers use the event loop to create a smoother browsing experience by deciding when to call functions and how to handle asynchronous events. We will go into event loops in more detail in the [Concurrency Model and Event Loop in JavaScript](/courses/learn-intermediate-javascript/articles/javascript-concurrency-model-and-event-loop) article.

To make asynchronous event handling easier, [promises](https://www.codecademy.com/resources/docs/javascript/promise) were introduced in ES6 JavaScript. 

In this lesson, we will explain how to use `fetch()` and promises to handle requests. Then, we will simplify requests using `async` and `await`.

Introduction to Requests with ES6

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 inputted word using the [Datamuse API](https://www.datamuse.com/api/).


Making an async GET Request

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/docs/Web/JavaScript/Reference/Statements/async_function) and [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await). You read that right, you did the hard part already. Now it’s time to make it easier. 

The structure for this request will be slightly different. We will use the new keywords `async` and `await`, as well as the `try` and `catch` statements. 

Take a look at the diagram on the right. 

Here are some key points to keep in mind as we walk through the code:
* The `async` keyword is used to declare an `async` function that returns a promise.
* The `await` keyword can only be used within an `async` function. `await` suspends the program while waiting for a promise to resolve. 
* In a [`try...catch` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch), code in the `try` block will be run and in the event of an exception, the code in the `catch` statement will run.  

Study the `async` `getData()` function to the right to see how the request can be written using `async` and `await`.

Diagram containing the boilerplate needed to create an `async` function. 

Intro to async GET Requests

Diagram containing the boilerplate needed to make an async function for a POST request. 

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 the right.

We still have the same structure of using `try` and `catch` as the `async` GET request we just learned about. But, in the `fetch()` call, we now have to include an additional argument that contains more information like `method` and `body`. 

The `method` property value is set to `'POST'` to specify the type of request we are making. Then we have to include a `body` property with the value of `JSON.stringify({id: 200})`.


Intro to async POST Requests

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 returns a Promise which will either be resolved or rejected. If the promise resolves, we can check and return that response. We will chain another `.then()` method and handle the returned JSON object and display the information to our webpage.

Let's implement this knowledge into our code!

Remember that if you reset the exercise at any point, you will have to paste in your API key again at the top!


Handling a POST Request

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 can be created in a variety of ways.
* We can use `fetch()` and `async`/`await` to  asynchronous request data from APIs. 
* Promises are a type of JavaScript object that represents data that will eventually be returned from a request.
* The `fetch()` function can be used to create requests and will return promises.
* We can chain `.then()` methods to handle promises returned by the `fetch()` function.
* The `async` keyword is used to create asynchronous functions that will return promises.
* The `await` keyword can only be used with functions declared with the `async` keyword.
* The `await` keyword suspends the program while waiting for a promise to resolve.

Congratulations on learning all about asynchronous requests using `fetch()`, `async`, and `await`! These concepts are fundamental to helping you develop more robust web apps!

Review

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 API key to access the [Rebrandly API](https://app.rebrandly.com/account/api-keys).

We will then pass in the endpoint and the request object into the `fetch()` method to make our POST request. 

If you reset the exercise at any point, you will have to paste in your API key again at the top!


Making an async POST Request

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.datamuse.com/api/) and render the fetched information in the browser.

The Datamuse API is a word-finding query engine for developers. It can be used in apps to find words that match a given set of constraints that are likely in a given context. 

If the request is successful, we'll get back an array of words that sound like the word we typed into the input field. 

We may get some errors as we complete each step. This is because sometimes we've split a single step into one or more steps to make it easier to follow. By the end, we should be getting no errors.

Making a GET Request

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 using the [Rebrandly URL Shortener API](https://developers.rebrandly.com/). 

We will need a Rebrandly API key. To do this, read through [the Rebrandly sign up guide](https://www.codecademy.com/articles/rebrandly-signup) to set up your API.

Keep in mind, while it’s ok to use your API key in these exercises, you should **not** share your key with anyone (not even to ask a question in the forums)! Also, if you reset the exercise at any point, you will have to paste in your API key again at the top.