利用axios解决误触造成的多次请求发送问题。

959 阅读1分钟

问题场景:

在一次小程序开发过程中,由于用户手机卡顿问题,造成用户多次点击按钮,发送多次请求的情况。

解决方式:

采用axios中cancelToken来取消ajax请求。以下为解决代码:

    /**
     * 如果请求带有repetitiveRequestLimit参数
     * 则会进行防止重复提交的操作
     * 利用axios的CancelToken
     */
  // 1. 初试化一个pending,用存放每一次请求
    const pending = {};
    // 2. 判断时候带有repetitiveRequestLimit参数,带有本参数才会开启。
    if (config.data.hasOwnProperty("repetitiveRequestLimit")) {
      // 3. 生成唯一一个key区分每一次请求
      const key = `${config.url}&${config.method}&${JSON.stringify(
        config.data
      )}`;
      // 4. 调用CancelToken方法
      config.cancelToken = new CancelToken((c) => {
        // 5. 判断是否是重复请求
        if (pending[key]) {
          if (Date.now() - pending[key] > 500) {
            // 超过0.5s,删除对应的请求记录,可以重新发起请求
            delete pending[key];
          } else {
            // 0.5s以内的重复请求,取消掉
            c("repeated");
          }
        }
      });
      // 6. 记录下发起请求的时间
      pending[key] = Date.now();
    }