javascript - 重构异步 CoffeeScript 执行 AJAX

Question

下面的代码可以工作，但我对这些方法的职责不太满意。我试图使这些方法保持肤浅和“单一责任”，但在我看来，它们仍然做了太多不同的事情。

在同步世界中，我会采用三种方法:

• doajax(url) 返回响应
• 返回数据数组的解析(响应)
• draw(data) 用数组创建图形

但我不知道在这种异步情况下该怎么做。任何线索如何重组？将有多个图表，我希望能够在不创建新数据的情况下使用新数据更新给定图表，因此将有一个方法，如 updateGraph(graphId, newData)

doajax = (url) ->
  $.ajax
    url: url
    dataType: 'html'
    success: (response) ->
      parse response

parse = (response) ->
  xmlDoc = $.parseXML(response)
  xml = $(xmlDoc)
  arr = []
  xml.find('S').each ->
    timestamp = new Date($(this).attr('T'))
    value = parseFloat($(this).attr('AI1'))
    arr.push [timestamp, value]
  draw arr

draw = (data) ->
  new Dygraph($('#graph1')[0], data,
  // options..
  )

doajax 'http://api.example.com/stats.xml'

Answer 1

使用动态回调，而不是调用其他预定义函数:

doajax 'http://api.example.com/stats.xml', (xml) -> draw(parse(xml))

或者简单地使用 deferred/promise object由 $.ajax 返回，您确实可以立即返回:

doajax = (url) ->
  $.ajax
    url: url
    dataType: 'xml' # or use 'text' for explicitly calling jQuery.parseXML

parse = (xmlDoc) ->
  $(xmlDoc).find('S').map ->
    timestamp = new Date($(this).attr('T'))
    value = parseFloat($(this).attr('AI1'))
    [timestamp, value]
  .toArray()

draw = (data) ->
  new Dygraph($('#graph1')[0], data,
  # options..
  )

doajax 'http://api.example.com/stats.xml'
  .then parse
  .then draw