Node.js Express服务端POST请求逻辑执行完成后如何实现页面自动跳转

现有代码的核心问题 #

• 前端请求路径不匹配：后端POST /process接收数据，前端代码写的请求路径是/provision，请求根本没有打到正确的接口
• 异步逻辑没有等待：后端POST路由中调用异步的secondFunction没有加await，函数还没执行完请求就已经结束了，也没有给前端返回任何响应
• AJAX请求场景下后端redirect/render不生效：浏览器只有普通表单跳转/地址栏直接访问时才会响应后端的重定向头，AJAX请求收到重定向不会触发页面跳转，需要前端主动控制
• 发起AJAX后立即跳转页面，导致请求上下文丢失：在index页发起AJAX后立刻跳转到/process，原页面的xhr对象直接销毁，根本收不到后端处理完成的响应通知

修复步骤 #

第一步：确认app.js基础配置 #

确保已经配置JSON请求解析，否则后端拿不到AJAX提交的表单数据：

// app.js 中加入这行
app.use(express.json())

第二步：修改后端process.js路由逻辑 #

等待异步函数执行完成后，给前端返回处理状态：

const express = require('express');
const router = express.Router();

/* process等待页路由 */
router.get('/process', async (req, res) => {
  // 把index页提交的表单参数通过query带过来，渲染到process页
  const { instances, region } = req.query
  res.render('process', { instances, region })
});

/* 处理业务逻辑的POST接口 */
router.post('/process', async (req, res) => {
  try {
    var data = req.body;

    const functionOne = async function firstFunction() { 
      // 你的业务逻辑处理
    }
    const secondFunction = async () => {
      const update = await functionOne()
      console.log('处理完成');
    }
    // 等待异步函数执行完成
    await secondFunction();
    // 返回成功状态给前端
    res.json({ success: true, redirectUrl: '/done' })
  } catch (err) {
    console.error('处理失败', err)
    res.status(500).json({ success: false, msg: '处理失败' })
  }
});

第三步：调整前端提交逻辑 #

先修改index页的script.js：

点击提交后不要发AJAX，直接把参数带到process页：

function launchTerraform() {
  const instances = document.getElementById('firstName').value
  const region = document.getElementById('lastName').value
  // 把参数通过query带到process页
  window.location.href = `/process?instances=${encodeURIComponent(instances)}&region=${encodeURIComponent(region)}`
}

然后在process.ejs中添加AJAX逻辑，页面加载后自动发起处理请求：

<!-- process.ejs 里加上这段script -->
<script>
window.onload = function() {
  // 拿到渲染时传入的参数
  const data = {
    instances: "<%= instances %>",
    region: "<%= region %>"
  }
   
  var xhr = new window.XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
      if (this.status === 200) {
        const res = JSON.parse(this.responseText)
        if (res.success) {
          // 处理完成主动跳转到done页
          window.location.href = res.redirectUrl
        } else {
          alert(res.msg)
        }
      } else {
        alert('处理出错')
      }
    } 
  }
  xhr.open('POST', '/process', true)
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
  xhr.send(JSON.stringify(data))
}
</script>

done页路由配置（确保已经配置） #

在done.js路由中添加：

router.get('/done', async (req, res) => {
  res.render('done')
})

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