在Angular中附加到字符串的异步请求答案

【问题标题】：Asynchronous Request Appending to String in Angular在Angular中附加到字符串的异步请求
【发布时间】：2014-10-02 03:37:47
【问题描述】：

我正在尝试从与页面关联的所有样式表中获取实际文本。我可以通过类似的方式做到这一点

sheets = document.styleSheets
stylesheet_text = "<style type='text/css'>"
_.each(sheets, (sheet) ->
  if $(sheet).attr("href")
    $http.get($(sheet).attr("href"))
      .success (data) ->
        console.log data # Displays the text perfectly
        stylesheet_text += data # Never gets appended to.
      .error (data) ->
        console.log "error"
)
stylesheet_text += "</style>"
console.log stylesheet_text

问题是最终的console.log 没有显示正确的数据。相反，我回来了

<style type='text/css'></style>

之后，console.log data 触发并开始吐出文本。哦，一个异步问题！一个承诺应该可以解决这个问题，对吧？

getCSSFile = (href) ->
    def = $.Deferred()
    $http.get(href)
      .success (data) ->
        def.resolve(data)
    def.promise()



css = ->
    sheets = document.styleSheets
    stylesheet_text = "<style type='text/css'>"
    _.each(sheets, (sheet) ->
      if $(sheet).attr("href")
        getCSSFile($(sheet).attr("href")).then( (data) ->
          stylesheet_text += data
        )
    )
    stylesheet_text += "</style>"
    console.log stylesheet_text
    stylesheet_text

嗯……不完全是。那仍然没有用。所以，我决定只走一条我认为我知道可行的路线。

ss = ->
    sheets = document.styleSheets
    stylesheet_text = "<style type='text/css'>"
    _.each(sheets, (sheet) ->
      if $(sheet).attr("href")
        $.get($(sheet).attr("href")).then( (data)->
          stylesheet_text += data
        )
    )
    stylesheet_text += "</style>"
    stylesheet_text

就像之前一样，jQuery 请求并没有像我预期的那样填充 stylesheet_text 变量。

在我的函数结束返回之前，我可以做些什么来确保文本实际附加到变量中？

【问题讨论】：

为什么要使用 jQuery deferred 而不是 Angular promise？
反馈会很好。

标签： javascript jquery angularjs coffeescript promise

【解决方案1】：

首先，您可能不应该在 Angular 中过多地使用 jQuery，即 - Angular 已经附带了 deferreds 和 Promise 并且 $http 可以替换 $.get 就好了。

现在对于你的问题，我的 CoffeeScript 有点生疏，但你应该链接承诺：

ss = ->
    sheets = document.styleSheets
    text = "<script type = 'text/css'>";
    links = sheet.href for sheet in sheets when sheet.href? 
    # now chain them all
    links.reduce((p, c) -> p.then( -> $http.get(c).then(data -> text += data)),$q.when())
         .then(val -> val + "</style>")

现在你可以这样做了：

ss.then(text -> console.log text)

【讨论】：