Fetch API has become the standard for web API requests for a while now and it is supported in almost any modern browsers nowadays. Let’s use Fetch API and implement it for the web
Use Fetch API
Previously, there are many existing solutions for handling API requests for the web, ex. jQuery Ajax, request (node), axios (node) … why there needs another?
Why Fetch API?
Fetch API is the standard API being supported native in most of today web browsers.
Hmm, IE is not supported, you ask? Since Microsoft stopped support for IE, no more development for IE in future, and we will expect very less number of users use IE.
Fetch API Specifications
The specs of Fetch API is described here, https://fetch.spec.whatwg.org/
Check it out if you want to learn details about Fetch. In short, fetch() is being used in following form:
fetch(ENDPOINT, OPTIONS).then( response => {
// do something with response
}).catch(error => {
// do something with error
});ENDPOINT is the API target endpoint that you want to make actual requests to.
OPTIONS is the Request object.
Since fetch() returns a Promise, so you can handle it in chain with then() and catch() as usual.
The data return from Fetch API is a Response object.
Fetch API Examples
Aright, let’s try some examples to work with Fetch API.
Regular GET request
Query random-user API:
fetch('https://randomuser.me/api/').then(response => {
if(response.ok) return response.json();
}).then(data => {
console.log('Data', data);
}).catch(err => {
console.log(err);
});To get actual data, we have to resolve and call response.json() in order to get actual content returned by the API endpoint.
If there is any error, you can easily handle it through Promise.catch().
Use more HTTP request methods
By default, fetch() assumes that you use GET method. In case, you want to use other HTTP methods like POST, PUT, DELETE, PATCH… add method to the request options.
fetch(ENDPOINT, { method: 'POST' })Specify request headers
You can put any custom header value by adding into the headers property of request options.
fetch(ENDPOINT, {
headers: {
"Content-Type": "application/json",
}
)Send post body
To post data, you will need to include post data into body property of request options.
So, to request JSON data:
fetch(ENDPOINT, {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "Pete Houston" })
})To request form data:
fetch(ENDPOINT, {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: "name=Pete%20Houston"
})Include the credentials on fetch request
To do this, use the credentials property.
credentials: "include"Fetch API Polyfill
In order for older browsers to use fetch() , there is a polyfill made by Github, https://github.com/github/fetch
Summary
Fetch API is fairly simple to learn and implement into any web app. Since most of modern browsers support it, why not make use of it to cut down the cost of unnecessary cost of third-party libraries! It is a good thing for the web.