Understanding fetch() API In JavaScript
Tags: javascript, api, webdev, html
Published: 2020-03-23 14:51:19

Some decades ago, JavaScript developers were stuck with using [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) which is slightly confusing and more complex 😴, then some years later, [jQuery](https://jquery.com/) (a JavaScript library) built an helper function to make writing ajax code more easier. And again, some years after this, the fetch() api was introduced 💥.

## Introduction
The **fetch api** makes it easier to create **asynchronous** request and handle the response even more better than the good old **XMLHttpRequest**.

The main difference between XMLHttpRequest and fetch() is that fetch() uses [Promises](https://javascript.info/promise-basics), which makes it cleaner and simpler to implement.

## Getting started
The first thing you need to do when using the fetch API is to invoke the function with the url we want to query as the function parameter:

```javascript
fetch('http://my_url.com/api/user')
```

Well, that's not the end of it, since fetch uses promise, we'll need to add a `.then()` function to grab our data;

> But somehow, the first promise will also return another promise.

The reason for the second promise is because, the first one return the data along with some information we don't really need at the moment, so we use the second promise to get our raw data.
Now the code look like this:
```javascript
fetch('http://my_url.com/api/user')
.then(function (response){
     return response.json();
 })
.then(function (data){
    // Do something with data
    console.log(data);
 });
```


You'll notice the first promise has a `.json()` method, this is to specify that we are expecting a *json data*.

__________

By default, fetch api uses **GET** method to access the url. We could add a second parameter (in form of an object) to the function to specify the method we want to use, such as **POST**, **DELETE**, **PUT**, e.t.c and also send some data along with our asynchronous request.

Here's how:
```javascript
// Post Method With Data Example
fetch('http://my-url.com/user/details', {
    method: 'post',
    body: 'email=foo& password=bar'
  })
  .then(function (res) {
        return res.json();
    })
  .then(function (data) {
      // Do something with data
    console.log(data);
  });
```

For debugging sake we can add **.catch()** method to handle any error that might occur while sending our request:

```javascript
// Adding .catch() to our previous code
fetch('http://my-url.com/user/details', {
    method: 'post',
    body: 'email=foo& password=bar'
  })
  .then(function (res) {
        return res.json();
    })
  .then(function (data) {
      // Do something with data
    console.log(data);
  })
  .catch(function (error) {
    console.log('Request failed, Error ' + error);
  });
```
____
## Final Notes
This article is just to explain the basics stuffs you need to know about fetch().
#### "Quote Generator" - 👦🚀
In my next article, we'll get a bit more practical by learning how to build a **random quote generator** site using the fetch api.

**P.s:** Don't you think it'll be awesome if you share this with your friends on social media, how about you do that now 🙃

And finally below are some great references I'd gather if you want to further your reading on fetch().
Thanks for reading 👏

## Resources
https://developers.google.com/web/updates/2015/03/introduction-to-fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API