如何在AngularJS中更新单个API请求来传递不同的Query参数?

How can I update a single API request in AngularJS to pass different Query parameters?

本文关键字：参数 Query 请求 AngularJS 更新 API 单个      更新时间：2023-09-26

我正在使用AngularJS从WordPress.com的REST API中提取帖子。

我想按类别将帖子数据解析为三个部分。

我能够创建一个正确显示帖子的应用程序，但它使用多个$http.get命令来获取每个部分中的帖子。这将导致一个非常慢的应用程序和大量的冗余。

我如何消除冗余并加快我的应用程序?是否有办法编写几个不同的控制器来更新单个API请求?

下面是我的AngularJS代码:

//Initialize My Angular App
var app = angular.module('myApp', []);
//Create Controllers
app.controller('seeDoInNewOrleansCtrl', function ($scope, $http) {
    $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=see-do-in-new-orleans&number=1')
        .success(function (response) {
        $scope.postData = response;
    });
});
app.controller('eatDrinkInNewOrleansCtrl', function ($scope, $http) {
    $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=eat-drink-in-new-orleans&number=1')
        .success(function (response) {
        $scope.postData = response;
    });
});
app.controller('musicCtrl', function ($scope, $http) {
    $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=music&number=1')
        .success(function (response) {
        $scope.postData = response;
    });
});

这里是myApp的一个小示例:https://jsfiddle.net/tr0sdky1/

简单的答案是将这3个组合到一个控制器中，而不是使用$scope。它们的postData第一个使用$scope.postDataSee，第二个使用$scope.postDataEat，第三个使用$scope.postDataMusic，各自的ng-repeat使用不同的作用域变量。

不那么简单的答案是使用promises和$q all来组合3个请求，然后使用一个中继器来遍历它们。

/

/Initialize My Angular App
var app = angular.module('myApp', []);
    //Create Controller
    app.controller('postsCtrl', function ($scope, $http, $q) {
        var categories = ['See & Do', 'Eat & Drink', 'Music'];
        var seePromise = $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=see-do-in-new-orleans&number=1');
        var eatPromise = $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=eat-drink-in-new-orleans&number=1');
        var musicPromise = $http.get('https://public-api.wordpress.com/rest/v1.1/sites/www.gonola.com/posts?category=music&number=1');
        $q.all([seePromise, eatPromise, musicPromise).then(function(results) {
            $scope.posts = results;
        });
    });

和伪html:

<div ng-repeat="category in categories">
    <span>{{category}}</span> <!-- Category name and whatever... -->
    <div ng-repeat="post in posts[$index]">
        <!-- post data -->
    </div>
</div>
相关文章：