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&nbsp;方法 是往前端返回数据相当于response.body的内容

Answer 3

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