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;
    };

}

我已经尝试了这几天的工作，所以我们将非常感谢任何正确方向的帮助。 THX！

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;
        });
}

Answer 2

这就是我的工作。我使用$resource代替$http，但它应该足以让你前进。您甚至可能希望使用$resource，因为它具有内置函数。

我的工厂fns。

.factory('WorkOrder', function($resource){

// $resource Usage: $resource(url[, paramDefaults][, actions]);
return $resource('/controller/get/:id.json', {}, {
    /*
     * By default, the following actions are returned; modify or add as needed
     * { 'get':    {method:'GET'},
     *   'save':   {method:'POST'},
     *   'query':  {method:'GET', isArray:true},
     *   'delete': {method:'DELETE'} };
     */
});

})

我的控制器。

// get the work order data using the work order id from the tag attribute
var getWO = function() {

WorkOrder.get({woId:$attrs.id},

    // success callback
    function(response) {
        // Assign the work order data to the scope
        $scope.WorkOrder            = response.WorkOrder;
    },

    // fail callback
    function(response) {
        // whatever...
    }
);
};
getWO();

我把我的成功和失败的fns放在我的控制器中，因为那时我很可能知道我想如何回应成功或失败的电话。我还将函数分配给变量，然后在我想要在$ timeout内包含fn调用或在其他地方调用它之后立即调用它。

您可以根据需要创建任意数量的工厂fns。如果工厂fn调用之间存在依赖关系，那么您可以将依赖调用放在控制器的成功回调中。

希望这能回答你的问题。

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

2 个答案: