async function not being called in callback of another function

Question

I have a simple class that loads in a google map, does some ajax and then on that response will eventually place some markers on the map, the class looks like, this,

class Map extends BaseComponent {

    constructor(element) {
        super(element);
        this._element = element;
        this.init();
    }
    
    init() {
        this.initialiseLoader();
    }

initialiseLoader(position = {}) {
        const loader = new Loader({
            apiKey: 'xxxxxxxx',
            version: 'weekly',
            libraries: []
        });

        loader.load()
            .then((google) => {
                this.map = new google.maps.Map(document.querySelector('.lta-map'), {
                    zoom:12
                });
                this.map.setCenter({
                    lat: Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'latitude'),
                    lng: Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'longitude')
                });
                this.placeMarkers();
                return true;
            })
            .catch((error) => { alert(error) });
    }

    async placeMarkers() {
        const markers = await Request.get(`${this.endpoint}?/latititude=${Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'latitude')}&longitude=${ Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'longitude')}`)
        .catch(() => { 
            console.log('error');
        });

        console.log(markers);
    }
}

The maps loads fine but when it hits the this.placeMarkers() call I get an error message claiming that,

this.placeMarkers is not a function

Is it because it's an async function?

Can you make a [mre] of your issue, preferably using a [code snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)? To me, the code here looks like it should not be throwing the error you've shown, assuming that `initialiseLoader` is only called from within `init` — Nick Parsons, Jan 18 '22 at 11:16

score -1 · Answer 1 · answered Jan 18 '22 at 14:03

make initialiseLoader(position = {}) and placeMarkers() arrow functions like this

initialiseLoader = (position = {}) => { yout code here ...}

placeMarkers = () => { your code here .. }

and maybe move placeMarkers inside initialiseLoader

Thats all i can think of

async function not being called in callback of another function

1 Answers1