vue防止接口重复请求实现方法

Posted 2021-12-15 小叶_Jiang

// 封装axios的请求，返回重新封装的数据格式
// 对错误的统一处理
import axios from \'axios\'
import errorHandle from \'./errorHandle\'
const CancelToken = axios.CancelToken
 
class HttpRequest 
  constructor (baseUrl) 
    this.baseUrl = baseUrl
    this.pending =  // 对象的key为每个正在请求的接口，value为取消该接口的方法
  
  // 获取axios配置
  getInsideConfig () 
    const config = 
      baseURL: this.baseUrl,
      headers: 
        \'Content-Type\': \'application/json;charset=utf-8\'
      ,
      timeout: 10000
    
    return config
  
  removePending (key, isRequest = false) 
    // 同一接口重复请求
    if (this.pending[key] && isRequest) 
      this.pending[key](\'取消重复请求\')
    
    // 如果不是同一接口重复请求，则删除pending对象里该请求对应的key
    delete this.pending[key]
  
  // 设定拦截器
  interceptors (instance) 
    // 请求拦截器
    instance.interceptors.request.use((config) => 
      // Do something before request is sent
      let key = config.url + \'&\' + config.method
      this.removePending(key, true)
      config.cancelToken = new CancelToken((c) => 
        this.pending[key] = c
      )
      return config
    , (err) => 
      // debugger
      errorHandle(err)
      // Do something with request error
      return Promise.reject(err)
    )
 
    // 响应请求的拦截器
    instance.interceptors.response.use((res) => 
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      let key = res.config.url + \'&\' + res.config.method
      // 响应结束后删除pending对象里该请求对应的key
      this.removePending(key)
      if (res.status === 200) 
        return Promise.resolve(res.data)
       else 
        return Promise.reject(res)
      
    , (err) => 
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      // debugger
      errorHandle(err)
      return Promise.reject(err)
    )
  
  // 创建实例
  request (options) 
    const instance = axios.create()
    const newOptions = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance)
    return instance(newOptions)
  
  get (url, config) 
    const options = Object.assign(
      method: \'get\',
      url: url
    , config)
    return this.request(options)
  
  post (url, data) 
    return this.request(
      method: \'post\',
      url: url,
      data: data
    )
  

 
export default HttpRequest