终止请求：终止axios，JQ请求方法

终止请求：axios，JQ方法背景：项目需求中经常遇到点击操作，会频繁调用接口服务，浪费资源。有时更是会出现异步，导致结果出错，产生bug，如何让点击时终止之前所有请求，就是今天学习主要内容：连续点击优化前：连续点击优化后：终止axios请求:api.js增加配置（request.cancelToken）import axios from 'axios'import Vue from 'vue'c

cnailili

1381人浏览 · 2021-11-15 11:10:06

cnailili · 2021-11-15 11:10:06 发布

终止请求：axios，JQ方法

背景：项目需求中经常遇到点击操作，会频繁调用接口服务，浪费资源。有时更是会出现异步，导致结果出错，产生bug，如何让点击时终止之前所有请求，就是今天学习主要内容：

连续点击优化前：
在这里插入图片描述

连续点击优化后：
在这里插入图片描述

终止axios请求:
api.js增加配置（request.cancelToken）

import axios from 'axios'
import Vue from 'vue'
// 构建axios实例
const instance = axios.create({
  // timeout: 5000,    //设置请求超时时间   5s
  // baseURL: '/api',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
})
// 将正在发起的请求存到数组中
let reqList = (Vue.prototype.pending = []);
const cancelToken = axios.CancelToken;
//请求拦截器
instance.interceptors.request.use(
  request => {
    const contentType = request.headers['Content-Type']
    if (contentType) {
      if (contentType.split(';')[0] === 'application/x-www-form-urlencoded') {
        request.data = trequest.data
        request.cancelToken = new cancelToken((c) => {
          // 这里的C是一个函数，用于终止请求的作用
          reqList.push({ f: c });
        });
      }
    }
    return request
  },
  error => {
    return Promise.reject(error)
  }
)
export default instance

之后在每次需要终止请求前调用次方法即可：

    removePending (errorMessage) {
      const errorMsg = errorMessage || "cancelRequest----终止请求";
      //终止pending中的请求：
      for (let i = this.pending.length - 1; i >= 0; i--) {
        this.pending[i].f(errorMsg); //执行取消操作
        this.pending.splice(i, 1); //把这条记录从数组中移除
      }
    },

终止JQ请求:
利用 abort()后，ajax请求立即停止，终止请求

      let url = 'http://xxx.xxx.xx:2000/get_station_info/'
      let param = { "station_type": "160" }
      let ajaxPost = $.post(url, {
        para: JSON.stringify(param)
      })
      ajaxPost.abort();