異步編程 - 如何遍歷對象數組並使用從 api 獲取的數據更改每個對象的屬性？

Question

所以我有一個類似於這樣的對象數組：

[ { id: 123, info: 'text', number: 0 }, ... ]

我有一個 API，它獲取對象的 ID 並返回與之關聯的數字。 在使用 JavaScript 的前端應用程序上，我想遍歷數組中的每個對象，並使用來自此 API 的數據填充該數字屬性。

我正在使用 AngularJS，這是我編寫的用於獲取與每個對象關聯的數字的函數：

    $scope.getNumber = function(id) {
        $http.get('/api/getnumber/' + id)
            .success(function(data) {
                console.log(data.goings);
                return data.number;
            });
    }

這個功能有效。 我的問題是我不知道如何更新數組中每個對象的 number 屬性。 我試過循環它，但這不起作用，因為循環在.get()完成獲取數據之前執行。 我也試過在 html 中有以下代碼：

<div ng-repeat="obj in data">
      {{ getNumber(obj.id) || 0 }}
</div>

但這會創建一個無限循環，使我的瀏覽器崩潰。 我嘗試進行了一些搜索，但找不到可比較的案例。 我怎樣才能做到這一點？

Answer 1

$http.get(..).success(..)返回一個promise，因此不能這樣使用。 也許在控制器加載時加載所有數字並將其附加到數據？

Answer 2

如前所述， success()函數只是返回另一個promise，它本身並不是您想要的值。 像在成功函數中一樣返回一個值，僅作為在鏈接它們時將結果傳遞給另一個Promise 的一種方式才有用。

如果這些值在用戶與頁面交互時可能會發生變化，最好的選擇是擁有一個持續顯示的范圍變量（您的數組正在使用ng-repeat工作迭代），並由$http承諾更新。

如果您只希望每次加載頁面時它都是一件事，您可以使用解析預加載它們（對於使用 UI-router 的解析，請看這里）。 Resolves 允許您在頁面加載之前進行 Promise 調用，並且只有在 Promise 全部解決后才開始加載實際頁面。

您可能需要批量檢索您需要的數字，但如果沒有，您可以使用$q.all()將單個調用轉換為組解析，這允許您提供一組 promise 並返回一個他們的結果數組。

當然，如果你想提前加載它們，然后在頁面的生命周期中修改它們，你可以。