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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。