Javascript Angularjs-什么'；这是多个API调用的正确方法

好的，请对我放松点，因为我正在学习。下面的代码有效，但必须有更好、更干净的方法来实现这一点。我一直在读我能读的所有东西，从我能说的，可能在工厂里建立这些可能是最好的？？到目前为止，我尝试过的每一件事都以失败告终，但可能是我做错了什么

先决条件

• 我需要能够在模块中使用它（这样我就可以添加其他自定义指令）
• 我总共进行了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;
    };

}

$apiUrl='\u包括/gtmetrix.php'；//这是使用本地代理访问远程API。
$apiKey=''；
$gapiUrl=https://www.googleapis.com/pagespeedonline/v1/runPagespeed';
$gapiKey='1z2x3c4v5b6n7m8a9s'；
$gapiStrategy='mobile'；
$requestUrl=''；
函数FetchCtrl（$scope、$http、$templateCache）{
$scope.method='POST'；
$scope.url=$requestUrl；
$scope.fetch=函数（）{
$scope.code=null；
$scope.response=null；
$http（{method:$scope.method，url:$apiUrl+'？url='+$scope.url，cache:$templateCache}）。
成功（功能（数据、状态）{
$scope.status=状态；
$scope.data=data | |“请求成功”；
}).
错误（功能（数据、状态）{
$scope.data=data | |“请求失败”；
$scope.status=状态；
});
};
$scope.fetch（）；
$scope.fetchGoogle=function（）{
$scope.code=null；
$scope.response=null；
$http（{method:'GET'，url:$gapiUrl+'？url='+$scope.url+'&key='+$gapiKey，cache:$templateCache}）。
成功（功能（数据、状态）{
$scope.status=状态；
$scope.datag=data | |“请求成功”；
}).
错误（功能（数据、状态）{
$scope.datag=data | |“请求失败”；
$scope.status=状态；
});
};
$scope.fetchGoogle（）；
$scope.fetchGoogleMobile=function（）{
$scope.code=null；
$scope.response=null；
//$scope.data=''；
$http（{method:'GET'，url:$gapiUrl+'？url='+$scope.url+'&key='+$gapiKey+'&strategy='+$gapiStrategy，cache:$templateCache}）。
成功（功能（数据、状态）{
$scope.status=状态；
$scope.datagm=data | |“请求成功”；
}).
错误（功能（数据、状态）{
$scope.datagm=data | |“请求失败”；
$scope.status=状态；
});
};
$scope.fetchGoogleMobile（）；
$scope.updateModel=函数（方法，url）{
$scope.method=方法；
$scope.url=url；
};
}

---

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

您可以做的一件事是使用方便的

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

函数FetchCtrl（$scope，$http）{ var googleApiBaseUrl=”https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=&key=1z2x3c4v5b6n7m8a9s"; $http.post（“_includes/gtmetrix.php？url=”） .成功（功能（数据）{ $scope.data=数据； }); $http.get（googleApiBaseUrl） .成功（功能（数据）{ $scope.datag=数据； }); $http.get（googleApiBaseUrl+“&strategy=mobile”） .成功（功能（数据）{ $scope.datagm=数据； }); }

---

我就是这么做的。我使用的是

$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调用或在其他地方调用它

您可以创建任意数量的factory FN。如果工厂fn调用之间存在依赖关系，则可以将依赖调用放在控制器的成功回调中

// 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();

---

希望这能回答您的问题。

首先，您可能希望将请求与$q.all合并，并且只使用一个函数进行回调。还有一个使用ngResource模块抽象API调用的选项。