如何在 javascript 类中的另一个函数中调用异步函数？

Question

i am trying to call an async function inside a class but keep getting an error that this.getcategory.then is not a function at category.js:21 I have a form which is used by the admin to add more categories into the database. categform.addEventListener('submit', e => { this line will listen for the submit event after which the data is taken and inserted into the the database using the code using the code snippet below

super.postText("../includes/getcategoy.inc.php", categformData)
            .then(res => {
                console.log(res);
                // 1. if the results are ok fetch the fresh data from the database
                this.getcategory.then(
                    res => {
                        console.log(res);
                    }
                )
            }).catch((error) => {
                console.error('Error:', error);
            });

now the above code returns a promise then if the result is ok i call another function in the same class got get the latest data form the database. the fuction is this.getcategory remember i am calling the function inside the then and am getting an error. the reason why i am calling inside the then is because only want it to be executed after sending of the data into the database has been resolved.
but when i call it outside the first function i do not get an error.. if you look just after the catch block i have commented it out. if i call it there i do not get an error. yet i do not want to call it there. remember the function returns a promise and it is defined as the last function in the class

how can i solve this problem, below is the whole code

import { FETCH } from "./fetch.js";

class CATEGORY extends FETCH {
    constructor() {
        super()
    }

listencategory() {
    //1. Listen for the button click
    const categform = document.getElementById('categotyform');
    categform.addEventListener('submit', e => {
        e.preventDefault();
        //2. get the data from form
        const categformData = new FormData(categform);
        super.postText("../includes/getcategoy.inc.php", categformData)
            .then(res => {
                // console.log(res);
                // 1. if the results are ok fetch the fresh data from the database
                this.getcategory.then(
                    res => {
                        console.log(res);
                    }
                )
            }).catch((error) => {
                console.error('Error:', error);
            });
    });
    //this.getcategory().then(res=>{
    //    console.log(res);
    //    
    //})

}

async getcategory() {
    try {
        const results = await super.get("../includes/getcategoy.inc.php");
        return results;
    } catch (error) {
        console.log(error);
    }
}
}

const categ = new CATEGORY;
categ.listencategory();

i am trying to get data that has been returned by async getcategory()

Answer 1

getcategory is an Async function that should be made a function call like below.

this.getcategory().then(
                        res => {
                            console.log(res);
                        }
                    )

This link helps you create and use promises effectively. Async functions - making promises friendly