javascript - 在 $http.get 从 angularjs 中的 RESTful API 获取数据时放置一个微调器

Question

我在控制器中使用此功能获取数据：

var fetchStoreItems = function () {
    return $http.get('/enterprises/_store').then(function (response) {
        $scope.items = response.data;
    }, function (errResponse) {
        console.error("Error while fetching data")
    })
};

它运行良好且速度足够快。但是，如果有很多物品要取怎么办？！我想在获取数据时放置一个微调器。

我怎样才能做到这一点？

Answer 1

在您的控制器中，

var fetchStoreItems = function () {
    $scope.loading = true;            //define a `$scope` variable; show loading image when ajax starts
    return $http.get('/enterprises/_store').then(function (response) {
        $scope.items = response.data;
        $scope.loading = false;       //hide loading image  when ajax successfully completes
    }, function (errResponse) {
        console.error("Error while fetching data");
        $scope.loading = false;      //hide loading image  when ajax error
    })
};

<img src="pathToLoadingImage" ng-show="loading" />  // show the loading image according to `$scope.loading`

Answer 2

如果您想将它用于其他一些 API 调用，那么 kalhano 的回答效果很好。但是，如果您希望所有 Angular http 调用都使用微调器，则可以考虑使用拦截器。

请检查此链接： Http call docs with interceptors Explained