Back

Technologies:

javascriptjavascript
avatar
Tolerim
13 days ago

What is the process for determining the reason behind an Angular JS API call repeating?

The problem I'm encountering with AngularJS is that the API is being called multiple times when an order is placed, but only one call reaches success(). Here's the code in question:

function placeOrder(cart) {
            var serviceUrl = getOrderUrl();
            var deferred = $q.defer();
            $http({ method: 'POST', url: serviceUrl, data: cart })
                .success(function (data, status, hearers, confing) {
                    deferred.resolve(data);
                })
                .error(function (data, status, headers, config) {
                    deferred.reject(status);
                });
            return deferred.promise;
        }
I removed some logging from the example, but I'm calling placeOrder() multiple times in my code, resulting in multiple API calls. However, only one call is reaching success() and error() is never triggered. After the first success() call, the duplicates stop.

I noticed that in my most recent example, the first two API calls were back to back, and the third call wasn't successful until 7 minutes later.

What might be causing this issue? Is Angular timing out and repeating the call?

I understand that success() and error() are now deprecated. Is this because of a similar issue?

Answers(2)
avatar
Vogi
12 days ago
Verified Answer
The issue you are facing is that the API is being called multiple times when an order is placed, but only one call reaches success(). This could be due to a number of reasons. One reason could be that the function is being called multiple times in your code. Another reason could be that Angular is timing out and repeating the call. Here are some things you can try to resolve this issue: 1. Check if you are calling the function multiple times in your code. 2. Check if there are any errors in your code that might be causing the issue. 3. Check if there are any network issues that might be causing the issue. 4. Try using a different version of AngularJS. Regarding your question about success() and error() being deprecated, it's because they have been replaced by then() and catch() respectively. The new methods work in a similar way to the old ones but are more flexible and easier to use. I hope this helps! Let me know if you have any other questions.

Sources

Single API calling Multiple time in angular - Stack OverflowHow to call same api multiple times in Angular - Stack Overflow[Solved]-Single API calling Multiple time in angular-angular.js
avatar
Tolerim
13 days ago
The issue you are facing might be related to Angular's digest cycle. When you call placeOrder() multiple times, it creates a separate promise for each of those calls. However, calling deferred.resolve(data) only resolves the promise for that particular call and not for the other pending calls. Therefore, the success function callback is only executed once, and the other promises remain pending. To fix this issue, you can use Angular's built-in $http service which returns a promise that is resolved whenever the HTTP request completes, regardless of how many times you call it. Here is an example using $http: 
function placeOrder(cart) {
  var serviceUrl = getOrderUrl();
  return $http.post(serviceUrl, cart)
    .then(function(response) {
      return response.data;
    })
    .catch(function(error) {
      throw error.status;
    });
}
In this example, instead of creating a deferred object, we simply return the promise returned by $http.post(). The then() and catch() functions are used to handle the success and error callbacks, respectively. The then() function receives the response object as its argument, and we can extract the response data using response.data. The catch() function receives the error object as its argument, and we can throw the status code using throw error.status. Regarding your question about the deprecation of success() and error(), it is not related to the issue you are facing. These methods are deprecated in favor of using the then() and catch() functions, which provide a more consistent and readable interface for handling promises.
;