【问题标题】:not able to figure out how promises work in angular http无法弄清楚 Promise 在 Angular http 中是如何工作的
【发布时间】:2013-07-12 02:41:12
【问题描述】:

我有以下代码通过对自动完成指令进行 http 调用从服务器检索用户名:

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

app2.directive('autoComplete', function ($timeout) {
    return function (scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: function () {
                //can't call this like so: scope.$apply('getSource'); I get "$apply already in progress error"
                var names = scope.getSource();
                scope.$apply();
                console.log(names);
                return names;
            },
            async:false,
            minLength: 3,
            select: function () {
                $timeout(function () {
                    iElement.trigger('input');
                }, 0);
            }
        });
    };
});

app2.controller('DefaultCtrl', function($scope, $http) {
    $scope.getSource = function() {
        return $http.get('/AccountRequest/GetMatchingEmployeeNames?matchStr=' + $scope.selected)
            .then(function (data) {
                var names = [];
                for (var i = 0; i < data.length; i++) {
                    names.push(data[i].Name);
                }
                return names;
            });
    };
});

我正在尝试在自动完成源中使用承诺:因为 http 方法存在延迟,否则我会得到一个空数组。谁能告诉我如何使它工作?我不知道如何从 promise 函数中提取名称数组以传递给源:

【问题讨论】:

  • 你必须$timeout异步http请求..或者延迟加载它我想

标签: angularjs autocomplete promise


【解决方案1】:
source: function (request,responseCallback) {
            var names = [];
            var promise = scope.getSource();
            promise.success(function(data){
                names = data;
                console.log(names);
                responseCallback(names);
            }).error(function() {
                console.log("some error occurred");
                responseCallback(names);
            });
        },

或许

source: function (request,responseCallback) {
            var names = [];
            var promise = scope.getSource();
            promise.then(function(data){
                names = data;
                console.log(names);
                responseCallback(names);
            },function() {
                console.log("some error occurred");
                responseCallback(names);
            });
        },

我是根据 jQuery 自动完成文档来写这篇文章的,该文档说源采用了一个传递请求和响应回调函数的函数。

在此处了解有关 Promise 工作原理的更多信息:http://docs.angularjs.org/api/ng.$q

具体看看这是如何为 $http 服务http://docs.angularjs.org/api/ng.$http扩展的

【讨论】:

  • 谢谢,但我得到 Uncaught TypeError: Object # has no method 'success'
  • 不知道为什么会发生这种情况,但您是否尝试过使用 .then 而不是 .success,我将进行编辑。
  • 如果您仍然遇到问题,我建议您调试并检查 promise 变量的值,以及处理控制器中的数据,我可能会认为这是一项工作一个拦截器。基于再次查看文档,我会说您在链接/修改值方面所做的工作似乎应该有效,但我自己还没有尝试过。
  • 也许还可以做一些测试,以确保如果您仅使用带有请求和响应参数的源函数将硬编码数组传回(只是为了验证我至少在那里)然后我们可以确定 Promise 问题已单独解决
  • 谢谢,我现在可以使用了。名称都在加载。但是现在按向上/向下箭头从列表中选择的功能已经消失了......
猜你喜欢
  • 1970-01-01
  • 2021-02-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-19
  • 2018-04-05
  • 1970-01-01
  • 2020-08-28
相关资源
最近更新 更多