Happy New Year 2019! I know I am a bit late but better late than never! π
My new year resolution is to write something every day, even if it's something basic. Out of curiosity, I have been revisiting various ways to make API calls in JS in 2019. In this post, I'll summarize my findings and list various options to make AJAX calls. To keep it simple, let's focus on what they are, their syntaxes and some pros and cons of each option.
XHR
Ajax is the traditional way to make an asynchronous HTTP request. The XMLHttpRequest object can be used to exchange data with a web server.
Syntax
GET Request
const Http = new XMLHttpRequest();
const url='http://example.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}
POST Request
var xhr = new XMLHttpRequest();
xhr.open("POST", '/user', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ipseeta&id=1");
Fetch API
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Syntax
The fetch
method takes a mandatory request path as argument and returns a Promise
.
GET Request
fetch('https://www.example.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}
POST Request
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));
Pros
- Itβs flexible and easy to use
- Callback hell is avoided by Promises
- Supported by all modern browsers
- Follows request-response approach
Cons
- Doesn't send cookie by default
- CORS is disabled by default
jQuery
jQuery is a fast, small, and feature-rich JavaScript library.
Syntax
Youβll need to include the jQuery library in your project to get started.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
GET Request
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});
POST Request
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});
Pros
The good thing about jQuery is that you will find tons of support and documentation.
Cons
If you are already using a state management library like React, Vue etc, then using jQuery just for ajax is overkill.
Axios
Promise based HTTP client for the browser and node.js It lets you make HTTP requests from both the browser and the server.
Syntax
You can install through npm install axios
and import import axios from 'axios'
or add through cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET Request
axios.get('/user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
POST Request
axios.post('/user', {
name: 'Ipseeta',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Pros
- It works on both Nodejs and Browser
- Supports Promise API
- Can set or cancel a request
- Can set a response timeout
- Client-side support for protecting against XSRF
- Can intercept requests or responses before they are carried out.
- Automatic transforms for JSON data
Request
Request is designed to be the simplest way possible to make HTTP calls. It supports HTTPS and follows redirects by default.
Syntax
var request = require('request');
request('http://www.google.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});
Pros
API is easy to use
Cons
It is not Promise-based. If you'd like request
to return a Promise instead, you can use an alternative interface wrapper for request
.
SuperAgent
SuperAgent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs.
Syntax
SuperAgent has a request object that accepts methods such as GET, POST, PUT, DELETE, and HEAD and then calling .then() (or .end() or await) to send the request.
GET Request
The .query() method accepts objects, which when used with the GET method will form a query-string.
request
.get('/user')
.query({ id: 1 })
.then(res => {
});
POST Request
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)
Pros
- Nice interface for making HTTP requests.
- Works in both Browser and Node.
- Multiple functions chaining to send requests.
- Supports abortion of requests
Qwest
Qwest is a simple ajax library based on
promises
and that supportsXmlHttpRequest2
special data like ArrayBuffer,Blob
andFormData
.Syntax
You can use qwest using
npm install qwest
or via cdnjshttps://cdnjs.com/libraries/qwest
GET request
qwest.get('example.com')
.then(function(xhr, response) {
});
POST request
qwest.post('/user', {
name: 'Ipseeta',
id: 1
})
.then(function(xhr, response) {
})
.catch(function(e, xhr, response) {
});
Pros
It supports request cancellation
var request = qwest.get('example.com')
.then(function(xhr, response) {
// Won't be called
})
.catch(function(xhr, response) {
// Won't be called either
});
request.abort();
Cons
XHR2 is not available on every browser. So if needed, you need to verify XHR version
if(qwest.xhr2) {
// Actions for XHR2
}
else {
// Actions for XHR1
}
So, we looked at the most popular JS libraries for AJAX calls in this post. Did I miss anything? Feel free to comment below! π