基于Axios的HTTP请求封装方案
1 概述
利用Axios提供的请求拦截与响应处理机制，实现统一的请求管理与身份验证处理。 前提条件：项目已集成Axios库。 安装指令示例：
npm install axios
2 实现方案
2.1 在工具目录创建请求模块
// HTTP客户端配置
import axios from 'axios'
import router from '@/router'
// 创建自定义请求实例
const httpClient = axios.create({
baseURL: 'https://api.example.com/v1', // 服务端基础路径
headers: {
'Content-Type': 'application/json'
},
timeout: 5000
})
// 请求拦截逻辑
httpClient.interceptors.request.use(
config => {
// 非登录接口添加认证令牌
if (localStorage.getItem('auth_token') && !config.url.includes('/login')) {
config.headers['X-Auth-Token'] = localStorage.getItem('auth_token')
}
// 自动处理参数传递方式
if (['POST', 'PUT', 'PATCH'].includes(config.method.toUpperCase())) {
config.data = config.params
}
return config
},
error => Promise.reject(error)
)
// 响应拦截处理
httpClient.interceptors.response.use(
response => {
// 处理业务状态码
if (response.data.status !== 200) {
console.warn(response.data.message || '接口调用异常')
}
return response.data
},
error => {
if (error.code === 'ECONNABORTED') {
console.error('请求超时，正在重定向至登录页')
router.replace('/login')
return Promise.reject(error)
}
// 处理未授权情况
if (error.response?.status === 401) {
localStorage.removeItem('auth_token')
console.warn('会话过期，请重新登录')
router.push('/login')
} else {
console.error('网络异常，请稍后重试')
}
return Promise.reject(error)
}
)
export default httpClient // 导出请求实例
2.2 在API目录建立统一入口
// 示例：登录相关接口导出
import {fetchAuthToken, getUserProfile} from './login'
export default {
fetchAuthToken,
getUserProfile
}
2.3 在API目录创建具体接口文件
// 请求封装模块
import httpService from '@/utils/httpService'
// 授权接口实现
export const fetchAuthToken = data => httpService({
url: '/auth/token',
method: 'POST',
data
})
// 用户信息接口
export const getUserProfile = () => httpService({
url: '/user/profile',
method: 'GET'
})
3 使用示例
api.fetchAuthToken({
username: this.loginName,
password: this.password
}).then(response => {
// 保存认证信息
localStorage.setItem('auth_token', 'Bearer ' + response.token)
// 跳转主页
this.$router.push('/dashboard')
}).catch(err => {
console.error('登录失败:', err.message)
})
api.getUserProfile().then(data => {
// 处理用户数据
this.userInfo = data
}).catch(err => {
console.error('获取失败:', err)
})
