Using fetch to script http

fetch is a new way of making http requests in browser, like the tired yet true XMLHttpRequest, but makes use of promises, and provides an updated response api for better handling common tasks like parsing json to a workable object.

It is like a browser built in axios, but because it is a new feature it might be to soon to regard it as a replacement for axios or XMLHttpRequest, unless a pollyfill is used.

Simple get request example of fetch

making a simple get request with fetch is simple enough, fetch just needs to be given one argument wich is the url of the resource that you want to fetch.

1
2
3
4
5
6
7
8
9
10
11
let url = 'https://openlibrary.org/api/books?bibkeys=ISBN:9780743487733;format=json';
fetch(url).then(response => {
return response.json();
}).then(json => {
console.log(json);
});

Here I am using the open library book api to get book info on the time machine. The data is json so I will want to use the json method of the response api to get the full json by chaining promises.

Using a fetch pollyFill

If you are concerned about support for older browsers, then a pollyfill for fetch will have to be used, or just do things the old fasion way with XMLHttpRequst as any pollyfill will likely use just that. A popular pollyfill for fetch can be found on github here at https://github.com/github/fetch.