javascript - 异步请求附加到 Angular 中的字符串

Question

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

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触发并开始吐出文本。哦，异步问题! promise 应该可以解决这个问题，对吗？

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正如我所期望的变量。

如何确保在函数结束返回之前文本实际上已附加到变量？

Answer 1

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

现在对于你的问题，我的 CoffeeScript 有点生锈，但你应该链接 promise :

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)