In this lesson you will learn how to use new features available in ES6 and ES7 to write AJAX requests! 

Requests II

We are going to reconstruct the boilerplate code necessary to create a GET request using the `fetch()` function step-by-step. 

Feel free to refer to the `fetch()` GET diagram at any point while completing this exercise:
* <a href="https://content.codecademy.com/courses/intermediate-javascript-requests/diagrams/fetch%20GET%20diagram.svg" target="_blank">fetch() GET diagram</a>


fetch() GET Requests II

In the previous exercise, we created the boilerplate code for making a GET request using `async` and `await`. 

In this exercise, you’re going to build on previously created boilerplate code to get nouns that describe the inputted word from the Datamuse API:
* <a href="https://www.datamuse.com/api/" target="_blank" rel="noopener noreferrer"> Datamuse API Documentation</a>. 


async GET Requests III

We are going to reconstruct the code from the previous exercise step-by-step until we have written a complete POST request using `fetch()` and `.then()`.

Feel free to refer to the `fetch()` POST diagram at any point while completing this exercise:
* <a href="https://content.codecademy.com/courses/intermediate-javascript-requests/diagrams/fetch%20POST%20diagram.svg" target="_blank">fetch() POST diagram</a>


fetch() POST Requests II

In the previous lesson, we spent a lot of time dealing with asynchronous data (remember AJAX/ Asynchronous JavaScript And XML?). Many of our web page interactions rely on asynchronous events, so managing these events is essential to good web development. 

To make asynchronous event handling easier, _promises_ were introduced in JavaScript in ES6: 
* <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noopener noreferrer"> Mozilla Development Network: Promises</a>

A promise is an object that handles asynchronous data. A promise has three states: 
* _pending_ : when a promise is created or waiting for data. 
* _fulfilled_ : the asynchronous operation was handled successfully.
* _rejected_ : the asynchronous operation was unsuccessful.

The great thing about promises is that once a promise is fulfilled or rejected, you can chain an additional method to the original promise. 

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

We'll use the Datamuse API for GET requests and  Rebrandly URL Shortener API for POST requests. For you to complete the lessons on POST, make sure you create a Rebrandly API Key by following the instructions in the article below:

* <a href="https://www.codecademy.com/articles/rebrandly-signup" target="_blank">Codecademy Articles:  Rebrandly URL Shortener API</a> .

Introduction to Requests with ES6

You’re almost done with the POST request you started a few lessons back!

In fact, this time you’ll add another `.then()` to the chain to finally make the information available to your webpage!

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

fetch() POST Requests V

Let's recap on the concepts covered in the previous exercises:

1. GET and POST requests can be created a variety of ways.

2.  Use AJAX to asynchronously request data from APIs. `fetch()` and `async`/`await` are new functionalities developed in ES6 (promises) and ES8 respectively.

3. Promises are a new type of JavaScript object that represent data that will eventually be returned from a request.

4. `fetch()` is a web API that can be used to create requests. `fetch()` will return promises.

5. We can chain `.then()` methods to handle promises returned by `fetch()`.

6. The `.json()` method converts a returned promise to a JSON object.

7. `async` is a keyword that is used to create functions that will return promises.

8. `await` is a keyword that is used to tell a program to continue moving through the message queue while a promise resolves.

9. `await` can only be used within functions declared with `async`.


Review Requests II

In the previous exercise you’ve positioned yourself to make the POST request by providing the endpoint and the object containing all the necessary information. In this exercise you’ll handle the response.

The request returns a Promise which will either be resolved or rejected. If the promise resolves, you can use that information and the `ok` status. Let's implement that knowledge into your code!

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

fetch() POST Requests IV

Now we’re going to piece together a POST request using `async` and `await`. 

Feel free to refer to the `async`/`await` diagram below at any point while completing this exercise:
* <a href="https://content.codecademy.com/courses/intermediate-javascript-requests/diagrams/async%20await%20POST%20diagram.svg" target="_blank">`async`/`await` POST diagram</a>


async POST Requests II

Great job making it this far! 

In the previous exercise, you created the query URL, called the `fetch()` function and passed it the query URL and a settings object. Then, you chained a `.then()` method and passed it two 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, you’ll now take the information that was returned with the promise and manipulate the webpage! 


fetch() GET Requests IV

Now that you’ve made an `async` GET request, let’s start on getting you familiar the `async` POST request. 

As with the other GET and POST requests that you’ve been making, an `async` POST request requires more information. Take a look at the diagram.

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

We’ll be explaining the why's and how's of the boilerplate code for `async` POST requests in the next lesson. 


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

async POST Requests I

We are going to walk through and recreate the boilerplate code necessary to create a GET request using the `async` and `await`.

Here are some key points to keep in mind as we walk through the code:
* Using an `async` function that will return a promise.
* `await` can only be used in an `async` function. `await` allows a program to run while waiting for a promise to resolve. 
* In a `try...catch` statement, code in the `try` block will be run and in the event of an exception/error, the code in the `catch` statement will run.  

Feel free to refer to the `async`/`await` GET diagram at any point while completing this exercise:
* <a href="https://content.codecademy.com/courses/intermediate-javascript-requests/diagrams/async%20await%20GET%20diagram.svg" target="_blank">`async`/`await` GET diagram</a>


async GET Requests II

The first type of requests we’re going to tackle are GET requests using `fetch()`
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">MDN: Fetch API</a>. 

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.

In the next exercise we’ll go over the boilerplate code for using `fetch()` and walk through what each step does!


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

fetch() GET Requests I

In the previous exercise, you wrote the boilerplate code for a GET request using `fetch()` and `.then()`. In this exercise, you’re going to use that code and manipulate it to access the Datamuse API and render information in the browser.
* <a href="https://www.datamuse.com/api/" target="_blank" rel="noopener noreferrer">Datamuse API</a>.

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

You may get some errors as you 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, you should be receiving no errors.


fetch() GET Requests III

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

In the previous exercise, you 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, you'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 initial call takes two arguments: an endpoint and an object that contains information needed for the POST request. The rest of the request is identical to the GET request. 


fetch() POST Requests I

Since you’ve created the boilerplate code for a POST request, the next step is to incorporate that experience and logic into making a real request. 

In this exercise, you'll need to retrieve your Rebrandly API key to access the Rebrandly API.
* <a href ="https://app.rebrandly.com/account/api-keys" target="_blank" rel="noopener noreferrer">Rebrandly API Keys</a>.

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

async POST Requests III

Let’s take a minute to appreciate what you’ve accomplished so far: 
* used `fetch()` to make GET and POST requests.
* check the status of the responses coming back
* catch errors that might possibly arise
* taking successful responses and rendering it on the webpage 

That is fantastic! It’s the basis of how the internet works! 

In the following exercises, we’re going to take what you’ve learned about chaining Promises and make it simpler using functionality introduced in ES8: `async` and `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 also be slightly different. Notice the new keywords `async` and `await`, as well as the `try` and `catch` statements. 

We’ll be going over how to write the boilerplate code for `async` GET requests in the next lesson. 


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

async GET Requests I

In the previous exercise, you created the boilerplate code for making a POST request using `fetch()` and `.then()`. In this exercise, you’re going to update that boilerplate code to allow you to shorten a URL using the Rebrandly URL Shortener API. 
* <a href ="https://developers.rebrandly.com/" target="_blank" rel="noopener noreferrer">Rebrandly API</a>.

If you haven't already created a Rebrandly API key, read through the Rebrandly sign up guide:
* <a href="https://www.codecademy.com/articles/rebrandly-signup" target="_blank">Codecademy Articles:  Rebrandly URL Shortener API</a>.

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 if asking 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.
