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

【问题标题】：angular - $http first call is super slow角度 - $http 第一次调用非常慢
【发布时间】：2014-02-15 19:53:21
【问题描述】：

控制器有 $http 调用 Flask 上的 api 后端。我有一些基本的身份验证并设置了跨域。第一次进入 cpuListCtrl 控制器时，$http 调用需要 cca。约 14 秒。下次我以角度访问控制器时，只需 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)

【问题讨论】：

可能有上百万种情况，但我们没有足够的信息来回答。您应该查看 chrome 开发人员工具和请求的后端 API 日志，看看它花费了多少时间。
chrome 工具显示它的等待时间很长，烧瓶日志仅在最后几毫秒注册对他的调用，我感觉 $http 等待并在一段时间后执行......我实现了它与 $resource 是一样的。
这可能与 webapi 预热有关，请查看：weblog.west-wind.com/posts/2012/Sep/04/…
不，运行Flask自带的默认服务器，如果我将直接api调用放入浏览器，需要23ms才能完成。
烧瓶服务器在heroku上吗？

标签： javascript angularjs http

【解决方案1】：

你知道http调用什么时候开始吗？角度应用程序可能会卡在其他地方，并且仅在最后一秒才进行 http 调用。例如-在配置中，您使用的是“令牌”，您从哪里获得它？在许多角度应用程序中，这是从一些 oauth 服务中获取的，在一个单独的调用中。在配置 http 之前，您的慢速呼叫不会开始。有了令牌之后，接下来的调用会更快，因为我们已经拿到了令牌。

为了限制一些猜测，您可以使用 charles 之类的代理工具 - 或 deflect.io chrome 扩展程序来观察所有正在进行的 http 调用并找出答案

【讨论】：

我消除了对令牌的需要，只是基本的 CORS，带有 Allow-Origin * 和 Allow-Header Content-Type。 OPTIONS 调用需要 20 秒，POST 需要几毫秒。认为问题可能出在默认的烧瓶服务器如何处理这些事情上。
如果问题是 OPTIONS 调用 - 您是否尝试使用其他浏览器？（我认为 Firefox 不会那样做）。如果服务器在 heroku 上？
不，它在 Firefox 中是一样的，在深入研究 OPOTIONS 调用的响应后，我看到它返回与 GET 请求相同的东西（json 对象列表）。之后，调用 POST 调用返回我想要的结果。有什么方法可以消除额外的 OPTIONS 调用，还是 CORS 就是这样？服务器是虚拟的，在本地网络上的服务器机器上运行。
是的，选项，这是一个 CORS issue。可以通过一些服务器设置来修复（详见链接）
我更改了一些设置，例如保持活动状态、超时和 maxrequesttimeout，现在似乎可以了。

【解决方案2】：

我最近遇到了同样的问题，并且奇怪地发现延迟实际上似乎是在 Flask 端，但只有在使用 Chrome 中运行的 Angular 应用程序时才会发生。这个来自 python stackexchange 论坛的答案是我见过的最好的答案 - https://stackoverflow.com/a/25835028/1521331 - 它提供了一种“解决方案”，如果不是对这个谜团的解释！

【讨论】：

【解决方案3】：

我遇到了同样的问题，但以上方法都不适合我。做了什么：

Slow Requests on Local Flask Server

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

【讨论】：