vue axios封装httpjs,接口公用配置拦截操作
做一下记录，在vue项目中配置公用的请求https,
(1)位置，在src中新建src/utils/http.js
importaxiosfrom'axios'//引用axios
import{MessageBox,Message}from'element-ui'
importQsfrom'qs'//引入数据格式化
importrouterfrom'@/router'
//axios配置
axios.defaults.timeout=50000//设置接口响应时间
//axios.defaults.baseURL='https://easy-mock.com/mock/'//这是调用数据接口,公共接口url+调用接口名
lethttpUrl=window.location.host
if(httpUrl.indexOf('.com')!==-1){
console.log('生产环境',httpUrl)
}elseif(httpUrl.indexOf('.net')!==-1){
console.log('测试环境',httpUrl)
axios.defaults.baseURL='http://www.test.com'//这是调用数据接口,公共接口url+调用接口名
}elseif(httpUrl.indexOf('localhost:8088')!==-1){
console.log('指定开发环境',httpUrl)
axios.defaults.baseURL='http://localhost:8088/'
}else{
console.log('开发环境',httpUrl)
axios.defaults.baseURL='http://192.168.6.138:8080/'//这是调用数据接口,公共接口url+调用接口名
}
//httprequest拦截器，通过这个，我们就可以把Cookie传到后台
axios.interceptors.request.use(
config=>{
if(config.method=="post"){
//console.log('请求路径',config.url)
if(config.url==='/b/login/checkLogin'){
config.headers={
'Content-Type':'application/x-www-form-urlencoded'//设置跨域头部
}
config.data=Qs.stringify(config.data)
}elseif(config.url==='/b/carModel/createCarModelVersion'){
//此处设置文件上传，配置单独请求头
config.headers={
'Content-Type':'multipart/form-data'
}
}else{
letuserInfo=localStorage.getItem('userInfo')
if(userInfo===null){
returnnull
}
letbToken=localStorage.getItem('btoken')
if(bToken===null){
}else{
config.data.vwToken=bToken
}
config.headers={
'Content-Type':'application/x-www-form-urlencoded'//设置跨域头部
}
config.data=Qs.stringify(config.data)
}
}else{
console.log("get请求")
}
returnconfig
},
err=>{
returnPromise.reject(err)
}
)
//httpresponse拦截器
axios.interceptors.response.use(
response=>{
//console.log('请求拦截返回参数',response)
if(response.status===200){
//成功
letreturnCode=response.data.code
if(returnCode>10000&&returnCode<20000){
//console.log('成功',response)
Message.success(response.data.msg)
}elseif(returnCode>=20000&&returnCode<30000){
//只弹窗，不操作
//console.log('失败1',response)
Message.error(response.data.msg)
}elseif(returnCode>=30000&&returnCode<40000){
//只弹窗，点击跳到登入页
localStorage.removeItem('userInfo')
MessageBox.confirm(response.data.msg,'确定登出',{
confirmButtonText:'重新登录',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
//console.log('此处应退出登录重新实例化')
router.push({path:'/login'})
})
}
}
returnresponse
},
error=>{
//console.log('error',error.toString())
if(
error.toString().trim()===
"TypeError:Cannotreadproperty'cancelToken'ofnull"
){
localStorage.removeItem('userInfo')
MessageBox.confirm(
'会话凭证失效，可以取消继续留在该页面，或者重新登录',
'确定登出',
{
confirmButtonText:'重新登录',
cancelButtonText:'取消',
type:'warning'
}
).then(()=>{
//console.log('此处应退出登录重新实例化')
router.push({path:'/login'})
})
}
//console.log(error.toString().trim())
if(error.toString().trim()==='Error:NetworkError'){
MessageBox.alert('网络请求异常，请稍后重试','出错了',{
confirmButtonText:'确定',
callback:action=>{}
})
}
returnPromise.reject(error.response.data)
}
)
exportdefaultaxios
/**
*fetch请求方法
*@paramurl
*@paramparams
*@returns{Promise}
*/
exportfunctionget(url,params={}){
returnnewPromise((resolve,reject)=>{
axios
.get(url,{
params:params
})
.then(response=>{
resolve(response.data)
})
.catch(err=>{
reject(err)
})
})
}
/**
*post请求方法
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpost(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.post(url,data).then(
response=>{
//console.log(response.data.code)
resolve(response.data)
},
err=>{
reject(err)
}
)
})
}
/**
*patch方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpatch(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.patch(url,data).then(
response=>{
resolve(response.data)
},
err=>{
reject(err)
}
)
})
}
/**
*put方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionput(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.put(url,data).then(
response=>{
resolve(response.data)
},
err=>{
reject(err)
}
)
})
}
(2)在main.js中引入调用，定义全局
importaxiosfrom'axios'
import{post,get,patch,put}from'./utils/http'
//将axios添加到原型链上
Vue.prototype.$axios=axios
//定义全局变量
Vue.prototype.$post=post
Vue.prototype.$get=get
Vue.prototype.$patch=patch
Vue.prototype.$put=put
（3）在需要用到的.vue页面直接使用
//this.logForm为传参
this.logForm={id:this.selectId,knowledgeVersionId:this.baseValue}
this.$post('你的url',this.logForm).then(req=>{
this.logList=req.data
this.logList.allCount=req.allCount
this.logList.nowPage=req.nowPage
this.logList.pageSize=req.pageSize
this.loading=false
}).catch(err=>{
console.log(err)
})
this.$post('/b/checkConfig/updateRelateKnowledge',{id:this.selectId,knowledgeVersionId:this.baseValue}).then(req=>{
console.log(req)
if(req.code===10000){
//this.options=req.data
this.getConfigList()
}
}).catch(err=>{
console.log(err)
})
补充知识：Vue项目关于axios的二次封装service
一、安装axios:npmiaxios--save
二、在src目录下新建文件service.js
三、在service.js文件中写入以下代码
importaxiosfrom'axios'
//创建一个拥有通用配置的axios实例,实例中的配置内容根据实际开发需求而定
exportconstservice=axios.create({
baseURL:'http://***.***.*.**:8080/',//测试环境
timeout:1000*10,//请求超时的毫秒数,如果请求花费超过timeout的时间,请求将被中断
withCredentials:true,//表示跨域请求时是否需要使用凭证,默认fasle
headers:{'Cache-Control':'no-cache'}//不允许缓存，需要重新获取请求
})
//添加请求拦截器
service.interceptors.request.use(config=>{
//在发送请求之前做些什么
returnconfig
},error=>{
//对请求错误做些什么
returnPromise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response=>{
//对响应数据做点什么
returnresponse
},error=>{
//对响应错误做点什么
returnPromise.reject(error)
})
以上是对axios的初步封装，具体功能根据实际需求在service.js文件中进行配置
四、全局使用使用service(也可以局部使用,稍后会说明局部使用方法)
第一步：在main.js中进行挂载
import{service}from'./service'
Vue.prototype.service=service
第二步：使用
//注意：这里必须要使用async和await，不然请求状态一直是Promise{},拿不到请求数据
asynccreated(){
letdata=awaitthis.service.get('menu/user/tree')
console.log(data)//此时能拿到请求的数据
}
五、局部使用service,在组件内先引入再使用
以上这篇vueaxios封装httpjs,接口公用配置拦截操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。