Creating a reusable function for making HTTP requests in Angular

Question

Creating a reusable function for making HTTP requests in Angular

I have a scenario in my controller.js where I need to make an HTTP GET request when the page loads and when the user pulls to refresh. Currently, I find myself duplicating the $http code. Is there a way to refactor this for reusability? I'm struggling to move it to my services.js file and call it from my controller to execute.

.controller('GamesCtrl', function ($scope, $http) {
  function fetchData() {
    $http(
      {
        method: 'GET',
        url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
        headers: {
          'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
        }
      }).
      success(function (data) {
        $scope.data = data['results']['collection1'];
      });
  }

  // Initial call
  fetchData();

  $scope.doRefresh = function() {
    fetchData()
    .finally(function() {
      $scope.$broadcast('scroll.refreshComplete');
    });
  };
})

javascript angularjs

Answer 1

Answer №1

To simplify the process, create a private function:


.controller('GamesCtrl', function ($scope, $http) {
  var loadData = function() {
      $http(
      {
          method: 'GET',
          url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
          headers: {
              'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
          }
      }).
      success(function (data) {
          $scope.data = data['results']['collection1'];
      }).finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
     });;
  };

  $scope.doRefresh = function() {
    loadData();
  };

  loadData();
})

For a more comprehensive approach, consider moving it to a service:


.service('KimonoSvc',function($http) {
    return {
      get: function() {
         return $http(
         {
             method: 'GET',
             url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
             headers: {
                 'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
             }
         });
      }
    };
})
.controller('GamesCtrl', function ($scope, KimonoSvc) {
  var fetchData = function() {
    KimonoSvc.get().
         success(function (data) {
             $scope.data = data['results']['collection1'];
         }).finally(function() {
          $scope.$broadcast('scroll.refreshComplete');
        });
  };
  $scope.doRefresh = function() {
    fetchData();
  };

  fetchData();
})

Answer 2

To simplify the process, create a private function:


.controller('GamesCtrl', function ($scope, $http) {
  var loadData = function() {
      $http(
      {
          method: 'GET',
          url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
          headers: {
              'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
          }
      }).
      success(function (data) {
          $scope.data = data['results']['collection1'];
      }).finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
     });;
  };

  $scope.doRefresh = function() {
    loadData();
  };

  loadData();
})

For a more comprehensive approach, consider moving it to a service:


.service('KimonoSvc',function($http) {
    return {
      get: function() {
         return $http(
         {
             method: 'GET',
             url: 'https://www.kimonolabs.com/api/dc6n4edu?apikey=U4SNiysE89aaLXSWRJgHKDZOByqSLM0p',
             headers: {
                 'authorization': 'Bearer PW8V4OesZ61tCqSRNpXYtRn5ahcLdclU'
             }
         });
      }
    };
})
.controller('GamesCtrl', function ($scope, KimonoSvc) {
  var fetchData = function() {
    KimonoSvc.get().
         success(function (data) {
             $scope.data = data['results']['collection1'];
         }).finally(function() {
          $scope.$broadcast('scroll.refreshComplete');
        });
  };
  $scope.doRefresh = function() {
    fetchData();
  };

  fetchData();
})

Creating a reusable function for making HTTP requests in Angular

Answer №1

Similar questions

Tips for sharing a variable with an external JavaScript file in ASP.NET

Vue JS i18next: Handling Single Translation String Fallbacks

Encountering Problem with Jmeter Script Playback - Kindly Activate JavaScript to Access Page Information

Adding or removing a class using Jquery based on the condition of form validation

Exploring the capabilities of Jasmine testing with AngularJS's $locationChangeSuccess event

react: implement custom context menu on videojs

AngularJS selection controls: checkbox and dropdown menus

The issue of the DNN ModuleID not being effectively communicated from the code behind to the ascx component is

Step-by-step guide on building a factory in Angular for a pre-existing service

Is there a way to display a button and text upon hovering over an image without using JQuery?

Encountering Webpack issues following the transition to Next 13

pg-promise received an error due to an incorrect parameter being passed in for options

Execute the controller function once all asynchronous calls to the Angular service have finished

What is preferable: defining JSON schema properties or utilizing oneOf conditions within an array of objects

Adjusting the focus of an element with jQuery based on coordinates and offset values

Tips for receiving alerts on external updates to a mongo collection using sails

React-Native error message: Promise rejection unhandled - React child cannot be an object

"Exploring the functionality of Vue JS2 checkboxes within a parent and

The XMLHTTPRequest Access-Control-Allow-Origin allows cross-origin resource sharing to

Using Spring Boot and AJAX to dynamically load content as users scroll down the page