详解Vue前端对axios的封装和使用
Axios是一个基于promise的HTTP库。将axios封装好后能更高效的开发并且方便维护，而且在以后的项目中也能直接套用，所以封装好是必要的。在参考了很多方法后，我拼凑出了一套我认为很实用的方法。
首先是http目录下的两个文件
helper.js
这个是功能性文件包括拼接url、过滤参数等,把方法集合到一个文件方便维护和修改。
读一遍知道他有什么功能就行了
consthelper={
//根据name获取地址栏的参数值
getQueryString(name){
letreg=newRegExp(`(^|&)${name}=([^&]*)(&|$)`)
lethash=window.location.hash
letsearch=hash.split('?')
letr=search[1]&&search[1].match(reg)
if(r!=null)returnr[2];return''
},
//拼接参数至url
queryString(url,query){
letstr=[]
for(letkeyinquery){
str.push(key+'='+query[key])
}
letparamStr=str.join('&')
returnparamStr?`${url}?${paramStr}`:url
},
//自定义判断元素类型JS
toType(obj){
return({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
},
//参数过滤函数
filterNull(o){
for(varkeyino){
if(o[key]===null){
deleteo[key]
}
if(toType(o[key])==='string'){
o[key]=o[key].trim()
}elseif(toType(o[key])==='object'){
o[key]=filterNull(o[key])
}elseif(toType(o[key])==='array'){
o[key]=filterNull(o[key])
}elseif(toType(o[key])==='number'){
o[key]=filterNull(o[key])
}
}
returno
}
}
exportdefaulthelper
http.js
接收请求，暴露接口，包含参数params、发往后端的url和token（如果不用JWT的同学可以省略参数token），处理后发往后端
importaxiosfrom'axios'
letqs=require('querystring')
importhelperfrom'./helper'
//console.log(process.env.NODE_ENV)
//判断环境提供baseURL，注意要与后台地址一致
letroot=process.env.NODE_ENV==='development'
//开发环境api接口
?
`http://localhost:3001/api`
//生产环境api接口
:
`http://127.0.0.1:3001/api`;
//引用axios，设置头文件
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
functionapiAxios(method,url,params,token){
if(params){
params=helper.filterNull(params)
}
returnaxios({
method:method,
//拼接参数
url:method==='GET'||method==='DELETE'?helper.queryString(url,params):url,
data:method==='POST'||method==='PUT'?qs.stringify(params):null,
baseURL:root,
timeout:10000,
headers:{Authorization:`Bearer${token}`}, //jwt
withCredentials:false
})
}
//返回在vue模板中的调用接口
exportdefault{
get:function(url,params,token){
returnapiAxios('GET',url,params,token)
},
post:function(url,params,token){
returnapiAxios('POST',url,params,token)
},
put:function(url,params,token){
returnapiAxios('PUT',url,params,token)
},
delete:function(url,params,token){
returnapiAxios('DELETE',url,params,token)
},
}
api.js
封装前端api接口，接受前端页面发来的请求，封装后可根据函数名判断类型和url给axios文件,方便维护和开发。
importhttpfrom'../http/http.js'
exportdefault{
login(data,token){
returnhttp.post("/login",data,token)
},
getUserInfo(data,token){
returnhttp.get("/getUserInfo",data,token)
}
}
在main.js中引用后就可以全局调用了
前端中用this.$api.urlName()的格式发送请求，也可以不经过api直接用this.$http，但是每次都要写url，当接口多的时候比较麻烦。所以推荐用api封装好。
importapifrom'./api/api.js' importhttpfrom'./http/http.js' //定义全局变量 Vue.prototype.$api=api Vue.prototype.$http=http
前端中使用:
由于axios返回的是promise对象，所以要用.then的形式接收后端发回来的response，然后做出相应的反馈。
//直接用this.$api调用api中接口，如果不封装api接口可以用this.$http
this.$api.login(data,token).then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(res)
})
以上所述是小编给大家介绍的Vue前端对axios的封装和使用详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。