AngularJS - Best Practices for Handling Multiple API Requests

Question

AngularJS - Best Practices for Handling Multiple API Requests

Greetings, I am new to Angular and seeking guidance on optimizing the following code snippet. While it does function as intended, I believe there must be a more efficient approach. I've delved into various resources and it seems structuring these tasks within factories could be beneficial. However, my attempts thus far have resulted in errors, likely due to my own oversight.

Essential Requirements

I require compatibility within a module (to incorporate custom directives)
The functionality involves 3 API calls: 2 via GET method, while one necessitates POST method usage

Snippet Overview:

$apiUrl = '_includes/gtmetrix.php'; // Utilizing a local proxy for remote API access.
$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;
    };

}

I have been grappling with this setup for quite some time now, so any assistance or pointers would be highly valued. Thank you!

javascript api angularjs

Answer 1

Answer №1

If you're looking for a solution, consider utilizing the convenient $http.get() and $http.post() methods. Another option is to explore using $resource, as suggested by Klaster_1. It seems like there might be some redundant code in your current implementation. Starting with a basic setup like this and gradually expanding it may be a good approach.

function DataRetrievalCtrl($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

If you're looking for a solution, consider utilizing the convenient $http.get() and $http.post() methods. Another option is to explore using $resource, as suggested by Klaster_1. It seems like there might be some redundant code in your current implementation. Starting with a basic setup like this and gradually expanding it may be a good approach.

function DataRetrievalCtrl($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 3

Answer №2

Here's my method. I prefer using $resource over $http. It should help you get started, and you might find the built-in functions of $resource useful.

My Approach:

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

// Utilizing $resource: $resource(url[, paramDefaults][, actions]);
return $resource('/controller/get/:id.json', {}, {
    /*
     * The default actions are as follows; feel free to modify or add more
     * { 'get':    {method:'GET'},
     *   'save':   {method:'POST'},
     *   'query':  {method:'GET', isArray:true},
     *   'delete': {method:'DELETE'} };
     */
});

})

My Controller:

// Retrieve work order data based on the ID from the tag attribute
var getWO = function() {

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

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

    // Failure callback
    function(response) {
        // Handle failure...
    }
);
};
getWO();

I place my success and failure functions in the controller because that's where I know best how to handle responses. I also save the function to a variable and call it immediately after in case I need to use it within a $timeout or elsewhere.

You can create multiple factory functions as needed. If there's a dependency between them, consider placing the dependent call inside the success callback of your controller.

Hopefully, this addresses your query.

Answer 4

Here's my method. I prefer using $resource over $http. It should help you get started, and you might find the built-in functions of $resource useful.

My Approach:

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

// Utilizing $resource: $resource(url[, paramDefaults][, actions]);
return $resource('/controller/get/:id.json', {}, {
    /*
     * The default actions are as follows; feel free to modify or add more
     * { 'get':    {method:'GET'},
     *   'save':   {method:'POST'},
     *   'query':  {method:'GET', isArray:true},
     *   'delete': {method:'DELETE'} };
     */
});

})

My Controller:

// Retrieve work order data based on the ID from the tag attribute
var getWO = function() {

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

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

    // Failure callback
    function(response) {
        // Handle failure...
    }
);
};
getWO();

I place my success and failure functions in the controller because that's where I know best how to handle responses. I also save the function to a variable and call it immediately after in case I need to use it within a $timeout or elsewhere.

You can create multiple factory functions as needed. If there's a dependency between them, consider placing the dependent call inside the success callback of your controller.

Hopefully, this addresses your query.

AngularJS - Best Practices for Handling Multiple API Requests

Answer №1

Answer №2

Similar questions

The style properties of Material UI ButtonGroup are not being properly applied

Creating a dynamic dashboard filled with widgets - each time a new widget is added, the postback triggers a reload of all the current widgets

Authentication using SPA RSA 2048 encryption technology

An HTML attribute with a blank value will not display the equals sign operator

React Native error: Attempting to convert an undefined value to an object

Function cannot be called upon directive initialization

Combine various values from object properties into a single string

Safari browser cutting off POST parameters prematurely

Error: Insufficient values to unpack when executing unit tests for a Django ModelViewSet

Why is the response from this HTTP request displaying array lengths instead of actual content?

What is the best way to make a recursive function display every return value in Javascript?

Ajax dropdown menu displaying 'Loading Data' message during processing

Save the JWT token securely within a closure

I'm looking to transform this array into the format described below, and also include another nested subarray within it using TypeScript

Commands for banning or kicking users in discord.js

When using node.js, the initial request yields no response while the subsequent request provides the expected data

Accordion feature exclusively toggles the initial item

Strange outcome received from THREE.JS - Vector3.project function

Looking to conduct date comparisons within angular-ui-grid?

The page does not seem to be reloading properly due to a redirect issue