How to use promises in Angular and get rid of using timeouts

Question

I am trying to wait for the server to return the some data and then do another callback. This is my code

commonApp.factory('replyMessageFactory', ['$q', '$http', '$log', function ($q, $http, $log) {
var factoryObj = {};

factoryObj.send = function (obj) {
    var req = {
        method: 'POST',
        url: "/api/ThreadMessage",
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        data: obj
    }

    return $http(req);
}
return factoryObj;
}
]);

I am calling this factory method as below

scope.sendReply = function () {
     updateModel();
     var replyModelValue = scope.replyModel;
     replyMessageFactory.send(scope.replyModel).then(function (data) {
             scope.clear();
             scope.updateThread(replyModelValue);
     });
}

The thing is that I am not getting the latest data from the back end. If I add timeout then it works. Could it also be because of the back end?

My backend api is this

public async Task<HttpResponseMessage> Post(ThreadMessageModel messageData)
{

try
    {
        await _findMessageService.AddMessageReply(findmessage);
        return new HttpResponseMessage(HttpStatusCode.OK);
    }
    catch (Exception exception)
    {
        Log.Log(EventSeverity.Error, new { Message = "Could not create message", exception });
        throw new Exception(string.Format("Kan ikke opprette melding. {0}", exception));
    }
}


public Task<int> AddMessageReply(FindMessage message)
{
try
    {
        client.Update<FindMessage>(message.Id).Field(x => x.Replies, message.Replies).Execute();
         return Task.FromResult(1);
    }
    catch (Exception exception)
    {
        log.Log(EventSeverity.Error, "Could not add message and feedback status", exception);
        throw;
    }
}

Any ideas?

`$http` returns a promise, so [using `$q` is not needed](http://www.codelord.net/2015/09/24/%24q-dot-defer-youre-doing-it-wrong/), that's an anti-pattern. You can try: `return $http.post(url,obj).then((res) => {return res.data;})` — Aleksey Solovey, May 09 '18 at 12:06
Please show us how you are calling `send` and what `updateThread` does. The second snippet you posted looks fine. — Bergi, May 09 '18 at 12:32
Read [You're Missing the Point of Promises](https://blog.domenic.me/youre-missing-the-point-of-promises/). — georgeawg, May 09 '18 at 15:49
I'm not sure who identified "duplicates," but I can't see how either one is even remotely a similar question. — theMayer, May 15 '18 at 14:22
@theMayer thanks. I tried understanding that as well but couldn't understand — mohsinali1317, May 16 '18 at 06:24
You’re up to 4 reopen votes, so one more and it will be reopened. I suspect we have a golden ticket holder who identified a similar answer on one of the dupes, but that is not a valid reason to flag as a duplicate question. — theMayer, May 16 '18 at 14:11

score 2 · Answer 1 · answered May 09 '18 at 13:01

You should not pass that scope.updateThread into the factory, instead you should only return the $http promise.

commonApp.factory('replyMessageFactory', ['$q', '$http', '$log', function ($q, $http, $log) {

    var factoryObj = {};
    factoryObj.send = function (obj) {

        var req = {
            method: 'POST',
            url: "/api/ThreadMessage",
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            data: obj
        };
        return $http(req);
    }    
    return factoryObj;
  }
]);

And you will call it like:

scope.sendReply = function () {
    replyMessageFactory.send(scope.replyModel)
        .then(function (result) {
            scope.updateThread(result);
        });
}

Now your scope.updateThread can work syncronously.

P.S. care about that typo into scope.updateThread parameter, it should be:

scope.updateThread = function (obj) {
    getMessages.getMessageById(obj, scope.updateThreadCallback);
}

not working, sometimes it gets the latest and other time it doesn't — mohsinali1317, May 09 '18 at 13:18

How to use promises in Angular and get rid of using timeouts

1 Answers1