Как я могу вернуть данные из `$ http` с разрешением $ q?

Question

У меня есть функция 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; 
}); 

Может кто-нибудь сказать мне, что я могу делать неправильно. Я думал, что решение также вернет данные, но, похоже, это не так.

Answer 1

Попробуйте этот синтаксис, который является то, что я swtiched, когда я переехал некоторые существующие $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)); 
    }); 
} 

или намного лучше, как это было предложено Берги:

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

$http.get().then(...) само собой обещание, которое может быть дополнительно использовано вызывающим кодом.

Answer 2

Попробуйте этот.

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

Я думаю, что это из-за недостающего} в коде, поэтому данные не имеют никакого значения в функции getTopics.

Answer 3

Возможно, это вопрос личных предпочтений, но я использую технику $q.defer(), чтобы «обещать» синхронную функцию. В случае, если что-то, что это уже асинхронный, то есть уже обещание, как $http и $timeout, я установил обработчик успеха с помощью функции then, изменить результат по мере необходимости и возвращает объект как обещание, используя $q.when()

Обратитесь к when функция в $q documentation

Я создал 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); 
});