Using fetch to script http

In late specs of client side javaScript there is the fetch method that is a new way of making http requests in browser. It is like the tired yet true XMLHttpRequest method, but may prove to be a little easier to use, and returns a promise out of the box.

So then the js fetch method makes use of promises, and provides an updated response api for better handling common tasks like parsing json to a workable object which is a nice feature. So in many respects it is a little more user friendly compared to the tired yet true XMLHttpRequest method that would need to be used with much additional javaScript code around it to end up with similar functionality. It might still be a smarter play to go with a user space option that makes use of XMLhttpRequest to provide the same functionality still tough, at least that is what I would do more often then not.

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 polyfill is used.

Still the fetch method is there to worth with in modren browsers, so I though it deserves a quick post so lets do this.

1 - Simple get request example of fetch

If all I want to do with fetch is to preform a get request then making such a simple get request is real simple. In that case fetch just needs to be given one argument which is the URL of the resource that you want to fetch. This is a whole world more simple compared to using XMLHttpRequest.

1
2
3
4
5
6
fetch('https://openlibrary.org/api/books?bibkeys=ISBN:9780743487733;format=json')
.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.

2 - Using a fetch pollyFill

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

Another option would be to just not use fetch at all and chose or make an http client, which is what I would often do rather than using fetch when it comes to working on an actual project where I will need to script http requests.

3 - Conclusion

So fetch is a new standard for preforming http requests that can be used in modern browsers, and maybe it is a little easier to use compared to the traditional XMLHttpRequest method. Still when it comes to worrying about browser support I still know that I will get my code to work on a wider range of clients by using the tried yet true XMlHttprequest over fetch. For this reason I often choose to go with XMLHttprequest over fetch when making my own http client, something that I find myself doing now and then when it comes to vanilla JavaScript projects. If you would like my take on XMLHttpRequest I of course wrote a post on that one for what it is worth.

In addition I would not say that fetch is a replacement for various user space http clients that wrap XMlhttprequest rather then that of fetch. If a client is designed right there is a potential to get a best of both world situation between browser support and supporting later features like promises.