AngularJS how to use $q in Typescript

Question

I am new at AngularJs and very new at Typescript. I included Typescript in my AngularJs project but couldn't handle a service where i return a $q(function(){...})

my code looks like:

  function foo(request, monitor, currentMonitorPropertys) {
    var currentChart;
    return $q(function (resolve) {
        $http(request).success(function (chartResponse) {
            ...
            resolve(monitor);
        }).error(function(response){
            ...
        });
    });

I work with VS2013(TypeScript), if i implement this method like above, there comes an compilererror: Value of type 'IQService' is not callable. Did you mean to include 'new'?

So how could I implement the function with Typescript. Thank you for your answer.

This looks like it may be a bug in the angular d.ts contract. Can you try it with return new $q(functon (resolve) { and see if it works? — Martin
– Martin, Commented Jun 8, 2015 at 15:15
this won't work, i can not generate a new $q. My first idea was to return $q(function(resolve){ ... (with the given $q-service) but the compiler wasn't happy with that. i don't know how to handle the new implementation, where i give the $q-service a function, so i used the old implementation. — Thomas Zoé
– Thomas Zoé, Commented Jun 10, 2015 at 7:00

Brocco · Accepted Answer · 2015-06-08 15:25:04Z

1

There are several ways to return a promise... $http returns a promise with each of its ajax calls, $timeout also returns a promise.

That being said you want to return a promise based upon something other than a scheduled event ($timeout, $interval) via $q you can do this...

// assume $q is injected into your service/controller/factory
// create a defer object
var defer = $q.defer();
// do something...
if (doSomething()){
  defer.resolve(); //something went right
else {
  defer.reject(); //something went wrong
}
//make sure you return out the promise, so the consumer can act upon it.
return defer.promise;

Also, $q has some nice helper methods to return a promise that you can use when you stub out some logic;

// this will a promise that will resolve with the value provided
return $q.when({some: 'result'});

// this will return a promise that will reject with the error specified
return $q.reject('some error message');

answered Jun 8, 2015 at 15:25

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

1 Comment

Thomas Zoé Over a year ago

Thank you, and all other who commented. It seems like the old implementation of the service will work with VS2013 and typescript.

devqon · Accepted Answer · 2015-06-08 15:06:18Z

0

$q isn't a function but a service. If you want a defer, you can use the following code for example:

var deferred = $q.defer();

$http(request).success(function (chartResponse) {
        deferred.resolve(monitor);
    }).error(function(response){
        deferred.reject(response);
    });

// return promise
return deferred.promise;

What you can keep in mind if you don't do anything else, you can just return the $http call, because it is a promise itself:

return $http(request);

answered Jun 8, 2015 at 15:06

devqon

14k2 gold badges32 silver badges46 bronze badges

Comments

Aurelio · Accepted Answer · 2015-06-08 17:34:31Z

0

As you're using $http (that already returns a promise) why not returning this promise directly? Simpler and faster.

function foo(request, monitor, currentMonitorPropertys) {
  var currentChart;
  return $http(request).then(function (chartResponse) {
      //...
      return monitor;
  });
});

Then when consuming this service you could manage success and error from there, which makes for a tidier implementation:

// for ex. in a controller

foo().then(mySuccessCallback)
     .catch(myErrorHandler)

edited Jun 8, 2015 at 17:34

answered Jun 8, 2015 at 15:26

Aurelio

25.9k9 gold badges62 silver badges64 bronze badges

Comments

Ramesh M · Accepted Answer · 2016-11-19 07:16:25Z

0

You need to defer $q before resolve it This is code try this one

(function retriveDemoJsonData(){

    angular.module('myApp').factory('actionData', function ($q, $http) {

        var data={};
        data.actionDataJson = function(id){
           //The original business logic will apply based on URL Param ID

var defObj = $q.defer();
            $http.get('demodata.json')
                .then(function(res){
                     defObj.resolve(res.data[0]);
                });
            return defObj.promise;

        }
        return data;
    });

})();

----------+ I hope this will help you......

answered Nov 19, 2016 at 7:16

Ramesh M

191 bronze badge

Collectives™ on Stack Overflow

AngularJS how to use $q in Typescript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related