ctx.render()加载页面需要等后续执行全部结束才会显示最终结果吗？

Question

想要实现的的业务是先渲染页面，然后通过ctx.body往页面中加内容

核心代码如下

await ctx.render('crawler', {
    title: '爬取页面',
    content: `<h2>开始爬取</h2>
                <h4>创建地址池成功！</h4>`
})
const linkPool = createLinkPool()
for (let i = 0; i < linkPool.length; ++i) {
    const html = await requestPage(linkPool[i])
    let builds = await dataHandler(html)
    let arr = [];

    const sql = 'insert into buildinfo(id,name,area,address,average,price,description,type) values ?'
    //let rows = await query(sql, [builds])
    try {
        let rows = await query(sql, [builds])
        ctx.body += `爬取地址${linkPool[i]}的${rows.affectedRows}条数据已经入库`

    } catch (error) {
        ctx.body += `${linkPool[i]}的爬取写入操作失败了！失败原因：${error}`
    }
}

现在的问题是只有当所有写数据库的操作结束，页面才会展示，否则一直在读小圆圈，请问怎么才能达到我所预期的效果

---

我将渲染页面之后的操作放到一个中间件中了，代码如下

router.get('/crawler/', async (ctx, next) => {
    await ctx.render('crawler', {
        title: '爬取页面',
        content: `<h2>开始爬取</h2>
                    <h4>创建地址池成功！</h4>`
    })
    next()
})

页面渲染之后也确实执行了入库操作的逻辑，但是

ctx.body += `爬取地址${linkPool[i]}的${rows.affectedRows}条数据已经入库`

这个操作并没有往页面上写内容，是不是我的用法不对，请问ctx.body是干什么的？

Answer 1

你都await query了当然是读完再返回。
如果你需要先渲染一遍，再填充数据，只能在前端写脚本访问后端接口，因为http不能主动写数据。

Answer 2

你的这个需求，最好的方法就是前后端分离

前端有个静态页面，然后请求后台的接口数据填充页面就可以了

ctx.body 方法 是往前端返回数据相当于response.body的内容

Answer 3

你需要的应该bigpipe的思路去实现。分段的返回内容。具体的实现方式自己去搜索怎么结合你的实现