如何使用$ q連續調用承諾

我想在角度控制器中調用setup方法，該角度控制器獲取所需的所有相關組件部分以繼續。我確信我應該使用promise，但是我對正確的用法有點困惑。考慮到這一點：

我有一個ShellController，需要獲取當前登錄的用戶，然後在屏幕上顯示他們的名字，然後獲取一些客戶的詳細信息，並將其顯示在屏幕上。如果在任何時候這個序列都失敗了，那麼我需要一個地方讓它失敗。這是我到目前爲止（不工作ofc）。

var app = angular.module('app', []) 
 

 
app.controller('ShellController', function($q, ShellService) { 
 
    var shell = this; 
 
    shell.busy = true; 
 
    shell.error = false; 
 

 
    activate(); 
 

 
    function activate() { 
 

 
    var init = $q.when() 
 
     .then(ShellService.getUser()) 
 
     .then(setupUser(result)) //result is empty 
 
     .then(ShellService.getCustomer()) 
 
     .then(setupCustomer(result)) // result is empty 
 
     .catch(function(error) { // common catch for any errors with the above 
 
     shell.error = true; 
 
     shell.errorMessage = error; 
 
     }) 
 
     .finally(function() { 
 
     shell.busy = false; 
 
     }); 
 
    } 
 

 
    function setupUser(user) { 
 
    shell.username = user; 
 
    } 
 

 
    function setupCustomer(customer) { 
 
    shell.customer = customer; 
 
    } 
 
}); 
 

 
app.service('ShellService', function($q, $timeout) { 
 

 
    return { 
 
    getUser: function() { 
 
     var deferred = $q.defer(); 
 

 
     $timeout(function() { 
 
     deferred.resolve('User McUserface'); 
 
     }, 2000); 
 

 
     return deferred.promise; 
 
    }, 
 
    getCustomer: function() { 
 
     var deferred = $q.defer(); 
 

 
     $timeout(function() { 
 
     deferred.resolve('Mary Smith'); 
 
     }, 2000); 
 

 
     return deferred.promise; 
 
    } 
 
    } 
 

 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="ShellController as shell"> 
 
    <div class="alert alert-danger" ng-show="shell.error"> 
 
     An error occurred! {{ shell.errorMessage }} 
 
    </div> 
 
    <div class="alert alert-info" ng-show="shell.busy"> 
 
     Fetching details... 
 
    </div> 
 
    <div>Username: {{ shell.username }}</div> 
 
    <div>Customer: {{ shell.customer }}</div> 
 
    </div> 
 
</body>

，我應該怎麼做嗎？

來源

2017-03-03 mortware

'then'函數返回一個承諾，將用你將從'then'返回的值來解析，例如'.then（function（）{return 1}）。then（function（value）{console.log（value）; // 1}）;' –

您的代碼需要稍微更改。 .then()收到回調引用，而不是另一個承諾。所以這裏

.then(ShellService.getUser())

你傳遞一個promise作爲參數。你應該通過一個回調返回一個值解決或作爲參數，以允許鏈接

而且初始$q.when承諾是沒有必要的，因爲你的第一個函數已經返回了一個承諾。你應該這樣做：

ShellService.getUser() 
     .then(setupUser(result)) //result is empty 
     .then(ShellService.getCustomer) 
     .then(setupCustomer) 
     .catch(function(error) { // common catch for any errors with the above 
     shell.error = true; 
     shell.errorMessage = error; 
     }) 
     .finally(function() { 
     shell.busy = false; 
     });

來源

2017-03-03 13:58:06

你仍然有一些參數應該是可調用的，但是調用得太快。例如'setupUser（result）'應該是'setupUser'，而'setupCustomer（result）'應該是'setupCustomer'。 – Duncan

謝謝 - 正確編輯添加 –

如何使用$ q連續調用承諾

回答

相關問題