Fetch API

The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers.

• The fetch API can perform all the tasks that the XMLHttpRequest (XHR) object does.

• The fetch API is much simpler and cleaner.

• It uses the promise to deliver a more flexible feature to make requests to servers from web browsers.

Sending a request

The fetch() method is available in the global scope and instructs web browsers to send a request to a URL.

• The fetch() method requires only one parameter, which is the URL of the resource that you want to fetch.

• When the request is complete, the promise will resolve into a response object.

let response = fetch(url);

Reading the response

The fetch() method returns a promise, so you can use the then() and catch() methods to handle it.

fetch(url)
.then((response) => {
//handle the response
})
.catch((error) => {
//handle the error
});

• If the contents of the response are in raw text format, you can use the text() method.

The text() method returns a promise that resolves with the complete contents of the fetched resources.

fetch('/readme.txt')
.then(response => response.text())
.then(data => console.log(data));

Besides the text() method, the response object has other methods such as json(), blob(), formData(), and arrayBuffer() to handle the respective type of data.

In practice, you often use async/await with the fetch() method like this:

async function fetchText() {
let response = await fetch('/readme.txt');
let data = await response.text();
console.log(data);
}

Handling the status codes

The response object provides the status code and status text via the status and statustext properties.

async function fetchText() {
    let response = await fetch('/reademe.txt');

    console.log(response.status); //200
    console.log(response.statusText); //OK

    if(response.status == 200) {
        let data = await response.text(); // handle the data
    }
}
fetchText();