In the early days of the internet, browsers only had the ability to make requests to the same server that served the initial page. This meant that web applications could only display data that was already on the server.
In order to get around this limitation, developers started using a technique called Ajax (Asynchronous JavaScript and XML). With Ajax, a web page could request data from a different server without reloading the page.
The problem with Ajax was that it was not standardized and each browser had its own way of doing things. This made it difficult for developers to create cross-browser applications.
In order to standardize Ajax requests, the W3C (World Wide Web Consortium) created the XMLHttpRequest specification. This specification defined how browser should make Ajax requests.
Most browsers today support the XMLHttpRequest specification. However, there is still a lack of standardization when it comes to the response format.
To solve this problem, the W3C created the fetch() API. The fetch() API defines a standard way to make Ajax requests and handle the response.
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.
The Fetch API is not limited to GET requests, it can also be used to perform other types of HTTP requests such as POST, PUT, DELETE, etc. In addition, the fetch API allows you to make network requests similar to XMLHttpRequest (XHR).
How fetch() works
The fetch() method starts the process of fetching a resource from the network, returning a promise that resolves with the response object when the request completes.
If the request is successful, the promise resolves with a Response object. A Response object has a body property that contains the response body (as a ReadableStream object), and a ok property that indicates whether the response was successful (status in the range 200-299 ) or not.
If the request fails, the promise rejects with a TypeError .
fetch('https://example.com/resource')
.then(function(response) {
if (response.ok) {
// if HTTP-status is 200-299
// get the response body (JSON data object)
return response.json();
} else {
console.log('HTTP Error: ' + response.status);
}
}
)
.then(function(data) {
// do something with JSON data
console.log(data);
}
);
The above code makes a GET request to example.com/resource . If the request is successful, the promise resolves with the response body as JSON data.
HTTP requests with fetch()
You can also use the Fetch API to make other types of HTTP requests such as POST, PUT, and DELETE.
fetch('https://example.com/resource', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'name=John&age=20'
}
)
.then(function(response) {
if (response.ok) {
return response.json();
} else {
console.log('HTTP Error: ' + response.status);
}
}
)
.then(function(data) {
console.log(data);
}
);
The above code makes a POST request to example.com/resource with the body name=John&age=20 . If the request is successful, the promise resolves with the response body as JSON data.
Static method in fetch()
In addition to the global fetch() method, the Response class also has a static method called Response.error() that returns a new Response object associated with an error.
A static method is a method that is associated with a class, but not with an instance of that class. A static method can be invoked without creating an instance of the class.
Here is an example:
fetch('https://example.com/resource')
.then(function(response) {
if (response.ok) {
return response.json();
} else {
return Response.error();
}
}
)
.then(function(data) {
console.log(data);
}
)
.catch(function(error) {
console.log('Request failed: ' + error.message);
}
);
The above code makes a GET request to example.com/resource . If the request is successful, the promise resolves with the response body as JSON data. If the request fails, the promise is rejected with an error.
The Fetch API is supported by all major browsers, including Internet Explorer 11.
