Long description

The figure shows 2 Web browser windows and a block of code. The first browser window shows three lines of warning messages on the left followed by the line numbers in the h t m l at the right. The lines read as follows. Line 1: before the fetch open parenthesis close parenthesis; Line number: fetch hyphen tester hyphen 1 dot h tm l colon 9. Line 2: after the then open parenthesis close parenthesis Line number: fetch hyphen tester hyphen 1 dot h tm l colon 17. Line 3: response received exclamation Line number: fetch hyphen tester hyphen 1 dot h tm l colon 14. The lines represent the Execution order as seen in the browser console.

The second browser window is placed below the first browser window. It shows the expanded view of the warning messages shown in the first browser window. Line 1 shown in the first browser is expanded into a table with 2 rows and 2 columns. The column headings read as follows: open parenthesis index close parenthesis and Value. Row 1, open parenthesis index close parenthesis column: open square bracket open square bracket PromiseStatus close square bracket close square bracket. Row 1, Value column: open double quotes pending close double quotes. Row 2, open parenthesis index close parenthesis column: open square bracket open square bracket PromiseValue close square bracket close square bracket. Row 2, Value column: undefined. Line 2: after the then open parenthesis close parenthesis. Line 3: response received exclamation. Line 3 shown in the first browser is expanded into a block of code that reads as follows: Line 1: Promise i at indentation level 0. Line 2: underscore proto underscore colon Promise at indentation level 1. Line 3: open square bracket open square bracket PromiseStatus close square bracket close square bracket colon open double quotes resolved close double quotes at indentation level 1. Lines 1 and 3 indicates that Once the data is received, the Promise status is changed to resolved. Line 4: open square bracket open square bracket PromiseValue close square bracket close square bracket colon Response at indentation level 1. Line 5: body colon open parenthesis ellipsis close parenthesis at indentation level 2. Line 6: bodyUsed colon false at indentation level 2. Line 7: headers colon Headers open curly brace close curly brace at indentation level 2. Line 8: ok colon true at indentation level 2. Line 9: redirected colon false at indentation level 2. Line 9: status colon 200 at indentation level 2. Line 10: statusText colon open double quotes O K close double quotes at indentation level 2. Lines 7 to 10 also includes other information such as H T T P headers and the actual data.

A block of H T M L code corresponding to the second browser window is placed below the second browser and reads as follows. Line 1: console dot log open parenthesis open single quote before the fetch open parenthesis close parenthesis close single quote close parenthesis semicolon at indentation level 0. Line 1 corresponds to the line 1 warning message in the second browser window. Line 2: let prom equals fetch open parenthesis open single quote forward slash “a” p i forward slash cities dot p h p question mark country equals Italy close single quote close parenthesis semicolon at indentation level 0. Line 3: console dot table open parenthesis prom close parenthesis semicolon at indentation level 0. The table shown in the second browser window corresponds to line 3 in the first browser window. Note: Notice that fetch returns a Promise object whose status is pending. Line 4: prom dot then open parenthesis function open parenthesis response close parenthesis open curly brace at indentation level 0. Line 5: console dot warn open parenthesis open single quote response received exclamation close single quote close parenthesis semicolon at indentation level 1. Line 5 corresponds to Line 3 warning message in the second browser window. Line 6: console dot log open parenthesis prom close parenthesis semicolon at indentation level 1. Line 6 corresponds to Line 1 of the block of code in the second browser window. Line 7: close curly brace close parenthesis semicolon at indentation level 0. Line 8: console dot log open parenthesis open single quote after the then open parenthesis close parenthesis close single quote close parenthesis semicolon. Line 8 corresponds to Line 2 warning message in the second browser window.