解决承诺后,视图中的数据未更新

Posted

技术标签:

【中文标题】解决承诺后,视图中的数据未更新【英文标题】:Data is not getting updated in the view after promise is resolved 【发布时间】:2013-12-27 04:39:36 【问题描述】:

我将我的 Rails 应用程序用作 API 后端。所以我有一个单页角度应用程序,它将进行多个 api 调用并在每个数据返回时开始显示。我不想等待 API 调用的所有结果然后加载数据,所以我开始学习 deferred 和 promise。

我有一个名为 api 的 Angular 服务,我将在其中对我的所有 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"]

这是我的苗条模板

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

输出未绑定'

如果我必须进行多个 api 调用并在每个返回时更新视图,这也是实现的最佳方式吗?

【问题讨论】:

我建议在 JS 中提供示例,和/或 plnkr 或小提琴:) 【参考方案1】:
$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( .... )

【讨论】:

非常感谢!!此外,我计划将数据制作为数组,并在每次调用后将值推送到数组中。这是最好的方法吗? 我的 api 调用不相互依赖。 $q.all 将等待所有 api 调用返回承诺,然后做一些事情。但我想在得到结果时更新我的​​观点。我的一个 api 调用需要 1 分钟,所以我等不及要显示其他值了。

以上是关于解决承诺后,视图中的数据未更新的主要内容,如果未能解决你的问题,请参考以下文章

更新视图未显示的范围变量。承诺不起作用

在第一次单击时承诺解决后,uib Popover 未显示

承诺解决后未触发reactjs render() this.setState 被重新分配

承诺已解决但返回部分数据 - 其余“未定义”

在更新状态和重定向之前等待所有承诺解决

未处理的承诺警告。如何解决?