Understanding execution order in Express handlers

index.js

/*
    To demonstrate the importance of understanding async execution order in the context of Express route handlers

    Try in your browser at https://runkit.com/rainabba/understanding-execution-order-in-express-handlers
**/


const express = require('express'),
    app = express(),
    PORT = 3000,
    axios = require('axios');
  
app.use(express.json());
    
app.get('/bad', function (req, res) {
    res.json( { Date: new Date() } );
    console.log("bad:: LOGGED AFTER res.json(), but in same frame."); // Seems safe
    setTimeout( function(){ 
        // This async code outside the current frame where res.json() was called and will never execute
        console.log("bad:: LOGGED AFTER res.json(), but in different frame that won't execute when expected."); 
    }, 3000); 
})

app.get('/okay', function (req, res) {
    console.log("okay:: LOGGED AFTER res.json(), but in same frame."); // safe
    setTimeout( function(){ 
        // This async code outside the current frame where res.json() was called and will never execute
        console.log("okay:: LOGGED AFTER res.json(), but in different frame that won't execute when expected."); 
    }, 3000); 
    return res.json( { Date: new Date() } );
})

app.get('/good', function (req, res) {
    console.log("good:: LOGGED AFTER res.json(), but in same frame."); // safe
    setTimeout( function(){ 
        // This async code outside the current frame where res.json() was called and will never execute
        console.log("good:: LOGGED BEFORE res.json(), but in a different frame via setTImeout, but as expected."); 
        return res.json( { Date: new Date() } );
    }, 3000); 
})


app.listen(PORT, function(err){
    if (err) { console.error( { err } ); }
    console.log("Server listening on PORT", PORT);
});

async function getCall(path) {
    console.log("In getCall");
    let res = await axios.get("http://localhost:3000/"+path);
    // console.log({ res });
    
    return res.data;
}


console.log("Before getCall(bad)");
let badData = await getCall("bad"); 
console.log({ badData });
console.log("After getCall(bad)");

console.log("Before getCall(okay)");
let okayData = await getCall("okay"); 
console.log({ okayData });
console.log("After getCall(okay)");

console.log("Before getCall(good)");
let goodData = await getCall("good"); 
console.log({ goodData });
console.log("After getCall(good)");

/*
    "Before getCall(bad)"
    "In getCall"
    "Server listening on PORT"
    3000
    "bad:: LOGGED AFTER res.json(), but in same frame."
    Object {badData: Object {Date: "2021-11-23T17:00:33.130Z"}}
    "After getCall(bad)"
    
    "Before getCall(okay)"
    "In getCall"
    "okay:: LOGGED AFTER res.json(), but in same frame."
    Object {okayData: Object {Date: "2021-11-23T17:00:33.139Z"}}
    "After getCall(okay)"
    
    "Before getCall(good)"
    "In getCall"
    "good:: LOGGED AFTER res.json(), but in same frame."
    "bad:: LOGGED AFTER res.json(), but in different frame that won't execute when expected."
    "okay:: LOGGED AFTER res.json(), but in different frame that won't execute when expected."
    "good:: LOGGED BEFORE res.json(), but in a different frame via setTImeout, but as expected."
    Object {goodData: Object {Date: "2021-11-23T17:00:36.143Z"}}
    "After getCall(good)"
**/