Vue+axios封装请求实现前后端分离
本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码，供大家参考，具体内容如下
前言
我们需要进行前后端分离开发，那么前后端的跨域问题就是无可避免的问题，前后端的请求也是无可避免的，Vue之中有一个请求组件是axios，我们可以对axios进行封装作为我们请求的工具组件
#一、封装axios
vue.config.js配置文件
module.exports={
configureWebpack:{
resolve:{
alias:{
api:'@/api',
assets:'@/assets',
components:'@/components',
layouts:'@/layouts',
router:'@/router',
store:'@/store',
utils:'@/utils',
views:'@/views'
}
}
},
devServer:{
//端口
port:8081,
//后端接口
proxy:{
'/api':{
target:'http://localhost:8099',//目标代理接口地址
changeOrigin:true,//开启代理，在本地创建一个虚拟服务端
//ws:true,//是否启用websockets
pathRewrite:{
'^/api':''
}
}
}
}
}
request.js，封装组件
//配置axios
importaxiosfrom'axios'
constinstance=axios.create({
baseURL:'/api',
timeout:6000
})
instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'
//请求拦截器
instance.interceptors.request.use(
function(config){
returnconfig
},
function(error){
//对请求错误做些什么
returnPromise.reject(error)
}
)
//响应拦截器
instance.interceptors.response.use(
function(response){
returnresponse.data
},
function(error){
//对响应错误做点什么
returnPromise.reject(error)
}
)
exportdefaultfunction(method,url,data='',config=''){
method=method.toLowerCase()
if(method==='post'){
if(config!==''){
returninstance.post(url,data,config)
}else{
returninstance.post(url,data)
}
}elseif(method==='get'){
returninstance.get(url,{params:data})
}elseif(method==='delete'){
returninstance.delete(url,{params:data})
}elseif(method==='put'){
returninstance.put(url,data)
}else{
console.error('未知的method'+method)
returnfalse
}
}
api.js，接口文件
importreqfrom'@/utils/request'
/**
*批量查询
*@paramparams
*/
exportconstlist=params=>req("get","/resource/list",params);
具体的页面之中进行导入使用即可
总结
这就是vue中对于axios的初步封装使用，后续会持续更新
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。