vue中axios封装使用的完整教程
前言
如今，在项目中，普遍采用Axios库进行Http接口请求。它是基于promise的http库，可运行在浏览器端和node.js中。此外还有拦截请求和响应、转换JSON数据、客户端防御XSRF等优秀的特性。
考虑到各个项目实际使用时写法混乱，不统一。对Axios进行一下通用化的封装，目的是帮助简化代码和利于后期的更新维护，尽量通用化。
方法如下
1.vue安装axios
npminstallaxios-S 或者 npmiaxios-S
2.在main.js进行全局引入
importaxiosfrom'axios' Vue.prototype.$axios=axios//将axios绑定到vue的原型上
3.配置跨域在根目录下vue.config.js里边
module.exports={
publicPath:'./',
//配置跨域请求
devServer:{
open:true,//是否自动打开浏览器
https:false,//是否开启https
hotOnly:false,
proxy:{//配置跨域
'/api':{
target:'http://********',//请求接口域名
ws:true,
secure:false,
changOrigin:true,//是否允许跨越
pathRewrite:{
'^/api':''
}
}
},
before:app=>{}
}
}
4.在src子目录下的api文件夹下创建api.js文件进行简单的封装axios
importaxiosfrom'axios'
//这里引用了element的loading全屏加载
import{Loading}from"element-ui";
constservice=axios.create({
baseURL:'/',
timeout:30000//设置请求超时时间
})
letloading="";
//请求拦截器
service.interceptors.request.use(
(config)=>{
//在请求发送之前做一些处理
if(!(config.headers['Content-Type'])){
loading=Loading.service({
lock:true,
text:"加载中...",
spinner:"el-icon-loading",
background:"rgba(255,255,255,0.7)",
customClass:"request-loading",
});
if(config.method=='post'){
config.headers['Content-Type']=
'application/json;charset=UTF-8'
for(varkeyinconfig.data){
if(config.data[key]===''){
deleteconfig.data[key]
}
}
config.data=JSON.stringify(config.data)
}else{
config.headers['Content-Type']=
'application/x-www-form-urlencoded;charset=UTF-8'
config.data=JSON.stringify(config.data)
}
}
consttoken="token"
//让每个请求携带token--['X-Token']为自定义key请根据实际情况自行修改
if(token){
config.headers['Authorization']=token
}
returnconfig
},
(error)=>{
loading.close();
//发送失败
console.log(error)
returnPromise.reject(error)
}
)
//响应拦截器
service.interceptors.response.use(
(response)=>{
loading.close();
//dataAxios是axios返回数据中的data
//loadingInstance.close();
constdataAxios=response.data
//这个状态码是和后端约定的
returndataAxios
},
(error)=>{
returnPromise.reject(error)
}
)
exportdefaultservice
5.在api文件夹下创建http文件
//引入封装好的axios
//ps:如果没有封装，正常引入axios即可
importaxiosfrom"./api";
// /api为配置跨域的路径变量
letreportUpload='/api/report/upload'
exportconstUpload=()=>{
returnaxios.get(reportUpload)
}
6.在页面中调用接口
//引入封装好的接口
import{Upload}from"@/api/http.js";
//调用时使用
asyncUpload(){
let{result}=awaitgetlist();
console.log(result)
},
总结
到此这篇关于vue中axios封装使用的文章就介绍到这了,更多相关vueaxios封装使用内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。