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 :)

you are talking about Typescript. Are you using Angular version 2 or more ? The "AngularJS" name is really reserved for the first version of Angular, which was not using Typescript as far as I know. If this is a mistake, please edit and retag your question accordingly, that will help it being better received. — Pac0
– Pac0, Commented Aug 10, 2018 at 13:34
@wrivas as i mentioned I'm beginner in angular, so don't know much about it. can you please edit my code using Observable? if possible. — Asad ullah
– Asad ullah, Commented Aug 10, 2018 at 13:39

Dark Falcon · Accepted Answer · 2018-08-10 14:03:55Z

4

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)
        });
    });
 });
}

edited Aug 10, 2018 at 14:03

Dark Falcon

44.2k6 gold badges91 silver badges104 bronze badges

answered Aug 10, 2018 at 13:47

dAxx_

2,3001 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dAxx_ Over a year ago

@Asadullah try the edit. Im not familiar with this gapi and what it returns, but I tried to make sure that it resolve only after the new data updated.

Dark Falcon Over a year ago

@dAxx_: The resolve needs to be inside the innermost callback. You had it one callback further out, which means it would be called before request.execute completed.

dAxx_ Over a year ago

@DarkFalcon good catch, too much parentheses heh, I would transform it to async/wait, but i didnt want to get into that right now.

Asad ullah Over a year ago

@dAxx_ Tried your edit too. But still returning empty string. if I console.log in request.execute then it shows data correctly. You think I'm calling that promise correctly?

dAxx_ Over a year ago

if you tried my edited (after the edit of Falcon) it should work, especially if its work when you console log in the same place. Add a catch to catch any error, maybe something is failed in between, and check the result.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related