Function is showing undefined value but in console its showing result

I have two functions one is main function and another one is api calling function in which I am calling Api in this function actually it is showing result in console but when I am calling this function inside main function then its showing undefined value.

Below is my code:

async mainFun(){

    this.logger.log("in main function");
    const dat = await this.apiFun();
    this.logger.warn(dat);  // Here its showing undefined
} 

async apiFun = () =>{
    const url = 'https://reqres.in/api/unknown';
    axios.get(url).then((response) => {
     this.logger.log("In nameFun " + response.data.total);
     return response.data.total;
    }).catch((error) => {
       this.logger.log(error);
    });
}

Someone let me know why its showing undefined value.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

async mainFun(){

    this.logger.log("in main function");
    const dat = await this.apiFun();
    this.logger.warn(dat);  // Here its showing undefined
} 

async apiFun = () =>{
    const url = 'https://reqres.in/api/unknown';
    const request = await axios.get(url);
    return request.data.total;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0