异步并行请求-部分呈现

Question

在异步并行请求之后部分呈现视图的正确方法是什么？

目前，我正在做以下工作

// an example using an object instead of an array
async.parallel({
    one: function(callback){
        setTimeout(function(){
            callback(null, 1);
            // can I partially merge the results and render here?
        }, 200);
    },
    two: function(callback){
        setTimeout(function(){
            callback(null, 2);
            // can I partially merge the results and render here?
        }, 100);
    }
},
function(err, results) {
    // results is now equals to: {one: 1, two: 2}
    // merge the results and render a view
    res.render('mypage.ejs', { title: 'Results'});

});

它基本上工作得很好，但是，如果我有一个function1, function2, ..., functionN，只有当最慢的函数完成时，视图才会被渲染。

我希望找到合适的方法，以便能够在第一个函数返回时立即呈现视图，以最小化用户延迟，并在函数结果可用时立即添加它们。

Answer 1

你想要的是facebook的大管道：https://www.facebook.com/note.php?note_id=389414033919。幸运的是，使用nodejs很容易做到这一点，因为流是内置的。不幸的是，模板系统在这方面做得不好，因为异步模板是一个令人头疼的问题。但是，这比执行任何额外的AJAX请求要好得多。

基本的想法是你首先发送一个布局：

res.render('layout.ejs', function (err, html) {
  if (err) return next(err)

  res.setHeader('Content-Type', 'text/html; charset=utf-8')
  res.write(html.replace('</body></html>', ''))

  // Ends the response. 
  // `writePartials` should not return anything in the callback!
  writePartials(res.end.bind(res, '</body></html>'))
})

您无法发送</body></html>，因为您的文档尚未完成。那么writePartials将是一堆并行执行的异步函数(部分或页面小程序)。

function writePartials(callback) {
  async.parallel([partial1, partial2, partial3], callback)
})

注意:由于您已经编写了响应，因此除了记录错误之外，您对错误几乎无能为力。

每个部分要做的是将内联javascript发送到客户端。例如，布局可以有.stream，当到达时，或者当“回调完成”时，页面将替换.stream的innerHTML。

function partialStream(callback) {
  res.render('stream.partial.ejs', function (err, html) {
    // Don't return the error in the callback
    // You may want to display an error message or something instead
    if (err) {
      console.error(err.stack)
      callback()
      return
    }

    res.write('<script>document.querySelector(".stream").innerHTML = ' + 
      JSON.stringify(html) + ';</script>')
    callback()
  })
})

就我个人而言，我有.stream.placeholder，并用一个新的.stream元素替换它。原因是我基本上做了.placeholder, .placeholder ~ * {display: none}，这样就不会在页面上跳转。然而，这需要一个DIY前端框架，因为JS突然变得更加复杂。

现在，您的响应正在流传输。唯一的要求是客户端支持Javascript。

Answer 2

我认为你不能只在后台做。

为了最小化用户的延迟，您需要将最小的页面发送到浏览器，然后通过AJAX从浏览器请求其余的信息。另一种最小化延迟的方法是在第一个页面加载时将所有模板连同呈现的页面一起发送到浏览器，并根据您从服务器请求的数据在浏览器中呈现所有页面。我就是这么做的。nodejs的美妙之处在于，您可以在后端和前端使用相同的模板引擎，还可以共享模块。

如果您的页面的组成方式是慢的信息比快的信息在超文本标记语言中更深，那么您可以不使用res.render (呈现整个页面)而部分编写响应，而改用res.write。我不认为这种方法值得认真关注，因为你会比你注意到的更快地坚持下去……