different ways to make an HTTP request in JavaScript

Image for post
Image for post

[1]. Ajax

[2]. jQuery methods

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax() Function

$('#action-button').click(function() {
$.ajax({
url: 'https://api.joind.in/v2.1/talks/10889',
data: {
format: 'json'
},
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
dataType: 'jsonp',
success: function(data) {
var $title = $('<h1>').text(data.talks[0].talk_title);
var $description = $('<p>').text(data.talks[0].talk_description);
$('#info')
.append($title)
.append($description);
},
type: 'GET'
});
});

[3]. Fetch API

fetch(url, {options});   //{options} is optional in case of 'GET'
fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res => console.log(res));
{
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://www.reddit.com/top/.json?count=5"
}

Loading JSON

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res => res.json()) //here, json() returns a promise
.then(json => console.log(json));

[4]. Axios

Usage:

npm install axios --save
import axios from 'axios'
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Making a Request with axios:

GET:

Image for post
Image for post

POST:

Image for post
Image for post
Image for post
Image for post

Difference between Fetch() & axios

[5]. Angular ‘HttpClient’

Wrapping Up

◉ Async … await

async function fetchTopFive(sub) {
const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
const fetchResult = fetch(URL)
const response = await fetchResult;
const jsonData = await response.json();
console.log(jsonData);
}

fetchTopFive('javascript');
Image for post
Image for post
Why Async/Await
async function getPromise() {
const data = await getData();
}
Image for post
Image for post
Image for post
Image for post

Async

Await

Advantages of Async / Await :-

All you need to know about JavaScript Async Await

Returning Promises with Async Keyword

Image for post
Image for post

Let’s see the above code in action…

Image for post
Image for post

Understanding Asynchronous Execution

Image for post
Image for post

Working with the “await” keyword

Image for post
Image for post

Conclusion:-

function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store