javascript - 如何在 Angular 中使用来自 jQuery ajax 调用的 promise

Question

我正在尝试按如下方式使用 promise...

 $q.when().then(function () {
    return $rootScope.$emit('resetView', false, 'default');
}).then(function (result) {
    $log.info('login id loaded');   //execute this one first
    checkUserlogin();
}).then(function (result) {
    $log.info('Layout loaded');     //execute this one only when 1st is success. If 1st is failed, dont execute this one.
    loadData();
}, function (error) {
    $log.error("Caught an error:", error);
    return $q.reject('New error');
});

如您所见，我有 2 个函数要执行。检查用户登录()和加载数据()。

在 checkUserLogin() 中，我们检查用户是否被允许访问。获取用户 ID 并通过 ajax 将其传递到后端。检查数据库。如果存在访问权限，则应该执行 loadData()。如果不存在访问权限，则不应执行 loadData()。

目前，这正在发生。 checkUserLogin() 被执行。用户 ID 通过 ajax 传递到后端。并直接执行 loadData()。现在，一旦页面加载完毕，ajax 就会返回调用并知道用户没有访问权限。他被重定向到访问被拒绝的页面。

我不希望发生这种情况。页面加载只应在确认用户具有访问权限后发生。知道如何实现这一点吗？

编辑(根据下面 Paulpro 的回答)

$q.when().then(function () {
return $rootScope.$emit('resetView', false, 'default');

}).then(function (result) {
$log.info('checkuser loaded');   //execute this one first
return checkUserlogin();

}).then(function (result) {
$log.info('Layout loaded');     //execute this one only when 1st is success. If 1st is failed, dont execute this one.
return loadData();

}, function (error) {
$log.error("Caught an error:", error);
return $q.reject('New error');
});


var checkUserlogin = function() {
$log.info(' Inside Login check function executed');  
 var serviceURL_CheckUserExists = '/api//CheckUserExists';

    //ajax to check if user exists in database. give/ deny access based on user present in DB and if user is set as blockuser in db. 
    $.ajax({
        type: "GET",
        url: serviceURL_CheckUserExists,
    }).then(function (response) {
        if (response.Results.length == 1 && response.Results[0].BlockUser == false) {
            $rootScope.myLayout.eventHub.emit('getUserName', response.Results[0].User_ID.trim());

            });
        }
        else { $window.location.href = '../../../BlockUser.html'; }
}

根据上述编辑 - 这是当前正在执行的步骤。 $log.info 给出如下输出。

checkuser loaded
Layout loaded
Inside Login check function executed

实际上，应该是这些步骤。

checkuser loaded
Inside Login check function executed
Layout loaded

Answer 1

你传递给 then 的函数应该返回另一个 Promise，否则对 then 的调用将返回一个立即解析的 promise(到函数的返回值，undefined在你的情况下)。您想要返回在 ajax 调用完成之前不会解决的 promise 。假设 checkUserLogin(); 和 loadData(); 都返回 promise，你只需要添加几个返回语句:

$q.when().then(function () {
    return $rootScope.$emit('resetView', false, 'default');
}).then(function (result) {
    $log.info('login id loaded');   //execute this one first
    return checkUserlogin();
}).then(function (result) {
    $log.info('Layout loaded');     //execute this one only when 1st is success. If 1st is failed, dont execute this one.
    return loadData();
}, function (error) {
    $log.error("Caught an error:", error);
    return $q.reject('New error');
});

如果它们不返回 promise，修改它们以便它们返回(但避免使用 Promise 构造函数)然后上面的代码将起作用。