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
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
timeout: 6000
})
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//请求拦截器
instance.interceptors.request.use(
function(config) {
return config
},
function(error) {
//对请求错误做些什么
return Promise.reject(error)
}
)
//响应拦截器
instance.interceptors.response.use(
function(response) {
return response.data
},
function(error) {
//对响应错误做点什么
资源评论
小小二-yan2023-07-244：通过这篇文件的学习，我对Vue axios的使用更加熟练了，同时也进一步了解了前后端分离的开发思路。
一曲歌长安2023-07-245：对于想要实现前后端分离的开发者来说，这篇文件可以作为一个很好的参考资料，给予了很多实际的建议和技巧。
lowsapkj2023-07-243：作者在这篇文件里展示了Vue axios封装请求的实例，让我了解到一个更高效的前后端数据交互方式。
WaiyuetFung2023-07-241：这篇文件清晰地介绍了Vue axios封装请求实现前后端分离的方法，让我受益匪浅。
丽龙2023-07-242：对于初学者来说，这篇文件的讲解方式很容易理解，让我快速上手了前后端分离的开发模式。
