How to use the JavaScript to Fetch API

#javascript #html #css

XMLHttpRequest was the thing used back then to make request and serve call , but the modern day JavaScript has made significant changes so has made the built-in-clean code now.

Fetching API is a basic but most important thing to do while making website more responsive, Along comes the Fetch API a new standard to make server request jam-packed with promises and all those things we learned to love over the years.

How do we use the Fetch API?

In a very simple manner all you really do is call fetch with the URL you want, by default the Fetch API uses the GET method:

fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
// Your code for handling the data you get from the API
})
.catch(function() {
// This is where you run code if the server returns any errors
});

For example:
If u want to get 10 random users, use css selectors to add a select a button.

<h1>Authors</h1>
<ul id="authors"></ul>
const ul = document.querySelector('authors'); // Get the list where we will place our authors
const url = 'https://randomuser.me/api/?results=10'; // Get 10 random users

here is how things work in background
When we input the URL in fetch command in return we get a response.
Then we get a response but the response we get is not JSON but an object with a series of methods we can use depending on what we want to do with the information, these methods include:

clone() - As the method implies this method creates a clone of the response.
redirect() - This method creates a new response but with a different URL.
arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
formData() - Also returns a promise but one that resolves with FormData object.
blob() - This is one resolves with a Blob. text() - In this case it resolves with a string.
json() - Lastly we have the method to that resolves the promise with JSON.

I have created a small and ready to make project using Funtranslations.com where u give a text and using api it can be translated to diff languages

var inputbtn=document.querySelector("#inputbtn");
var inputtxt=document.querySelector("#inputtxt");
var outputtxt=document.querySelector("#outputtxt");
var serverurl ="https://api.funtranslations.com/translate/minion.json";

function geturltranslate(text){
  return serverurl+ "?" +"text="+ text;
}
function translate(){
    var inputtext=inputtxt.value;
fetch(geturltranslate(inputtext))
    .then(response =>response.json())
    .then(json => {
      var translatedtext=json.contents.translated;
      outputtxt.innerText=translatedtext;   //output
    }) 
};
inputbtn.addEventListener("click",translate);

input: hello welcome here, have a good Day
output: Hello zhelosa stai, zinot zo zyemus diena

hence the only use of the APi is to convert the given text into translated text

checkout the site for more translation
TranslationApi