Weekly Reads | February 22nd
Hey fellow web developers, this week I’ve fetched some really helpful links on ES6 Fetch API for you, I promise :)
Recently we started refactoring asynchronous requests from jQuery.ajax to fetch API as a first step to reduce dependency on legacy jQuery code in a customer project. Refactoring the requests is quite straight forward — once you’ve spotted the similarities and differences of Fetch API and jQuery.ajax. The tricky part is handling the returned data, promises and errors.
MDN web docs: Using Fetch
A comprehensive and well written documentation of the Fetch API with lots of code examples and explanations. It’s a good starting point and reference source on the Fetch API.
CSS-Tricks: Using Fetch
Another comprehensive piece on the Fetch API by Zell Liev with even more details and code examples. It is really important to understand the different approach of Fetch on error handling: Contrasting to jQuery.ajax, only network errors are rejected by the Fetch. All other http status codes are seen as successful and have to be handled in the “then” function or manually rejected.
Brandon Morelli: A Simple guide to ES6 Promises
All magic of asynchronously handling request responses with Fetch is done using ES6 promises — so it’s essential to learn and understand ES6 Promise API when using Fetch. Coming from jQuery deferred, Promise API was the hardest part on our refactoring journey.
Matt Burgess: How to get Data in 2018: Fetch
An overview of different frontend approaches on getting Data from backend and APIs. In his part on Fetch, Matt points out that getting data with response.json() counter-intuitively doesn’t return JSON-data, but a “readable stream” which has to be handled as a promise itself.
JavaScript.info: Promise API
Promise class is providing four static methods: resolve, reject, all and race. The most interesting for us was Promise.all enabling to call multiple requests in parallel.
