Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 15, 2021 05:13 pm GMT

JavaScript And Fetch

"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 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.

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.

//syntaxlet 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.
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.

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

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

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": "[email protected]",//   "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

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: "[email protected]"// 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

<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 :)


Original Link: https://dev.to/kiranrajvjd/javascript-and-fetch-fjc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To