Angular 中的过滤和 $http 承诺

Question

我在从 JSON 文件中过滤数据时遇到问题，该文件是一个包含 20 个对象的数组。

在我的工厂里我有这两个功能。

function getData() {
    return $http
        .get('mock.json')
        .success(_handleData)
        .error(_handleError);
}

function _handleData(data) {
    var filteredData = _filterData(data, "name", "XYZ");

    console.log('filteredData', filteredData);

    return filteredData;
}

这里 console.log("filteredData") 仅显示过滤后的元素（即 20 个中的 3 个）；

下一步 - 在一项服务中，我在 ng-click 上得到了这个：

var filterMe = function () {
    DataFactory
        .getData(_address)
        .success(_handleServiceData );
}

哪里

var _handleServiceData = function (data) {
    filtered = data;
};

问题是 - 为什么 _handleServiceData 中的 'data' 显示所有元素而不是之前筛选的这些元素？

编辑：here's the plunk - 结果记录在控制台中

Answer 1

因为 filteredData 您 return 来自 _handleData 函数的 success 未传递给您在 filterMe 函数中附加的 success 回调。那是因为您将该回调附加到同一个承诺上，因为 success 函数不会像 then 方法那样创建新的承诺。因此，要解决此问题，请像这样修改您的代码：

function getData() {
    return $http
       .get('mock.json')
       .then(_handleData, _handleError); //use "then" instead of "success"
}

然后在filterMe函数中：

var filterMe = function () {
    DataFactory
        .getData(_address)
        .then(_handleServiceData );
}

Answer 2

因为 promises 是异步的，而且您似乎 return 将 filtered 的值传递给调用者 before it could be assigned。

你应该做的

function getData() {
    return $http
        .get('mock.json')
        .then(_handleData); // then (for chaining), not success!
}
var filterMe = function () {
    return DataFactory
//  ^^^^^^ return a promise, not assign globals in async callbacks
        .getData(_address)
        .catch(_handleError); // I assume you want to deal with errors only in the end
}

Angular 中的过滤和 $http 承诺

Filtering and $http promises in Angular

javascript

promise

angularjs