Node.js+Express环境下如何在CATCH块中跳转页面及终止加载

核心根因 #

• 首先你的Express路由回调参数顺序写错，app.get()的标准回调参数顺序是(req, res, next)，你写的function(err, req, res)会导致响应对象res位置错位，这是后续res undefined的核心原因。
• 你修改后的handleError额外定义了res形参，但Promise的catch回调只会传入错误对象，自定义的res形参没有实际传入值，自然是undefined。
• 错误触发时你既没有关闭puppeteer浏览器实例，也没有给客户端返回任何响应，导致请求一直挂起，浏览器加载标识持续显示。

修正后完整代码 #

// 先修正路由回调参数顺序
app.get("/", function(req, res){
  let browser = null // 把browser提到外层，方便错误捕获时关闭
  function handleError(err) {
    console.log('Ohhhh nooo');
    console.log(err.message);
    // 出错时先关闭浏览器实例
    if(browser) browser.close();
    // 直接调用闭包内的res返回响应，不需要额外传参
    res.render("index2");
  }
  (async ()=>{
    let movieURL= "https://www.ximdb.com/title/tt1375666/?ref_=hm_tpks_tt_i_1_pd_tp1_cp";
    browser = await puppeteer.launch();
    let page = await browser.newPage();
    await page.goto(movieURL, {waitUntil: "networkidle2"});
    const movieData = await page.evaluate(() => {
      let movieTitle = document.querySelector('div[class="TitleBlock__TitleContainer-sc-1nlhx7j-1 jxsVNt"] > h1').innerText;
      let movieRating = document.querySelector('span[class="AggregateRatingButton__RatingScore-sc-1ll29m0-1 iTLWoV"]').innerText;
      return{movieTitle, movieRating}
    });
    res.render("index2", {movieData});
    console.log(movieData);

    await browser.close();
    return;

  })()
  .catch(handleError);
});

问题对应解决方案 #

1. 浏览器加载标识不消失：出错时在handleError中先关闭puppeteer实例释放资源，再调用res.render()给客户端返回响应，请求就会正常结束，加载状态自动终止。
2. Cannot read property 'render' of undefined报错：首先修正路由回调的参数顺序拿到正确的res对象，其次handleError不要额外定义res形参，直接使用闭包作用域下的res即可。

内容的提问来源于stack exchange，提问作者Abdulhakim