javascript - angular - $http first call is super slow - Stack Overflow

admin管理员组

文章数量:1429108

A controller has $http that calls an api backend on Flask. I have some basic authentication and crossdomain is set. The first time it enters the cpuListCtrl controller the $http calls takes cca. ~14sec. The next time i visited the controller in angular it takes just 23ms. But every time i press the browsers refresh, back to ~14sec. Direct api call from browser also takes just 23ms. So my question is my does it takes so long, did i miss something, or where specific should i look?

EDIT: updated the code to reflect recent changes:

  var app = angular.module('RecycleApp', ['ngRoute', 'appControllers']);
    app.config(['$httpProvider', function($httpProvider) {
     $httpProvider.defaults.useXDomain = true;
     delete $httpProvider.defaults.headersmon['X-Requested-With'];
   }
  ]);

  app.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when("/cpu", {
        templateUrl:'static/js/partials/cpu.html',
        controller:'cpuCtrl'
    })
  }]);

  var appControllers = angular.module('appControllers', []);

  appControllers.controller('cpuCtrl', ['$scope','$http',
function($scope,$http){
    $http({
        url: 'http://SOME_IP/api/v1/cpus',
        method: 'POST',
        data: JSON.stringify({"latitude":46.1948436, "longitude":15.2000873}),
        headers: {"Content-Type":"application/json"}
    })
    .success(function(data,status,headers,config){
        console.log(data.list);
        $scope.cpus = data.list;
    })
    .error(function(data,status,headers,config){
        console.log("something went wrong.");   
    })

 }]);

Server side:

@app.route('/api/v1/cpus', methods=["GET"])
@cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list():
    result = session.query(RecycleReUseCenter)\
            .options(load_only("Id", "CpuName"))\
            .all()
    return list_json(result)

@app.route("/api/v1/cpus", methods=["POST"])
@cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list_with_locations():
    content = request.get_json(force=True)
    given_latitude = content['latitude']
    given_longitude = content['longitude']

    result = RecycleReUseCenter.get_all_with_distance(given_latitude, given_longitude)
    return list_json(result)

A controller has $http that calls an api backend on Flask. I have some basic authentication and crossdomain is set. The first time it enters the cpuListCtrl controller the $http calls takes cca. ~14sec. The next time i visited the controller in angular it takes just 23ms. But every time i press the browsers refresh, back to ~14sec. Direct api call from browser also takes just 23ms. So my question is my does it takes so long, did i miss something, or where specific should i look?

EDIT: updated the code to reflect recent changes:

  var app = angular.module('RecycleApp', ['ngRoute', 'appControllers']);
    app.config(['$httpProvider', function($httpProvider) {
     $httpProvider.defaults.useXDomain = true;
     delete $httpProvider.defaults.headers.mon['X-Requested-With'];
   }
  ]);

  app.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when("/cpu", {
        templateUrl:'static/js/partials/cpu.html',
        controller:'cpuCtrl'
    })
  }]);

  var appControllers = angular.module('appControllers', []);

  appControllers.controller('cpuCtrl', ['$scope','$http',
function($scope,$http){
    $http({
        url: 'http://SOME_IP/api/v1/cpus',
        method: 'POST',
        data: JSON.stringify({"latitude":46.1948436, "longitude":15.2000873}),
        headers: {"Content-Type":"application/json"}
    })
    .success(function(data,status,headers,config){
        console.log(data.list);
        $scope.cpus = data.list;
    })
    .error(function(data,status,headers,config){
        console.log("something went wrong.");   
    })

 }]);

Server side:

@app.route('/api/v1/cpus', methods=["GET"])
@cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list():
    result = session.query(RecycleReUseCenter)\
            .options(load_only("Id", "CpuName"))\
            .all()
    return list_json(result)

@app.route("/api/v1/cpus", methods=["POST"])
@cross_origin(origins='*', headers=("Content-Type"))
def get_cpu_list_with_locations():
    content = request.get_json(force=True)
    given_latitude = content['latitude']
    given_longitude = content['longitude']

    result = RecycleReUseCenter.get_all_with_distance(given_latitude, given_longitude)
    return list_json(result)

• javascript
• angularjs
• http

Share Improve this question Follow edited Jan 28, 2014 at 6:54 zPrima asked Jan 24, 2014 at 17:50 zPrimazPrima 73711 gold badge99 silver badges2020 bronze badges 7

• 1 There are a million things that it could be, and we don't have enough information to answer. You should look at the chrome developer tools and your backend API logs for the request and see where it's spending it's time. – John Ledbetter Commented Jan 24, 2014 at 17:52
• chrome tools shows its waiting that long, the flask log registers the call to him only at the last miliseconds, i have a feeling that the $http waits and after some time it executes... i implemented it with $resource and it was the same. – zPrima Commented Jan 24, 2014 at 17:58
• This is probably related to webapi warm up check this out: weblog.west-wind./posts/2012/Sep/04/… – Dalorzo Commented Jan 24, 2014 at 17:59
• Nah, running the default server that es with Flask, if i put the direct api call into the browser, it takes 23ms to finish the job. – zPrima Commented Jan 24, 2014 at 18:07
• Is the flask server on heroku? – alonisser Commented Jan 24, 2014 at 18:44

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 0

Do you know for sure when does the http call starts? The angular app may be stuck somewhere else, and getting to the http call only in the last second. For example - in the config you are using a "token" where do you get it from? in many angular app this is fetched from some oauth service, in a seperete call. Your slow call won't start until http is configured. After token is there, the next calls would be faster since we got the token already.

To limit some guessing you can use a proxy tool like charles - or deflect.io chrome extension to watch all the out going http calls and figure this out

I have recently had the same problem, and found that the delay oddly enough actually seems to be on the Flask end, but only happens when using an Angular app running in Chrome. This answer from the python stackexchange forum is the best one I have seen - https://stackoverflow./a/25835028/1521331 - it provides a 'solution' of sorts, if not an explanation for this mystery!

I was having the same problem, and none of the above worked for me. Here's what did:

Slow Requests on Local Flask Server

Effectively, certain browsers will attempt to access IPv6 sockets before IPv4. After menting out the offending lines in /etc/hosts and restarting apache the problem was fixed.

本文标签： javascriptangularhttp first call is super slowStack Overflow