Angular：如何防止我的$http调用阻塞UI？

Question

在我的控制器中，我有以下代码：

PartnersService.GetNonPartnerBanks().success(function (data) {
        vm.nonPartnerBanksList = data;
    }).error( function () {
        vm.nonPartnerBanksList = [];
    });

调用这个服务的是:

service.GetNonPartnerBanks = function() {
            var nonPartnerBankUrl = config.baseUrl + 'public/nonPartnerBanks';
            return $http.get(nonPartnerBankUrl);
        };

这一切都可以正常工作，但如果服务器响应时间较长，应用程序的UI会冻结。

我做错了什么？难道$http服务不使用AJAX和Promise，以便在进行调用时UI的渲染应该继续进行吗？

使用数据的模板部分：

<ol class="nya-bs-select nya-dashboard"
    required

    name="futurePartner"
    id="futurePartner"
    ng-model="npc.futurePartner"
    data-size="5"
    ng-change="npc.hideSucessMessage()"
    title-tpl="<span>{{npc.partnerSelectTitle}}</span>"
    deep-watch="true"
    no-search-title-tpl="<span>{{'general.NoSearchResult' | translate}}</span>"
    data-live-search="true">
    <li nya-bs-option="bankItem in npc.futurePartnerList" data-value="bankItem.id">
        <a>
            {{bankItem.name}}
        </a>
    </li>
</ol>

跟进：

Vita的回答让我找对了思路，问题不是$http阻塞了我的UI，而是在Ajax调用时有一个动画效果，给人留下了UI卡顿的印象。

- George Bora

Answer 1

$http调用是异步的，它返回一个promise，您可以像平常一样使用.then和.catch（成功和错误的回调只是出于历史原因而被弃用了）。但即使如此，它也不会阻塞您的UI，必须有其他原因。

"冻结"是什么意思？

从哪里调用了该方法？您在路由对象解析属性中使用它吗？如果是，则它等待所有promise被实现后再运行，这是其特性。

问题肯定在其他地方。能否提供更多信息？或者最好提供一些jsbin？

- Víťa Plšek - angular.cz

---

在我的情况下，“Freeze” 意味着屏幕完全变白，我正在使用数据来填充一些下拉菜单（nya-bs-select），我没有使用路由解析。 - George Bora

我已经添加了视图的部分，这部分是由vm提供的下拉列表，但是由于它是一个庞大的控制器/视图的一部分（我无法拆分），所以我无法发布更大的示例。 - George Bora

嗯，我不知道这个指令的内部细节...但是，数组中有多少项？每个项本身有多大（是否包含名称和ID或更多内容？）以及“deep-watch”到底是做什么的（它不在nya-bs-select文档中，所以我想它是你们自己的）。我在考虑渲染速度慢的问题。您的项目中是否有ng-stats，它可以告诉您有多少个监视器以及消化周期有多长，因此如果没有一些监视器需要太长时间。乍一看，我真的看不出任何奇怪的地方，但我会说您的控制器不应该太大 :/ - Víťa Plšek - angular.cz

数组中的元素是带有名称字段和ID的简单对象，我将尝试安装ng-stats以查看发生了什么，deep-watch不是我的属性，它是官方但未列出的（我已经尝试过删除它，但没有帮助）。 - George Bora