JavaScript

fetch() Method in JavaScript | Explained

The fetch() method is mainly connected to the use of web technology (known as AJAX) which exchanges data with web servers asynchronously in the background. To insert AJAX into the website easily we use jQuery. Although this process is easy and reduces the code lines. However, this may result in an extra load of 100KB on the website.

Developers use XMLHttpRequest to include AJAX with the help of pure JavaScript. However, it also has a disadvantage, that we need to code some unnecessary things that are also not good. To eliminate all these disadvantages, the JavaScript ES6 version introduced the fetch() method. In other words, the fetch() method can be referred to as the replacement of the AJAX.

Keeping in view the importance of fetch() method, this post aims to serve the following outcomes:

  • How fetch() method works in JavaScript?
  • How to use fetch() method in JavaScript?

How fetch() Method Works in JavaScript?

The JavaScript fetch() method provides us with all the functionalities that AJAX has. The fetch() method can be used to Create, Retrieve, Update, and Delete operations with the server. In this method, the coding is very less, and it is also fast as compared to XMLHttpRequest. Another important thing is that this method works on a live server.

Syntax
The detailed working flow of the fetch() method is explained below.

fetch(file/URL)

The fetch () method takes file path as a parameter. When this method executes, it returns a promise (a promise is just like a state), a promise is either successful or failed.

fetch(file/URL).then()

If the promise is successful, we use the then() function with the fetch() method.

fetch(file/URL).then(function(resp_variable){return resp_variable.data;})

After that, we create a function in which we get a response from the server as a parameter inside the function. The server sends a data file which is then sent as a response.

fetch(file/URL).then(function(resp_variable){return resp_variable.data;}).then()

The first then() function also returns a promise, and this promise is used in the second then() function.

fetch(file/URL).then(function(resp_variable){return resp_variable.data;}).then(function(res_variable){
console.log(res_variable);})

The result from the server is displayed inside the second then() function’s body. Here res_variable represents the variable that contains an actual result that is displayed to the user.

fetch(file/URL).then(function(resp_variable){
     return resp_variable.data;
}).then(function(res_variable){
     console.log(res_variable);
}).catch(function(err_variable){
      console.log(err_variable);
});

In the above syntax, file/URL represents the path of the server-side language file. The resp_variable denotes the response of the server when the fetch method requests the path. The res_variable represents the variable that stores the final response after the resp_variable function is executed and the err_variable represents the variable that stores an error if it occurs.

The catch() function is used to handle errors when the server is not responding or the file, we are sending contains errors.

How to Use the fetch() Method in JavaScript?

In JavaScript, the fetch() method takes a file path as a parameter and uses the function to return the server response. After that, the server response is sent again to the server which will return the result. Let’s understand the usage of the fetch() method through a practical example.

Code

fetch("fet/read.txt").then(function(r){
     return r.text();
}).then(function(res){
     console.log(res);
});

In this code fetch method requests a read.txt file after that then() function gets the server response and returns it to the server again. Lastly, we again use the then() function to display the result.

Output

The above output shows that the fetch() method requests a read.txt file and gets a fulfilled promise in return. After that the then() function uses this promise and gets the server response and uses it inside its body to return the response along with the text() method. Lastly, the second then() method gets the result and displays the content of the read.txt file.

That is all the information regarding the fetch() method in JavaScript. You have understood the working and usage of the fetch() method in JavaScript.

Conclusion

In JavaScript, the fetch() method is used to perform CRUD operations like insertion, upgradation, reading and deleting of data from the server. To do so, the fetch() method makes a request to the server, and the required data is loaded on the webpage on the approval of request. This descriptive manual provides detailed information of the working and usage of the fetch() method in JavaScript.

About the author

Adnan Shabbir