Javascript API Calls
XML HTTP Request
- All modern browsers support the XMLHttpRequest object to request data from a server.
- It works on the oldest browsers as well as on new ones.
- It was deprecated in ES6 but is still widely used.
var request = new XMLHttpRequest();
request.open('GET','https://jsonplaceholder.typicode.com/users')
request.send();
request.onload =() =>{
console.log(JSON.parse(request.response));
}
Fetch API
- The Fetch API provides an interface for fetching resources including across the network in an asynchronous.
- It returns a Promise.
- It is an object which contains a single value either a Response or an Error that occurred.
- .then() tells the program what to do once Promise is completed.
fetch('https://jsonplaceholder.typicode.com/users')
.then(response=>{
return response.json();})
.then(data=>{
console.log(data);
})
Axios
- It is an open-source library for making HTTP requests.
- It works on both Browsers and Node js.
- It can be included in an HTML file by using an external CDN.
- It also returns promises like fetch API
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response =>{
console.log(response.data)})
JQuery AJAX
- It performs asynchronous HTTP requests.
- Uses $.ajax() method to make the requests.
- Ability to send GET and POST requests
- Ability to Load JSON, XML, HTML or Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function(){
$.ajax({
url:"https://jsonplaceholder.typicode.com/users",
type:"GET",success:function(result){
console.log(result);
}
})
})
- asynchronous code should be simple.
- functional style should not care about async.
- functional transformations should be composable, performant, and simple to express.
const { pipe, map } = rubico
const toTodosUrl = id => `https://jsonplaceholder.typicode.com/todos/${id}`
const logTodoByID = pipe([ // fetch a Todo and log it
toTodosUrl,
fetch,
response => response.json(),
console.log,
])
const todoIDs = [1, 2, 3, 4, 5]
map(logTodoByID)(todoIDs)
// fetch Todos per id of TodoIDs and log them
// { userId: 1, id: 4, title: 'et porro tempora', completed: true }
// { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
// { userId: 1, id: 3, title: 'fugiat veniam minus', completed: false }
// { userId: 1, id: 2, title: 'quis ut nam facilis...', completed: false }
// { userId: 1, id: 5, title: 'laboriosam mollitia...', completed: false }
// same as above but with limited concurrency
// map.pool(2, logTodoByID)(todoIDs)
Top comments (5)
Great thank you.
You can add rubico rubico
Regards
yeah sure. thanks for your suggestion.
Yeah polyfilled without a problem with a 4.5MB bigger bundle for IE11 lol with all the other stuff...
Thank you for sharing your point of view.
Sadly no fetch on IE11 (which I have 15% of my users on still, try getting old non-tech corporates to move). Next year, maybe...