封装单次请求 重复出现问题

问题描述：

页面中有多个按钮，需要解决这多个按钮多次点击重复请求得问题

解决办法：

在请求js中进行请求拦截，每次请求加一个唯一标识，如果请求重复，则取消请求，仅把最后一次请求的事件进行下去

代码：

/ 标识请求
const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  return config.method === 'get'
    ? encodeURIComponent(url + JSON.stringify(config.params))  将请求生成唯一标识  encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
    : encodeURIComponent(config.url + JSON.stringify(config.data))
}
// 取消重复请求
const pending = {}
const CancelToken = axios.CancelToken
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]('请勿重复请求')
  }
  delete pending[key]
}

请求拦截中进行请求数据处理

// request interceptor
service.interceptors.request.use(
  config => {
    const requestData = getRequestIdentify(config, true)
    removePending(requestData, true)
    config.cancelToken = new CancelToken((c) => {  //取消请求
      pending[requestData] = c
    })
    return config
  },
  error => {
    // do something with request error
    // console.log(error, '请求拦截') // for debug
    return Promise.reject(error)
  }
)

标签：封装,请求,url,单次,key,const,config,pending
来源： https://www.cnblogs.com/qinyuanchun/p/15067211.html