JavaScript And Fetch
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-04-15 17:13:01

"The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.", as per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) documents

JavScript can send network requests to the server to get information using different methods one of such method is using the fetch method of the Fetch API, It is not supported in IE browsers, you can check the support of fetch [here.] (https://caniuse.com/?search=fetch)

Is Fetch Fetch part of JavaScript? No, it is not a part of JavaScript, it is the part of the Web Platform API and other underlying web standards.

The fetch() method help us to fetch resources asynchronously, it will takes one mandatory argument, a path of the resource that we need to fetch. The fetch method always returns a promise, "Not data" but a promise. The initial state will be pending and it may go into fulfilled or rejected based on the successfulness of the fetch operation. 

```javascript
//syntax
let result = fetch(url, options)
```
1. `url` represents the URL to be fetched.
2. `options` represents Object that contain additional parameters the could be passed to the fetch, its optional.

```javascript
let data = fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(res => {
        if (res.ok) {
           console.log("Data fetched");
        }// Data fetched
        return res.json()
     })
     .then(json => console.log(json.name)) //Leanne Graham
     console.log(data);
     // [[PromiseState]]: "fulfilled"
     // [[PromiseResult]]: undefined
```
In the above code we try to fetch a resource, then we use a `then` method to handle the promise returned by the fetch, the first `then` method contains a if statement which checks whether the fetch was successful by checking `res.ok`, as it returned true, `Data fetched` message was displayed on the console. `res.json()` convert the response body into json format, that data is captured by the second `then` method and key with the `name` in the response body is printed on to the console. Remember, you need to get the response body from the promise using methods like `text(), json(), formData(), blob()` etc., that is the reason why we used two `then` statements. 

```javascript
fetch('https://jsonplaceholder.typicode.com/users/1')
   .then(response => { 
       console.log(response.status, response.ok); //200 true
})  

let f1 = fetch('https://jsonplaceholder.typicode.com/user')
   .then(response => { 
       console.log(response.status, response.ok); //404 false
})
.catch(error => console.log("Error", error))

console.log(f1);
//[[PromiseState]]: "fulfilled"
//[[PromiseResult]]: undefined

// Code inside catch method did not execute as , no 
// rejection occurred.
```
Take a look at the second fetch in the above code, the code returned `response.ok` with a `false` and `response.status` with `404` but the state of the promise was `fulfilled`, `fetch method won't reject on HTTP error status like 404 or 500.`   

#### Some response properties 
```javascript
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => {
    console.log(response.ok, response.status); 
    // true 200
    console.log(response.headers.get('Content-Type'));
    // application/json; charset=utf-8
    return response
}) 
```
1. `response.ok`: Returns true if the HTTP status code is anything from 200 to 299.
2. `response.status`:  Returns the HTTP status code.
3. `response.headers`: Returns HTTP response header. 

We can pass object with header configurations as a second parameter to the fetch to set header options in the fetch call. 

#### Methods to read response body
There are various promise based methods to access the body, some of them are explained below. 

#### 1. response.text() 
Read and return the response body in the text format
```javascript

fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => {
         console.log( response.ok, response.status );  
         // true 200
         return response.text();
     })
     .then(text => { console.log(typeof text) // string
           console.log(text); 
     })

//                  Output of console.log(text)
// {
//   "id": 1,
//   "name": "Leanne Graham",
//   "username": "Bret",
//   "email": "Sincere@april.biz",
//   "address": {
//     "street": "Kulas Light",
//     "suite": "Apt. 556",
//     "city": "Gwenborough",
//     "zipcode": "92998-3874",
//     "geo": {
//       "lat": "-37.3159",
//       "lng": "81.1496"
//     }
//   },
//   "phone": "1-770-736-8031 x56442",
//   "website": "hildegard.org",
//   "company": {
//     "name": "Romaguera-Crona",
//     "catchPhrase": "Multi-layered client-server neural-net",
//     "bs": "harness real-time e-markets"
//   }
// }

```

#### 2. response.json()  
Read and return the response body as json format
```javascript
fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => {
         console.log(response.ok, response.status);  
          //true 200
         return response.json();})
     .then(json => { 
          console.log(typeof json)// object
          console.log(json);})


//               Output of console.log(json)
// {          
// address:
//     city: "Gwenborough"
//     geo:
//         lat: "-37.3159"
//         lng: "81.1496"
//     street: "Kulas Light"
//     suite: "Apt. 556"
//     zipcode: "92998-3874"
// company:
//     bs: "harness real-time e-markets"
//     catchPhrase: "Multi-layered client-server neural-net"
//     name: "Romaguera-Crona"
// email: "Sincere@april.biz"
// id: 1
// name: "Leanne Graham"
// phone: "1-770-736-8031 x56442"
// username: "Bret"
// website: "hildegard.org"  
```
#### 3. response.formData() 
Read and return the response body as FormData object

```javascript
<form action="" id="form1" name="form1">
   <input type="text" name="fname" placeholder= 
      "FirstName">
   <br>
   <input type="text" name="lname" placeholder= 
       "LastName">
   <br>
   <Button id="submit">Submit</Button>
</form>
// I provided "kiran" as value for first input and "raj"
// as value for second input. 

<script>
   const btn = document.getElementById('submit');
   const form1 = document.getElementById('form1');
   let formData1;

   btn.addEventListener('click', (e)=>{

     e.preventDefault();
     let data = new FormData(form1);
     const obj =  Object.fromEntries(data.entries());

     fetch( 'https://jsonplaceholder.typicode.com/posts' 
        ,{
            method: 'POST',
            body: JSON.stringify(obj),
            headers: {
              'Content-type': 'application/json; 
               charset=UTF-8'
            }
      })
      .then((response) => response.text())
      .then((text) => console.log(text));

})
</script>

//Output
//{
//  "fname": "kiran",
//  "lname": "raj",
//  "id": 101
//}
```

Remember only one method can be used to read the response or error body as the content has been already read by the first method.

I just skim through the basics of fetch method, will update with more examples and information. Please feel free to comment any information you have about fetch. Suggestions are always welcomed, and if you find any mistakes, please leave a comment. Happy coding 

Let's learn together :)