Skip to content

README.md

Latest commit

 

History

History
33 lines (19 loc) · 1.45 KB

README.md

File metadata and controls

33 lines (19 loc) · 1.45 KB

XMLHttpRequests: Sync vs Async & Promises

There are three examples in this repo. They all feature the same user interface:

  • There is a button you can press to initiate an XMLHttpRequest to the Nobel Prize API.
  • There is an input field. It is not used by the JavaScript code but trying to type in it while a synchronous XMLHttpRequest is pending will fail.
  • There is a <pre> tag in the <body> where the response JSON of the XMLHttpRequest will be displayed.

To exacerbate the response time of the requests, open the Chrome Developer Tools, select the Network tab and change the Network Throttling menu to 'Slow 3G'.

1-base

This folder shows the unchanging part of the code by way of introduction. Pressing the button just produces a console.log.

2-xhr-sync

This folder demonstrates how a synchronous XMLHttpRequest makes the UI unresponsive while the XMLHttpRequest is pending.

  • The timer is temporarily stopped.
  • The GO button remains highlighted.
  • The input field cannot be focussed, let alone typed in.

3-xhr-callback

This version makes two asynchronous requests using callbacks. The second request depends on data from the first request.

4-xhr-promise

The code from 02-xhr-callback refactored to use promises.

5-xhr-await

The code from 03-xhr-promise refactored to use promises with async/await.