vue实现支付轮训

Vue 实现支付轮询

在 Vue 中实现支付轮询通常用于检查支付状态，直到支付成功或超时。以下是实现支付轮询的详细方法。

使用 setInterval 实现轮询

创建一个轮询函数，通过 setInterval 定期检查支付状态。当支付成功或达到最大轮询次数时，清除定时器。

methods: {
  startPaymentPolling(orderId, maxAttempts = 10, interval = 3000) {
    let attempts = 0;
    const poll = setInterval(async () => {
      attempts++;
      try {
        const response = await checkPaymentStatus(orderId);
        if (response.data.status === 'success') {
          clearInterval(poll);
          this.handlePaymentSuccess();
        } else if (attempts >= maxAttempts) {
          clearInterval(poll);
          this.handlePaymentTimeout();
        }
      } catch (error) {
        clearInterval(poll);
        this.handlePaymentError(error);
      }
    }, interval);
  },
  handlePaymentSuccess() {
    console.log('Payment succeeded');
  },
  handlePaymentTimeout() {
    console.log('Payment polling timed out');
  },
  handlePaymentError(error) {
    console.error('Payment polling error:', error);
  }
}

使用 setTimeout 递归实现轮询

递归调用 setTimeout 实现轮询，避免 setInterval 的潜在问题（如请求堆积）。

methods: {
  async pollPaymentStatus(orderId, attempts = 0, maxAttempts = 10, interval = 3000) {
    if (attempts >= maxAttempts) {
      this.handlePaymentTimeout();
      return;
    }
    try {
      const response = await checkPaymentStatus(orderId);
      if (response.data.status === 'success') {
        this.handlePaymentSuccess();
      } else {
        setTimeout(() => {
          this.pollPaymentStatus(orderId, attempts + 1, maxAttempts, interval);
        }, interval);
      }
    } catch (error) {
      this.handlePaymentError(error);
    }
  }
}

结合 Vue 生命周期管理轮询

在组件销毁时清除轮询，避免内存泄漏。

data() {
  return {
    pollingTimer: null
  };
},
methods: {
  startPaymentPolling(orderId) {
    this.pollingTimer = setInterval(async () => {
      const response = await checkPaymentStatus(orderId);
      if (response.data.status === 'success') {
        this.stopPaymentPolling();
        this.handlePaymentSuccess();
      }
    }, 3000);
  },
  stopPaymentPolling() {
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer);
      this.pollingTimer = null;
    }
  }
},
beforeDestroy() {
  this.stopPaymentPolling();
}

使用第三方库（如 axios）实现轮询

结合 axios 发起请求，并处理取消逻辑。

import axios from 'axios';

data() {
  return {
    cancelToken: null
  };
},
methods: {
  startPaymentPolling(orderId) {
    const source = axios.CancelToken.source();
    this.cancelToken = source;
    const poll = async () => {
      try {
        const response = await checkPaymentStatus(orderId, {
          cancelToken: source.token
        });
        if (response.data.status === 'success') {
          this.handlePaymentSuccess();
        } else {
          setTimeout(poll, 3000);
        }
      } catch (error) {
        if (!axios.isCancel(error)) {
          this.handlePaymentError(error);
        }
      }
    };
    poll();
  },
  stopPaymentPolling() {
    if (this.cancelToken) {
      this.cancelToken.cancel('Polling stopped by user');
    }
  }
}

优化轮询逻辑

添加延迟增长策略（如指数退避），减少不必要的请求。

methods: {
  async pollPaymentStatus(orderId, attempts = 0, maxAttempts = 10, delay = 1000) {
    if (attempts >= maxAttempts) {
      this.handlePaymentTimeout();
      return;
    }
    try {
      const response = await checkPaymentStatus(orderId);
      if (response.data.status === 'success') {
        this.handlePaymentSuccess();
      } else {
        const nextDelay = Math.min(delay * 2, 10000); // 上限 10 秒
        setTimeout(() => {
          this.pollPaymentStatus(orderId, attempts + 1, maxAttempts, nextDelay);
        }, delay);
      }
    } catch (error) {
      this.handlePaymentError(error);
    }
  }
}

关键点总结

• 轮询方式选择：setInterval 简单但需手动清理，递归 setTimeout 更灵活。
• 生命周期管理：确保组件销毁时清除轮询，避免内存泄漏。
• 错误处理：捕获网络错误和超时情况，提供用户反馈。
• 性能优化：通过指数退避等策略减少无效请求。