# JavaScript Fetch API 😎 (Easy Explanation)

Have you ever seen an API in your project and wondered how you would access the data from it?

If yes, then here's where I come in. After reading this article, you will be able to obtain data through the API and believe me, You are Awesome!😎

**I hope** you all are **well, I'm** Jay Khatri and **let's** dive into Fetch **API.**

# Fetch API

The Fetch API is a simpler, **easier-to-use** version of XMLHttpRequest **that** **consumes** resources asynchronously. Fetch **allows** you **to** **interact** with **your** REST **API** with additional options **such** **as** caching data, reading streaming responses, and more.

**In simpler terms :**

The Fetch API is a **Promise-based** interface for **retrieving** resources **via** HTTP requests to web **browser** **servers.** **This** is similar to XML HTTP **requests** but better and more powerful.

## Fetch() Method

The **Fetch API** includes a `fetch()` the method that can **be** **used** to **retrieve** data from **any** **location** and **manipulate** the **retrieved** **data.** **You** **can** make HTTP **requests.** **i.o** **Either** a `GET` request **(to** **retrieve** **data**) or **a** `POST` request **(to** **post** **data**). A basic fetch request can be **illustrated** by the following code.

```javascript
fetch('url')
.then((response) => {
    // handle response
   console.log(response);
})
.then((data) => {
    // handle data
    console.log(data)
})
.catch((error) => {
    //handle error
    console.log(error)
})
```

## Promise

Let's have a look at one of the key benefits of using the **Fetch API**.

Each `fetch()` the call will result in the return of a JavaScript Promise object, which is by default asynchronous. This means you can securely and confidently assure that your code will only run after a successful network request answer.

Assuming we are returning plain text in response to our fetch request, we can obtain the result by using .then() after the fetch:

```javascript
fetch('http://example.com/data')
    .then(response => response.text())
    .then(text => console.log(text))
```

As you can see, the code is significantly easier and more concise than when using XHR. Furthermore, this is all ready to use in JavaScript without the need to load any external third-party libraries.

## Response

The response returned by the`.then()` the function is a JavaScript Response object. This means we can parse a JSON result straight on the Response object without first reading it.

Assume the following request is expecting a JSON response:

```javascript
fetch('https://example.com/usersdata/1')
    .then(response => response.json())
    .then(user => console.log(user.name))
```

You can read additional helpful attributes in the response to determine the state of the response. Among the more typical ones are:

a) `Response.ok`

Return a Boolean value of true or false to indicate whether the response was successful. If a status is in the 200–299 range, it will return true; otherwise, it will return false.

b) `Response.status`

the response's status code specifically. Examples include 200, 404, 500, etc.

c) `Response.statusText`

the status code's corresponding status message. For instance, OK for an answer of 200.

Here is an illustration of how to apply them:

```javascript
fetch('https://example.com/users/1')
    .then(response => {
        if (!response.ok && response.statusText != 'OK') {
            if (response.status == 404) {
                console.log('Resource not found!')
            }
        }
    })
```

## Error Handling

Simply add a`.catch()` method to the chain to handle any connection errors:

```javascript
fetch('https://invalidurl')
    .then(response => response.json())
    ... // other .then()
    .catch((error) => console.log(error))
```

> ***❗️*** Fetch only returns an error if the network request fails for any reason, such as an unreachable host or a broken connection. Fetch considers a 500 status answer (or 200, 400, etc.) to indicate a successful request, and it should be handled in your response instead.

## POST Request

So far, all of the samples we've seen have just been made `GET` requests. Even though we did not specify any options for our fetch request, it has completed several scenarios.

To send a `POST` request, we need to set a few arguments in the second parameter of our `fetch()` function. Consider the following example of transmitting JSON data via `POST.`

```javascript
fetch('https://example.com/posts', {
    method: 'POST',
    headers: {
        'Content-type': 'application/json; charset=UTF-8'
    },
    body: JSON.stringify({
        title: 'New Post',
        content: 'Hello world!'
    }),
})
.then((response) => response.json())
.then((json) => console.log(json));
```

Because the Content-Type header is by default set to text/plain; charset=UTF-8, you will most likely need to provide one based on the content of your request.

For example, in the case of a form data request:

```javascript
fetch('https://example.com/login', {
    method: 'POST',
    headers: {
      'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    body: 'username=admin&password=secret'
})
.then(response => response.text())
.then(text => console.log(text))
```

## Conclusion 🏁

I am sure now you are ready to get and post any API using `fetch() API!`

Certainly, there are many more elements of the Fetch API that I have yet to discuss. Hopefully, this article has shown you how strong and modern the Fetch API is when compared to XHR. 🚀

If you want to go deeper, check out the link I've included in the Resource section below.

Thank you for reading 🙌; if you found this post useful, please share it with your friends or connections.

## Resource 📚

*   [Fetch API in Deep](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
    

`JavaScript`