Axios 封装并去除重复请求请求

包装代码

// axios.js
// 封装axios请求,返回重新封装的数据格式
import axios from 'axios'
import errHandle from './errHandle'

class HttpRequest {
  constructor(baseUrl) {
    this.baseUrl = baseUrl
  }

  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
      timeout: 10000
    }
    return config
  }

  // 设定拦截器
  interceptors (instance) {
    // 添加请求拦截器
    instance.interceptors.request.use((config) => {
        // 如果有token 的话 在header添加token 如果没有（登录的情况）就不传
     if () {
            config.headers.Authorization = JSON.parse(window.localStorage.getItem("Login")).token
     }
        
      return config
    }, (error) => {
      // 对错误的统一处理
      // 对请求错误做些什么
      errHandle(error)
      return Promise.reject(error)
    })

    // 添加响应拦截器
    instance.interceptors.response.use((res) => {
      if (res.status === 200) {
        return Promise.resolve(res.data)
      } else {
        return Promise.reject(res)
      }
      // 对响应数据做点什么
    }, (error) => {
      // debugger
      errHandle(error)
      // 对响应错误做点什么
      return Promise.reject(error)
    })
  }

  // 创建实例
  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
    }, config)
    return this.request(options)
  }

  post (url, data) {
    return this.request({
      method: 'post',
      url,
      data
    })
  }
}

export default HttpRequest

 

// request.js
import HttpRequest from './axios'
import config from './../config'

// 根据不同环境 不同的请求url
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev
  : config.baseUrl.prod

const axios = new HttpRequest(baseUrl)

export default axios
 

中，构建长列表并点击填充更多时，需要考虑网速较慢的情况。在请求到达之前，如果再次点击添加更多，则需要这样做。重复的请求可以取消。

axios.js

const CancelToken = axios.CancelToken
constructor(baseUrl) {
    this.baseUrl = baseUrl
    this.pending = {} // ++
}
// ------------------------- 
// key 判断是否相同的请求
// isRequest 判断请求是否已经得到响应
// this.pending[key] 判断是否发送了
removePending(key, isRequest = false) {
    if (this.pending[key] && isRequest) {
        this.pending[key]('取消重复请求!')
    }
    delete this.pending[key]
}
// ------------------------- 
// 判断上一次的请求是否有回应 请求拦截器
instance.interceptors.request.use((config) => {
    const key = config.url + '&' + config.method
    this.removePending(key, true)
    
    // 核心.. 这个 c 个人理解为：调用则会取消此次请求。
    config.cancelToken = new CancelToken(c => {
        this.pending[key] = c
    })
    return config
},

// -------------------------                
                                  instance.interceptors.response.use((res) => {
    const key = res.config.url + '&' + res.config.method
    this.removePending(key) // 默认 isRequest = false
 
    if (res.status === 200) {
        return Promise.resolve(res.data)
    } else {
        return Promise.reject(res)
    }
    ...
})
 

发送请求：

getList(options).then(res => {
    // ...do sth
}).catch(e => {
    if (e) {
        this.$alert(e.message)
    }
    // e.message(则是调用上面的c传的参数)
})
 

所有步骤都是提交申请。今天，this.pending[key]很重要。如果用户因为网速问题没有收到响应（可以在浏览器网络中更改网速的调试），点击重新提交请求，this.pending[key] this.$alert(e.message) 会被执行 将会被杀死。如果有响应，那就是delete this.pending[key]，这样就完成了重复请求的消除，并提示用户。