封装axios拦截重复请求

偷个懒 用下别人的代码 原帖 （侵删）
文中稍做修改 功能不变

新建一个请求文件

import axios from 'axios'
//取消请求
let CancelToken = axios.CancelToken
//设置默认请求头，若是每次请求都携带token 建议写在这里
axios.defaults.headers = {

}
// 请求超时的时间限制
axios.defaults.timeout = 20000
// 开始设置请求 config 表明发起请求的参数的实体
axios.interceptors.request.use(config => {
    // 获得参数中的 requestName 字段，用于决定下次发起请求，取消对应的 相同字段的请求
    // 若是没有 requestName 就默认添加一个 不一样的时间戳
    let requestName
    if(config.method === 'post'){
        if(config.data && config.data.requestName) requestName = config.data.requestName
        else requestName = new Date().getTime()
    }else{
        if(config.params && config.params.requestName) requestName = config.params.requestName
        else requestName = new Date().getTime()
    }
    // 判断，若是这里拿到的参数中的 requestName 在上一次请求中已经存在，就取消上一次的请求
    if (requestName) {
        if (axios[requestName] && axios[requestName].cancel) axios[requestName].cancel()
        config.cancelToken = new CancelToken(c => {
            axios[requestName] = {}
            axios[requestName].cancel = c
        })
    }
    return config
}, error => {
    return Promise.reject(error)
})
// 请求到结果的拦截处理
axios.interceptors.response.use(config => {
    // 返回请求正确的结果 解构出须要返回的数据
    const { data, status } = config
    return { data, status }
}, error => {
    // 直接返回后台返回的错误的请求结果 若是须要前端自定义请参考原帖
    return Promise.reject(error.message)
})

若是须要把axios绑定到vue的原型上

在文件最上面引入vue

import Vue from 'vue'

// 将axios 的 post 方法，绑定到 vue 实例上面的 $post
Vue.prototype.$post = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res)
            }).catch(err => {
            reject(err)
        })
    })
}
// 将axios 的 get 方法，绑定到 vue 实例上面的 $get
Vue.prototype.$get = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res) // 返回请求成功的数据 data
        }).catch(err => {
            reject(err)
        })
    })
}

最后将建立封装好的axios暴露出去

export default axios

main.js文件引入该文件

假设文件叫axios 在libs文件夹下

import { axios } from './libs/axios.js'

而后在组件里使用请求

this.$post('api接口', {
    name: "王",
    docType: "pson",
    requestName: 'name02'
}).then(res => {
    console.log(res)
})

this.$get('api接口', {
    name: "李",
    requestName: 'name01'
}).then(res => {
    console.log(res)
})

最后
补充下 参数requestName是本身自定义的一个参数，并非后台须要的数据 主要是用于区分是不是重复的请求 算是这个封装的灵魂吧 若是须要去除在判断method并赋值requestName后
delete config.data.requestName或者 delete config.params.requestName

end…