Vue.js + Laravel项目编辑页请求异常求助：404 Not Found与429 Too Many Requests

我来帮你分析这两个请求异常的根源，并给出针对性的修复方案：

问题1：mounted中多次无参数调用bill接口导致404错误 #

可能原因 #

1. 路由参数初始化时机问题：mounted钩子执行时，$route.params.id可能还未完全加载完成，导致editId为undefined。你的判断条件if(this.$route.params.id !== undefined)没有覆盖到空值场景（比如参数为空字符串），意外发起了无效请求。
2. 组件复用引发重复执行：如果路由配置允许组件复用（比如同一路由切换不同参数），mounted只会执行一次，但参数变化时若没有监听逻辑，可能导致错误的重复请求。
3. 缺少错误捕获机制：try块没有对应catch，请求出错后错误直接抛出，可能引发连锁异常。

修复方案 #

• 强化参数判断逻辑：使用更严谨的条件确保只有有效editId存在时才发起请求，同时添加错误捕获：

  async mounted(){
    this.roleid = this.userData.role_id;
    const header = {
      'Authorization': 'Bearer ' + this.LoginUserData,
    };
    this.editId = this.$route.params.id;
    // 确保editId不为空、不为undefined
    if (this.editId) {
      try{
        const response = await axios.get(`/api/userbackend/bill/${this.editId}`, {headers: header});
        this.form = response.data;
      } catch (error) {
        console.error('获取账单数据失败：', error);
        this.showErrorMsg();
      }
    }
  }
  

• 监听路由参数变化：如果组件会被复用（比如跳转到不同编辑页），添加watch监听参数变化，动态重新请求数据：

  data() {
    return {
      editId: null,
      // 其他数据...
    }
  },
  watch: {
    '$route.params.id': async function(newId) {
      this.editId = newId;
      if (newId) {
        await this.fetchBillData();
      }
    }
  },
  methods: {
    async fetchBillData() {
      const header = {
        'Authorization': 'Bearer ' + this.LoginUserData,
      };
      try{
        const response = await axios.get(`/api/userbackend/bill/${this.editId}`, {headers: header});
        this.form = response.data;
      } catch (error) {
        console.error('获取账单数据失败：', error);
        this.showErrorMsg();
      }
    }
  },
  async mounted(){
    this.roleid = this.userData.role_id;
    this.editId = this.$route.params.id;
    if (this.editId) {
      await this.fetchBillData();
    }
  }
  

问题2：Update函数被多次触发导致429请求过多错误 #

可能原因 #

1. 重复事件绑定：表单同时绑定了@submit和按钮@click事件，点击按钮时触发两次验证与提交逻辑。
2. 无提交状态控制：用户快速多次点击按钮时，没有阻止重复提交，短时间内发送多个POST请求。
3. 验证逻辑重复触发：$validator.validateAll()可能被多次调用，进而重复触发saveRecord。

修复方案 #

• 添加提交状态锁：通过isSubmitting变量控制提交过程，阻止重复请求：

  data() {
    return {
      isSubmitting: false,
      // 其他数据...
    }
  },
  methods: {
    saveRecord(){
      if (this.isSubmitting) return; // 正在提交时直接返回
      this.isSubmitting = true;
      
      const loader = this.$loading.show();
      const formData = new FormData();
      formData.append('id', this.editId);
      // ...追加其他表单数据
      
      const header = {
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + this.LoginUserData,
      };
      
      axios.post('/api/userbackend/Update', formData, {headers: header})
        .then((response) => {
          loader.hide();
          this.isSubmitting = false; // 提交完成解锁
          if(response.data.status === true){
            // ...执行成功逻辑，比如跳转提示
          }
        })
        .catch((error) => {
          loader.hide();
          this.isSubmitting = false; // 失败后也要解锁
          this.showErrorMsg();
        });
    },
    validateBeforeSubmit(e) {
      e.preventDefault();
      if (this.isSubmitting) return; // 防止重复触发验证
      
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.saveRecord();
          return;
        }
        this.showWarningMsg();
      });
    }
  }
  

• 规范事件绑定：确保表单只绑定一次提交事件，按钮使用type="submit"避免重复触发：

  <form @submit.prevent="validateBeforeSubmit">
    <!-- 表单内容 -->
    <button type="submit">保存记录</button>
  </form>
  

• 可选：添加防抖处理：如果需要进一步防止快速点击，给验证函数添加防抖（需引入lodash的debounce）：

  import debounce from 'lodash/debounce';
  
  methods: {
    validateBeforeSubmit: debounce(function(e) {
      e.preventDefault();
      if (this.isSubmitting) return;
      
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.saveRecord();
          return;
        }
        this.showWarningMsg();
      });
    }, 300) // 300ms内仅执行一次
  }
  

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