如何实现按钮点击后按指定顺序向服务端发送两个不同请求

核心问题原因 #

你当前遇到的执行顺序错误、请求合并两个问题，本质来自两个错误实现逻辑：

• 单独绑定的clickListener和按钮原生主动作是并行触发的，没有设置先后依赖关系，无法保证禁用逻辑优先执行
• 两个异步请求没有做显式的串行等待，浏览器会默认将间隔极短的同域请求合并发送，出现请求合并的问题

修复方案 #

实现逻辑调整 #

不要拆分按钮主动作和额外点击监听器，把所有逻辑整合到同一个click事件回调中，用async/await显式控制两个请求的串行执行顺序。

代码示例 #

// 给目标按钮绑定唯一的点击事件回调
targetButton.addEventListener('click', async () => {
  // 第一步：先禁用所有需要禁用的其他按钮
  const needDisableBtns = document.querySelectorAll('.need-disable-btn')
  needDisableBtns.forEach(btn => btn.disabled = true)

  try {
    // 等待第一个请求完全执行完成，再走后续逻辑
    const firstRequestResult = await fetch('/your/first/request/path', {
      method: 'POST',
      // 补充你的第一个请求相关参数
    })
    if (!firstRequestResult.ok) throw new Error('第一个请求执行失败')

    // 第一个请求成功后，再触发第二个耗时核心请求
    const coreRequestResult = await fetch('/your/core/longtime/request/path', {
      method: 'POST',
      // 补充核心请求相关参数
    })
    // 补充核心请求返回后的业务处理逻辑
  } catch (err) {
    // 全局错误处理，比如弹出错误提示
    console.error('请求执行出错：', err)
  } finally {
    // 所有逻辑执行完成后，恢复其他按钮的可用状态
    needDisableBtns.forEach(btn => btn.disabled = false)
  }
})

注意事项 #

如果你使用的是Vue、React等前端框架，或者axios等请求库，只需要把上述示例中的fetch调用替换为对应框架/库的请求方法即可，await对所有返回Promise的异步方法都生效。
禁止用回调嵌套的方式控制请求顺序，容易出现回调地狱问题，后续维护成本极高。

内容的提问来源于stack exchange，提问作者Michael Kročka