'Javascript Promise Resolution Dilemma

So basically, I'm new to Javascript and was just wondering as to why I couldn't

  1. Fetch some info from a database
  2. Combine that info with some local info, to make one big JSON set
  3. Send that off to another function when called

// This function fetches some data from a db and combines it with local data
async function axer (){

    // Gets database info 
    const resp = await axios.get('http://localhost:3004/api/prod');

    // Local modification to it
    resp.data.spec = analyticsDashboardAppDB.widgets;

    Returns the big final json file to the function below this
    return await resp.data;
}

// This function sends it off when called by another function in a different js file
mock.onGet('/api/analytics-dashboard-app/widgets').reply( async config => {

    await axer().then(async r => {return [200, await r]})
    
});

When I run this, I keep getting an error saying

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'config')
   at handle_request.js:87:1

If I remove the async from config and the relevant awaits, I get the following error

Cannot read properties of undefined (reading 'then')

When I print the json file before sending it, it logs it exactly as I need it, but after I send it, only the database info is present and no local modification is. The length is the same before and after I send it though, which makes me believe the local modification to the json comes up as undefined once it's called by another function.

I'm pretty sure this has to do with my incomplete understanding of promises so if someone could help me out with this, I'd highly appreciate it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source