如何以$ q解析从$ $ http返回数据?

时间:2015-08-13 06:45:20

标签: javascript angularjs typescript angular-promise angular-http

我有一个javascript函数,我已经简化了这个问题。它实际上对从$ http调用中检索到的数据做了一些处理,然后我希望这些数据与对调用它的函数的承诺一起提供:

getTopics = (queryString: string) => {
        var self = this;
        var defer = self.$q.defer();
        self.$http({
            // cache: true,
            url: self.ac.dataServer + '/api/Topic/GetMapData' + queryString,
            method: "GET"
        })
            .success((data) => {

                var output: ITopics = {
                    details: data
                }
                // output is correctly populated with data
                defer.resolve(output);

                // I also tried this and it get seen in the calling function either
                // defer.resolve('abc');
            })
        return defer.promise;
    };

这称之为:

return topicService.getTopics("/" + subjectService.subject.id)
       .then((data) => {
           // data seems to be not defined
           var x = data;
});

有人可以告诉我,我可能做错了什么。我认为决心也会返回数据,但似乎没有这样做。

3 个答案:

答案 0 :(得分:2)

尝试使用此语法,这是我将一些现有的$q代码移动到ES6时所解决的问题

getTopics(queryString) {
    return this.$q((resolve, reject) => {
        this.$http.get(self.ac.dataServer + '/api/Topic/GetMapData' + queryString)
        .success((data) => {
            resolve({details: data});
        })
        .error( (err) => reject(err) );
    });
}

或者更好,正如Bergi建议的那样:

getTopics(queryString) {
    return this.$http.get(self.ac.dataServer + '/api/Topic/GetMapData' + queryString)
        .then( data => ({details: data}) );
    });
}

$http.get().then(...)本身就是一个可以被调用代码进一步使用的承诺。

答案 1 :(得分:2)

也许这是个人偏好的问题,但我使用$q.defer()技术来实现" promisify"同步功能。如果某些内容已经异步,即已经是承诺,例如$http$timeout,我使用then函数设置成功处理程序,根据需要修改结果并使用$q.when()

将对象作为承诺返回

请参阅$q documentation

中的when功能

我已经创建了一个Plnkr(在Javascript中),用于演示在这种情况下使用$q.when。相关代码:

$scope.results = ['a', 'b', 'c', 'd'];
$scope.getTopics = function() {

  //Replace $timeout with $http
  // $http({
  // }).then....

  return $timeout(function() {
      console.log('Simulating HTTP response');
      return $scope.results;
    }, 1500)
    .then(function(res) {
      var updatedRes = [];
      //Modify the HTTP/timeout results
      console.log('Modifying HTTP/timeout result');
      angular.forEach(res, function(item) {
        item = item + '1';
        updatedRes.push(item);
      });

      //Wrap the result object in $q.when to create a promise
      return $q.when(updatedRes);
    });
};

$scope.getTopics().then(function(data) {
  console.log('Using the modified result');
  $scope.updatedResults = data;
  console.log('getTopics result = ', data);
});

答案 2 :(得分:1)

试试这个。

return topicService.getTopics("/" + subjectService.subject.id)
   .then((data): void => {
       // data seems to be not defined
       var x = data;
   } // ADDED
);

我认为,因为代码中缺少},导致数据在getTopics函数中没有任何值。