亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

從入門到精通詳解Vue如何實現(xiàn)防止重復(fù)提交

 更新時間：2025年06月20日 08:28:01   作者：大魚前端  
作為經(jīng)歷過大型項目洗禮的前端工程師,小編深知重復(fù)提交問題絕非簡單的按鈕禁用就能解決,今天,就將帶大家構(gòu)建一套生產(chǎn)級的重復(fù)提交防御體系,涵蓋從基礎(chǔ)到架構(gòu)的全套方案

一、問題本質(zhì)與解決方案矩陣

在深入代碼前，我們需要建立完整的認知框架：

問題維度典型表現(xiàn)解決方案層級
用戶行為快速連續(xù)點擊交互層防御
網(wǎng)絡(luò)環(huán)境請求延遲導(dǎo)致的重復(fù)提交網(wǎng)絡(luò)層防御
業(yè)務(wù)場景多Tab操作相同資源業(yè)務(wù)層防御
系統(tǒng)架構(gòu)分布式請求處理服務(wù)端冪等設(shè)計

二、基礎(chǔ)防御層：用戶交互控制

1. 防抖方案

// 適合緊急修復(fù)線上問題
const debounceSubmit = (fn, delay = 600) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

適用場景：臨時熱修復(fù)、簡單表單

2. 狀態(tài)變量方案（Vue經(jīng)典模式）

<template>
  <button 
    @click="handleSubmit"
    :disabled="submitting"
    :class="{ 'opacity-50': submitting }"
  >
    <Spin v-if="submitting" class="mr-1"/>
    {{ submitting ? '提交中...' : '確認提交' }}
  </button>
</template>

<script>
export default {
  data: () => ({
    submitting: false
  }),
  methods: {
    async handleSubmit() {
      if (this.submitting) return;
      
      this.submitting = true;
      try {
        await this.$api.createOrder(this.form);
        this.$message.success('創(chuàng)建成功');
      } finally {
        this.submitting = false;
      }
    }
  }
}
</script>

優(yōu)化技巧：

  • 使用finally確保狀態(tài)重置
  • 添加視覺反饋（禁用狀態(tài)+加載動畫）

三、工程化層：可復(fù)用方案

1. 高階函數(shù)封裝

// utils/submitGuard.js
export const withSubmitGuard = (fn) => {
  let isPending = false;
  
  return async (...args) => {
    if (isPending) {
      throw new Error('請勿重復(fù)提交');
    }
    
    isPending = true;
    try {
      return await fn(...args);
    } finally {
      isPending = false;
    }
  };
};

// 使用示例
const guardedSubmit = withSubmitGuard(payload => 
  axios.post('/api/order', payload)
);

2. Vue Mixin方案

// mixins/submitGuard.js
export default {
  data: () => ({
    $_submitGuard: new Set() // 支持多請求并發(fā)控制
  }),
  methods: {
    async $guardSubmit(requestKey, fn) {
      if (this.$_submitGuard.has(requestKey)) {
        throw new Error(`[${requestKey}] 請求已在進行中`);
      }
      
      this.$_submitGuard.add(requestKey);
      try {
        return await fn();
      } finally {
        this.$_submitGuard.delete(requestKey);
      }
    }
  }
}

// 組件中使用
await this.$guardSubmit('createOrder', () => (
  this.$api.createOrder(this.form)
));

3. 自定義指令方案（Vue2/Vue3通用）

// directives/v-submit-lock.js
const createSubmitLockDirective = (compiler) => ({
  [compiler === 'vue3' ? 'beforeMount' : 'inserted'](el, binding) {
    const {
      callback,
      loadingText = '處理中...',
      lockClass = 'submit-lock',
      lockAttribute = 'data-submitting'
    } = normalizeOptions(binding);
    
    const originalHTML = el.innerHTML;
    let isSubmitting = false;
    
    const handleClick = async (e) => {
      if (isSubmitting) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return;
      }
      
      isSubmitting = true;
      el.setAttribute(lockAttribute, 'true');
      el.classList.add(lockClass);
      el.innerHTML = loadingText;
      
      try {
        await callback(e);
      } finally {
        isSubmitting = false;
        el.removeAttribute(lockAttribute);
        el.classList.remove(lockClass);
        el.innerHTML = originalHTML;
      }
    };
    
    el._submitLockHandler = handleClick;
    el.addEventListener('click', handleClick, true);
  },
  
  [compiler === 'vue3' ? 'unmounted' : 'unbind'](el) {
    el.removeEventListener('click', el._submitLockHandler);
  }
});

function normalizeOptions(binding) {
  if (typeof binding.value === 'function') {
    return { callback: binding.value };
  }
  
  return {
    callback: binding.value?.handler || binding.value?.callback,
    loadingText: binding.value?.loadingText,
    lockClass: binding.value?.lockClass,
    lockAttribute: binding.value?.lockAttribute
  };
}

// Vue2注冊
Vue.directive('submit-lock', createSubmitLockDirective('vue2'));

// Vue3注冊
app.directive('submit-lock', createSubmitLockDirective('vue3'));

使用示例：

<template>
  <!-- 基礎(chǔ)用法 -->
  <button v-submit-lock="handleSubmit">提交</button>
  
  <!-- 配置參數(shù) -->
  <button
    v-submit-lock="{
      handler: submitPayment,
      loadingText: '支付中...',
      lockClass: 'payment-lock'
    }"
    class="btn-pay"
  >
    立即支付
  </button>
  
  <!-- 帶事件參數(shù) -->
  <button
    v-submit-lock="(e) => handleSpecialSubmit(e, params)"
  >
    特殊提交
  </button>
</template>

指令優(yōu)勢：

  • 完全解耦：與組件邏輯零耦合
  • 細粒度控制：可針對不同按鈕單獨配置
  • 框架無關(guān)：核心邏輯可移植到其他框架
  • 漸進增強：支持從簡單到復(fù)雜的各種場景

4. 組合式API方案（Vue3專屬）

// composables/useSubmitLock.ts
import { ref } from 'vue';

export function useSubmitLock() {
  const locks = ref<Set<string>>(new Set());
  
  const withLock = async <T>(
    key: string | symbol,
    fn: () => Promise<T>
  ): Promise<T> => {
    const lockKey = typeof key === 'symbol' ? key.description : key;
    
    if (locks.value.has(lockKey!)) {
      throw new Error(`操作[${String(lockKey)}]已在進行中`);
    }
    
    locks.value.add(lockKey!);
    try {
      return await fn();
    } finally {
      locks.value.delete(lockKey!);
    }
  };
  
  return { withLock };
}

// 組件中使用
const { withLock } = useSubmitLock();

const handleSubmit = async () => {
  await withLock('orderSubmit', async () => {
    await api.submitOrder(form.value);
  });
};

四、架構(gòu)級方案：指令+攔截器聯(lián)合作戰(zhàn)

1. 智能請求指紋生成

// composables/useSubmitLock.ts
import { ref } from 'vue';

export function useSubmitLock() {
  const locks = ref<Set<string>>(new Set());
  
  const withLock = async <T>(
    key: string | symbol,
    fn: () => Promise<T>
  ): Promise<T> => {
    const lockKey = typeof key === 'symbol' ? key.description : key;
    
    if (locks.value.has(lockKey!)) {
      throw new Error(`操作[${String(lockKey)}]已在進行中`);
    }
    
    locks.value.add(lockKey!);
    try {
      return await fn();
    } finally {
      locks.value.delete(lockKey!);
    }
  };
  
  return { withLock };
}

// 組件中使用
const { withLock } = useSubmitLock();

const handleSubmit = async () => {
  await withLock('orderSubmit', async () => {
    await api.submitOrder(form.value);
  });
};

2. 增強版Axios攔截器

// utils/requestFingerprint.js
import qs from 'qs';
import hash from 'object-hash';

const createFingerprint = (config) => {
  const { method, url, params, data } = config;
  
  const baseKey = `${method.toUpperCase()}|${url}`;
  const paramsKey = params ? qs.stringify(params, { sort: true }) : '';
  const dataKey = data ? hash.sha1(data) : '';
  
  return [baseKey, paramsKey, dataKey].filter(Boolean).join('|');
};

3. 生產(chǎn)級Vue指令（增強版）

// directives/v-request.js
const STATE = {
  IDLE: Symbol('idle'),
  PENDING: Symbol('pending'),
  SUCCESS: Symbol('success'),
  ERROR: Symbol('error')
};

export default {
  beforeMount(el, { value }) {
    const {
      action,
      confirm = null,
      loadingClass = 'request-loading',
      successClass = 'request-success',
      errorClass = 'request-error',
      strategies = {
        duplicate: 'cancel', // cancel|queue|ignore
        error: 'reset' // reset|keep
      }
    } = parseOptions(value);
    
    let state = STATE.IDLE;
    let originalContent = el.innerHTML;
    
    const setState = (newState) => {
      state = newState;
      el.classList.remove(loadingClass, successClass, errorClass);
      
      switch (state) {
        case STATE.PENDING:
          el.classList.add(loadingClass);
          el.disabled = true;
          break;
        case STATE.SUCCESS:
          el.classList.add(successClass);
          el.disabled = false;
          break;
        case STATE.ERROR:
          el.classList.add(errorClass);
          el.disabled = strategies.error === 'keep';
          break;
        default:
          el.disabled = false;
      }
    };
    
    el.addEventListener('click', async (e) => {
      if (state === STATE.PENDING) {
        e.preventDefault();
        return;
      }
      
      try {
        if (confirm && !window.confirm(confirm)) return;
        
        setState(STATE.PENDING);
        await action(e);
        setState(STATE.SUCCESS);
      } catch (err) {
        setState(STATE.ERROR);
        throw err;
      }
    });
  }
};

function parseOptions(value) {
  if (typeof value === 'function') {
    return { action: value };
  }
  
  if (value && typeof value.action === 'function') {
    return value;
  }
  
  throw new Error('Invalid directive options');
}

4. 企業(yè)級使用示例

<template>
  <!-- 基礎(chǔ)用法 -->
  <button 
    v-request="submitForm"
    class="btn-primary"
  >
    提交訂單
  </button>
  
  <!-- 高級配置 -->
  <button
    v-request="{
      action: () => $api.pay(orderId),
      confirm: '確定支付嗎？',
      strategies: {
        duplicate: 'queue',
        error: 'keep'
      },
      loadingClass: 'payment-loading',
      successClass: 'payment-success'
    }"
    class="btn-pay"
  >
    <template v-if="$requestState?.isPending">
      <LoadingIcon /> 支付處理中
    </template>
    <template v-else>
      立即支付
    </template>
  </button>
</template>

<script>
export default {
  methods: {
    async submitForm() {
      const resp = await this.$api.submit({
        ...this.form,
        __duplicateStrategy: 'cancel' // 覆蓋全局策略
      });
      
      this.$emit('submitted', resp.data);
    }
  }
}
</script>

五、性能與安全增強建議

1.內(nèi)存優(yōu)化：

  • 使用WeakMap存儲請求上下文
  • 設(shè)置請求指紋TTL自動清理

2.異常監(jiān)控：

// 在攔截器中添加監(jiān)控點
const errorInterceptor = (error) => {
  if (axios.isCancel(error)) {
    trackDuplicateRequest(error.message);
  }
  // ...
};

3.服務(wù)端協(xié)同：

// 在請求頭添加冪等ID
axios.interceptors.request.use(config => {
  config.headers['X-Idempotency-Key'] = generateIdempotencyKey();
  return config;
});

六、如何選擇適合的方案？

  • 初創(chuàng)項目：狀態(tài)變量 + 基礎(chǔ)指令
  • 中臺系統(tǒng)：高階函數(shù) + 攔截器基礎(chǔ)版
  • 金融級應(yīng)用：全鏈路防御體系 + 服務(wù)端冪等
  • 特殊場景：
    • 支付場景：請求隊列 + 狀態(tài)持久化
    • 數(shù)據(jù)看板：取消舊請求策略

寫在最后

真正優(yōu)秀的解決方案需要做到三個平衡：

  • 用戶體驗與系統(tǒng)安全的平衡
  • 開發(fā)效率與代碼質(zhì)量的平衡
  • 前端控制與服務(wù)端協(xié)同的平衡

建議從簡單方案開始，隨著業(yè)務(wù)復(fù)雜度提升逐步升級防御體系。

以上就是從入門到精通詳解Vue如何實現(xiàn)防止重復(fù)提交的詳細內(nèi)容，更多關(guān)于Vue防止重復(fù)提交的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • vue寫h5頁面的方法總結(jié)

    vue寫h5頁面的方法總結(jié)

    在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫h5頁面的方法以及注意點分析，有需要的朋友們跟著學(xué)習(xí)下吧。
    2019-02-02
  • vue keep-alive的簡單總結(jié)

    vue keep-alive的簡單總結(jié)

    這篇文章主要介紹了vue中的keep-alive的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2021-01-01
  • 詳解Vue使用 vue-cli 搭建項目

    詳解Vue使用 vue-cli 搭建項目

    本篇文章主要介紹了詳解Vue使用 vue-cli 搭建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • 使用webstorm配置vue+element開發(fā)環(huán)境

    使用webstorm配置vue+element開發(fā)環(huán)境

    這篇文章主要介紹了使用webstorm配置vue+element開發(fā)環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vuex中store的action和mutations用法

    vuex中store的action和mutations用法

    這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue3組合式API實現(xiàn)todo列表效果

    vue3組合式API實現(xiàn)todo列表效果

    這篇文章主要介紹了vue3組合式API實現(xiàn)todo列表,下面用組合式?API的寫法,實現(xiàn)一個可新增、刪除的todo列表效果,需要的朋友可以參考下
    2024-08-08
  • 使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序

    使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序

    這篇文章主要為大家詳細介紹了使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • 使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解

    使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解

    這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue2和Vue3中如何使用WebSocker封裝詳解

    Vue2和Vue3中如何使用WebSocker封裝詳解

    如果項目中多個組件都使用到WebSocket請求,那么我們需要對WebSocket進行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • Jeeplus-vue?實現(xiàn)文件的上傳功能

    Jeeplus-vue?實現(xiàn)文件的上傳功能

    這篇文章主要介紹了Jeeplus-vue?實現(xiàn)文件的上傳，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09

最新評論