Javascript 如何使用$q解析从“$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;
});

有人能告诉我我可能做错了什么吗。我原以为解析也会返回数据，但它似乎没有返回数据。

试试这个

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

我认为这是因为代码中缺少}，这就是为什么数据在getTopics函数中没有任何值

试试这个

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

---

我认为这是因为代码中缺少}，这就是为什么数据在getTopics函数中没有任何值

试试这个语法，当我将一些现有的

$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（）。那么（…）

本身就是一个承诺，调用代码可以进一步使用它。

试试这个语法，这就是我在将一些现有的

$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（）。那么（…）

本身就是一个承诺，调用代码可以进一步使用它。

也许这是个人偏好的问题，但我使用

$q.defer（）

技术来“promisify”同步函数。在已经异步的情况下，例如，已经是一个承诺，如

$http

和

$timeout

，我使用

设置一个成功处理程序，然后
函数，根据需要修改结果，并使用
$q.when（）将对象作为承诺返回

请参阅中的
when
功能

我创建了一个（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);
});

也许这是个人偏好的问题，但我使用
$q.defer（）
技术来“提示”同步函数。在已经异步的情况下，例如，已经是一个承诺，如
$http
和
$timeout
，我使用
设置一个成功处理程序，然后
函数，根据需要修改结果，并使用
$q.when（）将对象作为承诺返回

请参阅中的
when
功能

我创建了一个（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);
});

您确定正在调用
success
？尝试删除
：void
tooYes它在调试器中的var x=数据处停止。但当我将鼠标悬停在数据上时，chrome调试器不会显示任何内容。看起来您使用的是typescript，但您将
数据
结果声明为
无效
，而不是
任何
。我不确定，但是void听起来好像没有真正的内容。我删除了：void，它仍然是一样的。它转到var x=data，但数据没有显示任何内容。如果我检查另一点并查看输出，它正确地填充了数据，可能是因为您忘记了topicService中的结束标记“{”。请尝试在var x=data之后添加“}”；您确定正在调用
success
？尝试删除
：void
tooYes它在调试器中的var x=数据处停止。但当我将鼠标悬停在数据上时，chrome调试器不会显示任何内容。看起来您使用的是typescript，但您将
数据
结果声明为
无效
，而不是
任何
。我不确定，但是void听起来好像没有真正的内容。我删除了：void，它仍然是一样的。它转到var x=data，但数据没有显示任何内容。如果我检查另一点并查看输出，它正确地填充了数据，可能是因为您忘记了topicService中的结束标记“{”。请尝试在var x=data之后添加“}”；很抱歉，这只是我输入问题时的一个错误。}实际上在我的代码中。很抱歉，这只是我输入问题时的一个错误。}实际上存在于我的代码中。请避免使用！哈谢谢你的提示-我已经更改了自己的代码，但不确定Anne现在应该如何更改她在这种情况下，它只是
getTopics（…）{return$http.get（…）.then（data=>（{details:data}））；}
。你能帮我们改进这个问题的答案吗？它们的哪些部分很难理解？谢谢-希望我已经正确地解释了您，在箭头函数中，围绕对象文字的那些参数非常重要：-）请避免！哈谢谢你的提示-我已经更改了自己的代码，但不确定Anne现在应该如何更改她在这种情况下，它只是
getTopics（…）{return$http.get（…）.then（data=>（{details:data}））；}
。你能帮我们改进这个问题的答案吗？它们的哪些部分很难理解？谢谢-希望我已经正确地解释了您，在箭头函数中，围绕对象文字的那些参数非常重要：-）