偷个懒 用下别人的代码 原帖 (侵删)
文中稍作修改 功能不变
新建一个请求文件
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…