Jade / Node.js：從Tumblr加載帖子時顯示加載消息

Question

我有一個Node.js應用程序，它從Tumblr加載帖子，然后顯示它們。
當服務器從客戶端收到請求時，服務器從Tumblr獲取最后5個帖子，並將它們傳遞給Jade，后者將渲染模板並將其轉換為HTML，然后再將整個內容傳遞給客戶端。

當然，由於從Tumblr加載帖子是異步的，因此客戶端第一次訪問該頁面時，posts對象將為空（因為在從Tumblr接收帖子之前就已呈現並發送了請求）。 但是，刷新頁面后，posts對象不再為空，並且該頁面填充了來自Tumblr的帖子。

現在，就像任何體面的網頁一樣，如果傳遞的posts對象為null或為空，則我的屏幕將顯示“正在從Tumblr加載帖子”。 但是，由於后取方法的異步性質，它確實需要刷新頁面才能看到帖子。 我想避免使用JavaScript刷新頁面，所以如何動態加載頁面，顯示從Tumblr檢索時“從Tumblr加載帖子”，然后更新頁面而不刷新？

以下是一些相關的代碼片段。

后提取器方法：

function getPosts() {
    var self = this;
    var posts = {};
    blog.text({limit: 5}, function(error, response) {
        if (error) {
           throw new Error(error);
        }

        self.posts = response.posts;
    });

    if (main.debug) console.log(posts);
    return this.posts;
}

請求處理程序：

app.get('/', function(req, res) {
    res.render('index', {
        title: "My Site",
        posts: getPosts()
    });
});

顯示帖子的Jade擴展塊：

if posts == null
  .postContainer#nullPosts
    h1 Still loading!
    p
      | You caught us at a bad time: we're still loading posts from
      | Tumblr. Try refreshing the page in a few seconds.
    p#emote Sorry! (>u///u<)
else
  for post in posts
    .postContainer
      h1
        a(title='View on Tumblr', target='_blank', href='#{post.post_url}')
          if post.title == ""
            = post.timestamp
          else
            = post.title
      p !{post.body}
      p.tags
        for tag in post.tags
          = "#" + tag + " "

Answer 1

Socket.IO可能會幫您解決問題。 打開套接字連接並通過它們發送圖像。 套接字在一定時間后輪詢服務器。 直到您沒有來自套接字的任何數據，您都可以通過顯示消息從客戶端進行處理。

第二種選擇是從客戶端發出ajax get調用，直到未完成為止，顯示加載圖像，然后成功刪除加載圖像。