Javascript 角度-$http第一次调用非常慢

控制器有$http，用于调用Flask上的api后端。我有一些基本的身份验证和跨域设置。当它第一次进入cpuListCtrl控制器时，$http调用会占用cca~14秒。下次我在angular中访问控制器时，只需23毫秒。但每次我按下浏览器刷新按钮，都会回到14秒。从浏览器直接调用api也只需23毫秒。所以我的问题是，我的问题是，这花了这么长时间，我错过了什么，或者我应该去哪里看

编辑：更新代码以反映最近的更改：

  var app = angular.module('RecycleApp', ['ngRoute', 'appControllers']);
    app.config(['$httpProvider', function($httpProvider) {
     $httpProvider.defaults.useXDomain = true;
     delete $httpProvider.defaults.headers.common['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.");   
    })

 }]);

服务器端：

@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)

---

您确定http调用何时开始吗？angular应用程序可能被卡在其他地方，只能在最后一秒到达http调用。例如，在配置中，您使用的是一个“令牌”，从何处获取？在许多angular应用程序中，这是通过单独的调用从oauth服务获取的。在配置http之前，您的慢速呼叫不会启动。令牌存在后，下一个调用会更快，因为我们已经获得了令牌

---

为了限制猜测，您可以使用代理工具（如charles-or Deffect.io chrome extension）来监视所有正在进行的http调用，并解决这个问题，我最近也遇到了同样的问题，并且发现延迟非常奇怪，实际上似乎是在烧瓶端，但只有在使用chrome中运行的Angular应用程序时才会发生。这个来自python stackexchange论坛的答案是我见过的最好的答案——它提供了某种“解决方案”，如果不是对这个谜团的解释的话

我也遇到了同样的问题，而以上这些都不适合我。以下是我们所做的：

---

实际上，某些浏览器将尝试在IPv4之前访问IPv6套接字。在注释掉/etc/hosts中有问题的行并重新启动apache之后，问题得到了解决。

可能有很多问题，但我们没有足够的信息来回答。你应该看看chrome开发者工具和后端API日志，看看它在哪里花费了时间。chrome工具显示它等待了那么长时间，flask日志只在最后几毫秒向他注册了调用，我感觉$http会等待一段时间，然后执行。。。我用$resource实现了它，结果是一样的。这可能与webapi预热有关。请检查：不，运行Flask附带的默认服务器，如果我将直接api调用放入浏览器，需要23毫秒才能完成任务。Flask服务器在heroku上吗？我不需要令牌，只需要基本CORS，使用Allow Origin*和Allow Header内容类型。选项调用需要20sec，这篇文章是在几位女士之后发布的。他们认为问题可能在于默认flask服务器如何处理这些事情。如果问题是选项调用，您是否尝试使用其他浏览器？（我认为firefox不会这么做）。另外，如果heroku？nah上的服务器与firefox中的服务器相同，那么在深入研究opoptions调用的响应后，我发现它返回的内容与GET请求相同（json对象列表）。然后调用POST调用，返回我想要的结果。有没有办法消除额外的期权认购，或者CORS就是这样的？服务器是虚拟的，在本地网络的服务器上运行。是的，选项这是CORS。可以通过一些服务器设置来修复（有关详细信息，请参阅链接）。我更改了一些设置，如保持活动状态、超时和maxrequesttimeout，现在似乎可以了。