javascript - Angularjs - 多个 API 调用的正确方法是什么

Question

好的，请放轻松，因为我刚开始学习 Angular。以下代码有效，但必须有更好、更简洁的方法来执行此操作。我一直在阅读我能读到的一切，据我所知，在工厂里安装这些可能是最好的？？到目前为止，我尝试过的一切最终都以失败告终，但这可能是我做错了什么。

先决条件

• 我需要能够在模块中使用它(这样我就可以添加额外的自定义指令)
• 我总共进行了 3 个 API 调用，其中两个使用 GET 方法，但一个必须使用 POST 方法

我的代码:

$apiUrl = '_includes/gtmetrix.php'; // This is using a local proxy to access remote API.
$apiKey = '';
$gapiUrl = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed';
$gapiKey = '1z2x3c4v5b6n7m8a9s';
$gapiStrategy = 'mobile';
$requestUrl = '<?php echo $_POST['url']; ?>';

function FetchCtrl($scope, $http, $templateCache) {

    $scope.method = 'POST';
    $scope.url = $requestUrl;

    $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;

        $http({method: $scope.method, url: $apiUrl + '?url=' + $scope.url, cache: $templateCache}).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data || "Request successful";
        }).
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };
    $scope.fetch();

    $scope.fetchGoogle = function() {
        $scope.code = null;
        $scope.response = null;

        $http({method: 'GET', url: $gapiUrl + '?url=' + $scope.url + '&key=' + $gapiKey, cache: $templateCache}).
        success(function(data, status) {
            $scope.status = status;
            $scope.datag = data || "Request successful";
        }).
        error(function(data, status) {
            $scope.datag = data || "Request failed";
            $scope.status = status;
        });
    };
    $scope.fetchGoogle();

    $scope.fetchGoogleMobile = function() {
        $scope.code = null;
        $scope.response = null;
        // $scope.data = '<i class="fa fa-spinner fa-spin"></i>';

        $http({method: 'GET', url: $gapiUrl + '?url=' + $scope.url + '&key=' + $gapiKey + '&strategy=' + $gapiStrategy, cache: $templateCache}).
        success(function(data, status) {
            $scope.status = status;
            $scope.datagm = data || "Request successful";
        }).
        error(function(data, status) {
            $scope.datagm = data || "Request failed";
            $scope.status = status;
        });
    };
    $scope.fetchGoogleMobile();

    $scope.updateModel = function(method, url) {
        $scope.method = method;
        $scope.url = url;
    };

}

我已经尝试让这个工作好几天了，所以在正确方向上的任何帮助将不胜感激。谢谢!

Answer 1

您可以做的一件事是使用方便的 $http.get() 和 $http.post() 方法。或者按照 Klaster_1 的建议，您可以考虑使用 $resource。不确定您要完成什么，但看起来您有一些不必要的代码。我可能会从这样的内容开始，然后根据需要添加更多内容。

function FetchCtrl($scope, $http) {
    var googleApiBaseUrl = "https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=<?php echo $_POST['url']; ?>&key=1z2x3c4v5b6n7m8a9s";

    $http.post("_includes/gtmetrix.php?url=<?php echo $_POST['url']; ?>")
        .success(function(data) {
            $scope.data = data;
        });

    $http.get(googleApiBaseUrl)
        .success(function(data) {
            $scope.datag = data;
        });

    $http.get(googleApiBaseUrl + "&strategy=mobile")
        .success(function(data) {
            $scope.datagm = data;
        });
}