0

I am using Vue v2.5 and I want to make a fetch call to an API from a module and return it to a component via a mount hook. The problem is I am getting undefined in my Vue variable when the component loads. The code is:

/modules/leagueLeaders

 const getLeagueLeaders =  (url, params) => {
    fetch(url + new URLSearchParams(params), {
      method: "get",
      headers: {
        Authorization:
          "Basic ****",
      },
    })
      .then((response) => response.json())
      .then((data) => {
        let leagueLeaders = data;
        console.log(
          "leagueLeaders is %s",playerstatsentry[0].player.LastName
        ); //displays object property OK
        return leagueLeaders;
      });
  
  };

  module.exports = getLeagueLeaders;

and the component:

/components/test
mounted: async function () {
      this.qbLeaders = await getLeagueLeaders(this.fetchQbUrl, this.params);
      console.log("qBLeaders is %s", this.qbLeaders); // Prints "qBLeaders undefined"
    },

I know I must be doing something wrong with the Promise because console.log is showing

qBLeaders is undefined nflLeagueLeaders.js:28
leagueLeaders is Allen getLeagueLeaders.js:17

and obviously the await command is not waiting for the Promise in the module to resolve. I think maybe I am not returning a promise to vue component but I have tried several solutions all with no resolution. I have looked around here in StackOverflow but could not find any solutions for this particular situation. Any guidance most appreciated. Thanks in advance.

Alan
  • 1,067
  • 1
  • 23
  • 37
  • the duplicate this is closed for won't help ... your `getLeagueLeaders` isn't returning anything ... simply add `return` before `fetch(.... rest of your code` – Bravo Nov 22 '20 at 10:04
  • Thanks. I had come to that realization sometime after posting . – Alan Nov 22 '20 at 15:36

0 Answers0