当前位置：首页 > news >正文

VUE封装axios调用

news 2025/10/18 6:58:50

一、Vue项目配置代理、axios封装和接口调用的实现方案

首先在项目根目录创建 vue.config.js 配置代理：

module.exports = {devServer: {proxy: {'/api': {  // 代理所有以/api开头的请求target: 'http://your-api-domain.com', // 你的后端接口地址changeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 路径重写（去掉/api前缀）}}}}
}

创建 src/utils/request.js 文件（axios封装）：

import axios from 'axios'
import { Message } from 'element-ui' // 按需引入UI组件库的提示组件
import router from '@/router'// 创建axios实例
const service = axios.create({baseURL: process.env.NODE_ENV === 'development' ? '/api' : process.env.VUE_APP_BASE_API, // 根据环境切换timeout: 10000 // 请求超时时间
})// 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么（例如添加token）const token = localStorage.getItem('token')if (token) {config.headers['Authorization'] = `Bearer ${token}`}return config},error => {// 对请求错误做些什么return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做处理（例如只返回data部分）const res = response.data// 这里根据你的后端接口协议进行修改if (res.code !== 200) {Message.error(res.message || 'Error')return Promise.reject(new Error(res.message || 'Error'))}return res},error => {// 对响应错误做处理if (error.response) {switch (error.response.status) {case 401:Message.error('登录过期，请重新登录')router.push('/login')breakcase 403:Message.error('拒绝访问')breakcase 500:Message.error('服务器错误')breakdefault:Message.error(error.response.data.message || '请求错误')}} else {Message.error('网络连接失败')}return Promise.reject(error)}
)export default service

创建接口封装文件 src/api/user.js：

import request from '@/utils/request'// 用户登录
export function login(data) {return request({url: '/user/login',method: 'post',data})
}// 获取用户信息
export function getUserInfo(data) {return request({url: '/user/info',method: 'get',params: data})
}// 其他接口...

在组件中使用封装好的接口：

<template><div><button @click="handleLogin">登录</button></div>
</template><script>
import { login, getUserInfo } from '@/api/user'export default {methods: {async handleLogin() {try {// 调用登录接口const loginRes = await login({username: 'admin',password: '123456'})// 登录成功后获取用户信息const userInfo = await getUserInfo()console.log(userInfo)} catch (error) {console.error('请求失败:', error)}}}
}
</script>