Long description

The first block of code reads as follows. Line 1: fetch open parenthesis movie A P I close parenthesis at indentation level 0. Line 2: dot then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis at indentation level 1. Line 3: dot then open parenthesis movies arrow function open curly brace at indentation level 1. Line 4: fetch open parenthesis art A P I close parenthesis at indentation level 2. Line 5: dot then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis at indentation level 3. Line 6: dot then open parenthesis galleries arrow function open curly brace at indentation level 3. Line 7: fetch open parenthesis lang A P I close parenthesis at indentation level 4. Line 8: then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis at indentation level 5. Line 9: then open parenthesis languages arrow function open curly brace at indentation level 5. Line 10: result dot inner H T M L equals ellipsis at indentation level 6. Line 11: close curly brace close parenthesis semicolon at indentation level 5. Note: this approach must be used if the fetch requests are dependent upon each other.

The first browser labeled DevTools is placed below the first block of code. The browser shows the operations that take place in a server. The navigation bar at the top of the browser consists of the tabs: Elements, Console, Sources, Network, Performance, Memory, Application, Security, Audits, and AdBlock. Network is selected in the navigation bar. The screen below the navigation bar shows a list of document and three p h p files that are fetched and their corresponding status at different intervals of time. The interval of time ranges from 400 m s to 2.60 s. The status of the fetched files are shown as horizontal bars that are divided into three sections of yellow, green, and blue, respectively, that range from a column titled Waterfall till the last column of the time interval. The first row that consists of a document name does not show a horizontal bar. The following rows that consist of p h p files show a horizontal bar each. Row 2: The horizontal bar starts from Waterfall as a yellow bar, transforms into a green bar, and then after 400 m s, transforms into a blue bar, and ends approximately at 2 s. Row 3: The horizontal bar starts as a yellow bar from 2 s, where the file in row 2 stops fetching, transforms into a green bar approximately at 2.10 s, transforms into a blue bar approximately at 2.20 s and ends approximately at a time interval close to 0 s. Row 4: The horizontal bar starts as a yellow bar at a time interval close to 0 s, where the file in row 3 stops fetching, transforms to a green bar at 0 s, and transforms to a blue bar approximately at a time interval close to 2.60 s and ends at 2.60 s. The part of the horizontal bar, which is yellow is marked as Connecting. The part of the horizontal bar, which is green is marked as Waiting (server retrieving data from database). The part of the horizontal bar, which is blue is marked J SON content downloaded. Note: Notice that browser can't make the next fetch request until the previous one has resolved and returned its data, thus taking a total 2.6 seconds.

The second block of code reads as follows. Line 1: StartCommand let EndCommand prom1 equals fetch open parenthesis movie A P I close parenthesis dot then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis semicolon at indentation level 0. Line 2: let prom2 equals fetch open parenthesis art A P I close parenthesis dot then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis semicolon at indentation level 0. Line 3: StartCommand let EndCommand prom3 equals fetch open parenthesis lang A P I close parenthesis dot then open parenthesis response arrow function response dot j son open parenthesis close parenthesis close parenthesis semicolon at indentation level 0. Line 4: Promise dot all open parenthesis open square bracket prom1, prom2, prom3 close square bracket close parenthesis at indentation level 0. Line 5: then open parenthesis resolves arrow function open curly brace at indentation level 1. Line 6: open square bracket movies comma galleries comma languages close square bracket equals resolves semicolon at indentation level 2. Line 7: result dot inner H T M L equals at indentation level 2. Line 8: close curly brace close parenthesis semicolon at indentation level 1. Note: this approach can on be used if the fetch request are unrelated.

The second browser labeled DevTools is placed below the second block of code. The browser shows the operations that take place in a server. The navigation bar at the top of the browser consists of the tabs: Elements, Console, Sources, Network, Performance, Memory, Application, Security, Audits, and AdBlock. Network is selected in the navigation bar. The screen below the navigation bar shows a list of three p h p files and a document that are fetched and their corresponding status at different intervals of time. The interval of time ranges from 400 m s to 2.00 s. The status of the fetched files are shown as horizontal bars that are divided into three sections of yellow, green, and blue, respectively, that range from a column titled Waterfall till the last column of the time interval. The following rows that consist of p h p files show a horizontal bar each. Row 1: The horizontal bar starts as a yellow bar from Waterfall, transforms into a green bar, and then after 400 m s, transforms into a blue bar, and ends at 2 s. Row 2: The horizontal bar starts as a yellow bar from Waterfall, transforms into a green bar, and then after 450 m s, transforms into a blue bar that ends approximately at 600 m s. Row 3: The horizontal bar starts as a yellow bar from Waterfall, transforms into a green bar, and then after 455 m s, transforms into a blue bar that ends approximately at 500 m s. The fourth row that consists of a document name does not show a horizontal bar. Note: Here the three fetch requests are simultaneous, which is more efficient (the total is now only 2 seconds).