promise解决后，数据在视图中未更新 [英] Data is not getting updated in the view after promise is resolved

问题描述

我使用我的Rails应用程式作为API后端。所以我有一个单页的角度应用程序，将进行多个API调用，并开始显示为每个数据返回。我不想等待所有的API调用的结果，然后加载数据，所以我开始学习延迟和承诺。

I am using my Rails app as an API backend. So I have a single page angular app which will make multiple api calls and start displaying as each data gets returned. I don't want to wait for all the results from the API call and then load the data, so I started learning deferred and promise.

我有一个名为 api 的角度服务，其中我将对所有api进行$ http调用。我已经硬编码从每个api调用返回的数据用于测试。

I have an angular service called api where I will have $http calls to all my api. I have hardcoded the data that returns from each one of the api calls for testing purposes.

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调用。

I have created an edge service to call methods from my api service. I have used $timeout to simulate the async api calls.

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

In my EdgeController I call the service and attach the value to $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调用和更新视图，

$scope.data = EdgeService.tickets()

应为

EdgeService.tickets().then (data) ->
 $scope.data = data

AngularJS不会自动解包promises 。

AngularJS does not automatically unwrap promises in newer versions. This would work in older versions of Angular.

要执行多个依赖于彼此的API调用，您可以执行

To do multiple API calls dependant of one another you can do

callA
.then(callB)
.then(callC)

Yo可以使用$ q.all执行多个并行操作

Yo can do multiple in parallell using $q.all

$q.all([callA, callB, callC]).then( .... )

这篇关于promise解决后，数据在视图中未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！