Example: Fetch location, then weather data
I. With callbacks, not Promises
getWeather(function(weather){ console.log(weather) }); function getWeather(then){ getPosition(function(position){ get('//api.openweathermap.org/data/2.5/weather?' + 'lat=' + (0|position.coords.latitude) + '&lon=' + (0|position.coords.longitude), then); }); } function getPosition(then){ return navigator.geolocation.getCurrentPosition(then); } function get(url, then){ with (new XMLHttpRequest) onload = function(xhr){ then(JSON.parse(xhr.target.response)); }, open('GET', url), send(); }
II. With Promises
getPosition() .then(getWeather) .then(log); function getPosition(){ return new Promise(function(then){ navigator.geolocation.getCurrentPosition(then); }); } function getWeather(position){ return new Promise(function(then){ get('//api.openweathermap.org/data/2.5/weather?' + 'lat=' + (0|position.coords.latitude) + '&lon=' + (0|position.coords.longitude)).then(then); }); } function get(url, then){ return new Promise(function(then){ with (new XMLHttpRequest) onload = function(xhr){ then(JSON.parse(xhr.target.response)); }, open('GET', url), send(); }); }; function log(){ console.log(arguments[0]) }
This does not look easier
Good one. It doesn't.What matters is that the user flow is easier to read. While the implementation of the calls may be more complicated to understand and debug, these parts usually (especially with tests) do not see much change.
The difference may be subtle, but very important: Functional separation greatly improves maintainability. Once the functionality is available, it can be very easily reused by other flows without fuss. Conversely, the first example makes the code impossible or very difficult to reuse.
No comments:
Post a Comment