how to wait for API call to complete in angular & typescript

Question

I'm making an app using Gmail API. In order to send a reply to a thread, I need to get Message-ID and References headers from original message. And then these headers will be included in reply message. So before sending a reply, I'm fetching these headers from Gmail API. Headers are being fetched successfully but my code does not wait for them to be fetched and sends the reply. How can I wait for fetching call to complete. I've used promises but as I'm beginner in angularJS, I don't think I implemented them correctly. Please guide me to correct my code. Thanks.

public getReplyMessage(userId, messageId):Promise<any> {

    var headersToReturn = {
        'MessageID' : '',
        'References' : '',
    }

    gapi.client.load('gmail', 'v1', () => {
        var request = gapi.client.gmail.users.messages.get({
            'userId': userId,
            'id': messageId,
            'format': 'metadata',
            'metadataHeaders': [ 'Subject','References','Message-ID' ]
        });
        request.execute((message) => {

            var headers = message.payload.headers;

            $.each(headers, ( name , value ) => {
                if(name == 'Message-ID'){
                    headersToReturn.MessageID = value;
                }
                else if(name == 'References'){
                    headersToReturn.References = value;
                }
            });


        });
    });
    return Promise.resolve(headersToReturn);
}

And here is the code to call that function.

this.gmailApiService.getReplyMessage('me', this.MsgId).then((msgHeadersForReply) => {
        this.MessageIDHeader = msgHeadersForReply.MessageID;
        this.ReferencesHeader = msgHeadersForReply.References;
    });
    console.log("MsgIDHeader => "+this.MessageIDHeader); // this logs empty string.

Any help will be highly appreciated. Thanks :)

Answer 1

You are working with Promise, so no need Observables here.
From what I see is that your console.log() stands outside the Promise, So it is NULL indeed.

this.gmailApiService.getReplyMessage('me', this.MsgId).then((msgHeadersForReply) => {
        this.MessageIDHeader = msgHeadersForReply.MessageID;
        this.ReferencesHeader = msgHeadersForReply.References;
        console.log("MsgIDHeader => "+this.MessageIDHeader); // <-- move it inside 
    });

You just have to move the log inside the promise, so only when the resolved result returned, You actually have the result and there you can access its values.

Also, if you have more code to process and you want to structure it that way, you can keep chaining the then() so each level, wait for the previous.

getReplyMessage()
.then(results => ... )
.then(() => console.log())

and so on.

After you comment, your problem is in the Promise, and not in the return. try this:

public getReplyMessage(userId, messageId) {
 return new Promise((resolve, reject) => {
    var headersToReturn = {
        'MessageID': '',
        'References': '',
    }
    gapi.client.load('gmail', 'v1', () => {
        var request = gapi.client.gmail.users.messages.get({
            'userId': userId,
            'id': messageId,
            'format': 'metadata',
            'metadataHeaders': ['Subject', 'References', 'Message-ID']
        });
        request.execute((message) => {

            var headers = message.payload.headers;

            $.each(headers, (name, value) => {
                if (name == 'Message-ID') {
                    headersToReturn.MessageID = value;
                } else if (name == 'References') {
                    headersToReturn.References = value;
                }
            });
            resolve(headersToReturn)
        });
    });
 });
}