Question

我正在开发一个项目，其中有一个页面有一个名为balance的输入字段，包含该字段的div是balanceDiv.for admin这个字段不会显示。所以我使用ng-show来隐藏/显示div，在角度控制器中写入函数（一个用于收集loginId，另一个用于隐藏或显示div根据登录ID）。显示或隐藏div的条件是---如果管理员找到（id 1）div将隐藏否则div将show.To这样做我注意到当调用ajax--执行切换到第二个函数。在我的角度控制器 -

        init();
        function init()
        {
            setLoginId();
            showHide();
            initilize();
        }

你可以看到它首先执行setLoginId然后它将用于showHide（正如我预期的那样）。这两个函数---

    function setLoginId()
    {
        var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
        var result = CrudService.getAll(apiRoute);
        result.then(function (response) {
            debugger
            $scope.loginId = response.data;


        },
        function (error) {
            console.log("Error: " + error);
        });
    }
    function showHide() {
        if ($scope.loginId == 1) {
            $scope.balanceDiv = false;
        }
        else {
            $scope.balanceDiv = true;
        }
    }

我注意到的是，当它在setLoginId方法中执行ajax调用之后没有得到响应（或完成方法）它就是showHide方法。完成showHide方法后，它再次返回setLoginId方法。然后它执行方法的其余部分说明。结果是我在showHide方法中为$ scope.loginId获取了未定义的值。

我想知道为什么会这样？为什么当ajax调用时执行切换到另一种方法？

Answer 1

功能需要链：

    init();
    function init()
    {
        setLoginId().then(function(data) { 
            showHide(data);
        }).then(function () {
            initilize();
        });
    }

一定要回复链接的承诺：

function setLoginId()
{
    var apiRoute = baseUrl + '/api/AmountDists/GetLoginId/';
    var promise = CrudService.getAll(apiRoute);
    return promise.then(function (response) {
  //^^^^^^  return derived promise
        debugger
        $scope.loginId = response.data;
        //RETURN data to chain
        return response.data;
    },
    function (error) {
        console.log("Error: " + error);
    });
}

添加数据参数：

function showHide(loginID) {
    if (loginID == 1) {
        $scope.balanceDiv = false;
    }
    else {
        $scope.balanceDiv = true;
    }
}

通过返回promise并使用promise的.then方法，第二个函数的执行被延迟，直到第一个XHR完成。

我想知道原因

重要的是要意识到$http服务会立即返回未实现的承诺，并且并行地生成asynchronous xmlHttpRequest (XHR) 。当结果从服务器返回时，承诺稍后得到履行（解决或拒绝）。

立即执行异步API调用之后的代码。如果代码需要延迟到XHR完成，则需要将其作为函数的.then方法提供。

有关详细信息，请参阅：

ajax调用时执行另一个函数的原因

1 个答案: