node.js - NodeJS 异步函数创建页面加载器

Question

我知道，如果我们的async函数中有await，那么该函数将暂停，直到await完成，所以我想知道我们是否可以使用等待时间来创建页面加载器？如果可以的话，请帮我做到这一点!谢谢!

我的app.js在这里:

const express = require('express');
const app = express();
const mongoose = require('mongoose');
require('dotenv/config');

// set up template engine;
app.set('view engine', 'ejs');

// static file; middleware;
app.use(express.static('public'));
app.use('/post', express.static('/public'));

// middleware;
const homeRoute = require('./controllers/home');
app.use('/', homeRoute);
const postsRoute = require('./controllers/posts');
app.use('/posts', postsRoute);


// connect to mongodb;
mongoose.connect(
    process.env.DB_CONNECTION,
    { useNewUrlParser: true},
    function(){
        console.log('Connected to db');
    }
);

// listen to port;
app.listen(3000);

我的posts.js在这里:

const express = require('express');
const router = express.Router();
const Post = require('../models/posts');
const bodyParser = require('body-parser');
const urlencodedParser = bodyParser.urlencoded({extended: false});

router.get('/', function(req, res){
    res.render('post');
});
router.get('/post_render', async function(req, res){
    try {
        let post = await Post.find();             **HERE I WANT TO HAVE A PAGE LOADER**
        res.render('post_render', {data: post});  **DURING WAITING FOR THE DATA TO BE FOUND**
    } catch (err) {
        res.json({message: err});
    }

})

router.post('/', urlencodedParser, async function(req, res){
    let post = new Post({
        title: req.body.title,
        description: req.body.description
    });
    try {
        let savePost = await post.save(); // 
        res.redirect('/posts/post_render');  
    } catch(err){
        res.json({message: err});
    }
});

module.exports = router;

Answer 1

浏览器中的旋转圆圈，通常称为“旋转器”(这显然是“页面加载器”的意思)是客户端的东西。它必须在客户端 HTML 或 Javascript 中实现。它只能在客户端针对浏览器中 Ajax 调用请求的路由完成，而不是针对通过重定向或从浏览器直接链接到新页面请求的路由。

问题是，一旦浏览器开始请求新页面，它就会清除当前页面内容(因此您不能将微调器放在旧页面中)。直到足够的新页面到达解析和显示 HTML 后，新页面内容才会显示(一旦一大块自包含 HTML 到达、被解析并且不太依赖于尚未加载的其他资源，它就会逐渐显示。

您当前的代码执行以下操作:

    let post = await Post.find();             **HERE I WANT TO HAVE A PAGE LOADER**
    res.render('post_render', {data: post});  **DURING WAITING FOR THE DATA TO BE FOUND**

这意味着在您希望显示微调框期间，您尚未向浏览器发送任何 HTML。因此，浏览器要做的就是清除先前的页面，并坐在那里等待一些可解析的 HTML 内容到达。由于您仅在数据库查找后发送 HTML，因此浏览器不会收到任何可以显示微调器的内容。因此，这段代码的编写方式将无法显示微调器。

您可以在 Ajax 调用期间显示微调器。主机页显示微调器，进行 Ajax 调用，然后在 Ajax 调用完成后隐藏微调器。

<小时/>

我从未尝试过这个，但理论上这个序列是可能的:

  res.write(partA)
  let post = await Post.find();
  res.render('post_render', {data: post}, function (err, partB) {
      if (err) {
          res.write(partX);
      } else {
          res.write(partB);
      }
      res.end();
  });

在此代码中，您将拥有以下 HTML 片段:

partA - HTML 页面的第一部分，允许浏览器开始解析页面并显示微调器(完全使用 HTML 或使用 HTML 和 Javascript)。这不能是整个页面，它必须是部分的、未完成的页面，但浏览器认为即使在等待页面其余部分时也可以安全地开始解析和显示。

partB - 与partA 相关的HTML 页面的其余部分。这将隐藏之前的微调器(可能使用 Javascript)，然后提供页面的其余 HTML。 PartA + PartB 将生成一个完全格式化的合法 HTML 页面。

partX - 这是页面的替代第二部分，与 PartA 一起出现，当出现渲染错误时将显示该部分。

<小时/>

另一种可能性是您的路由发送一个完全格式化的占位符页面，该页面显示您的内容的外壳并放置微调器。该占位符页面中包含一些 Javascript，它们通过对不同路由的 Ajax 调用来请求实际数据或呈现的 HTML。当 Ajax 调用成功时，您的 Javascript 会将该内容插入到页面中并隐藏微调器。这可能比上面的partA/partB想法简单得多。