我正在使用 Rails 应用程序作为 API 后端。所以我有一个单页 Angular 应用程序,它将进行多个 api 调用并在返回每个数据时开始显示。我不想等待API调用的所有结果然后加载数据,所以我开始学习deferred和promise。
我有一个名为 api 的 angular.service ,我将在其中对我的所有 api 进行 $http 调用。为了测试目的,我对每个 api 调用返回的数据进行了硬编码。
debugger.factory "api", ["$resource", "$q", ($resource, $q) ->
apiCall1 = [
key1: "v1"
key2: "v2"
key3: "v3"
]
apiCall2 =
.
.
.
apiCall7 =
factory = getIsDynamicApp: ->
deferred = $q.defer()
deferred.resolve apiCall1
deferred.promise
factory
]
我创建了一个边缘服务来从我的 api 服务调用方法。我使用 $timeout 来模拟异步 api 调用。
debugger.factory "EdgeService", ($resource, api, $q, $timeout, $http) ->
fetchIsDynamic = ->
api.getIsDynamicApp()
tickets: ->
deferred = $q.defer()
fetchIsDynamic().then (data) ->
$timeout (->
deferred.resolve data
console.log data #<- this works, I can see the data
), 3000
deferred.promise
在我的 EdgeController 中,我调用该服务并将值附加到 $scope.data
debugger.controller "EdgeController", ($scope, EdgeService) ->
$scope.load = ->
$scope.data = EdgeService.tickets()
debugger.$inject = ["$scope"]
这是我的 slim 模板
doctype html
html(ng-app="debugger" class="ng-scope")
head
title Ads Debugger
= stylesheet_link_tag "application/debugger"
= javascript_include_tag "debugger"
body
#content(ng-controller="EdgeController")
.search_form
form class="serch_form"
input type="text" name="search_box" id="search_box"
input type="submit" value="Search" ng-click="load()"
div
pre message {{data}}
输出未绑定(bind)'
如果我必须进行多个 api 调用并在每个调用返回时更新 View ,那么这也是最好的实现方法吗?
最佳答案
$scope.data = EdgeService.tickets()
应该是
EdgeService.tickets().then (data) ->
$scope.data = data
AngularJS 不会自动解开 promise in newer versions 。这适用于旧版本的 Angular。
要执行多个相互依赖的 API 调用,您可以这样做
callA
.then(callB)
.then(callC)
您可以使用 $q.all 并行执行多个操作
$q.all([callA, callB, callC]).then( .... )
关于angularjs - promise 解决后, View 中的数据未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20481327/