以下是一个完整的 Axios 封装示例,包括 GET、POST、PUT、DELETE 请求方法,并配置了请求头以传递 token,同时实现了请求拦截器和响应拦截器,用于拦截不同的异常状态码及其他需求。
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // API 基础路径
timeout: 10000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在请求头中添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 其他请求头设置
config.headers['Content-Type'] = 'application/json';
return config;
},
(error: AxiosError) => {
// 请求错误处理
console.error('请求错误:', error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
// 如果请求成功,直接返回数据
const res = response.data;
// 根据后端返回的状态码进行判断
if (res.code !== 200) {
console.error('响应错误:', res.message || 'Error');
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
(error: AxiosError) => {
// 错误响应处理
if (error.response) {
const status = error.response.status;
switch (status) {
case 400:
console.error('错误请求: 400');
break;
case 401:
console.error('未授权,请重新登录: 401');
// 可以跳转到登录页面
break;
case 403:
console.error('拒绝访问: 403');
break;
case 404:
console.error('请求错误,未找到该资源: 404');
break;
case 500:
console.error('服务器错误: 500');
break;
default:
console.error(`连接错误: ${status}`);
}
} else {
console.error('请求失败:', error.message);
}
return Promise.reject(error);
}
);
// 封装 GET 请求
export const getRequest = (url: string, params?: any, config?: AxiosRequestConfig) => {
return service.get(url, {
params,
...config,
});
};
// 封装 POST 请求
export const postRequest = (url: string, data?: any, config?: AxiosRequestConfig) => {
return service.post(url, data, config);
};
// 封装 PUT 请求
export const putRequest = (url: string, data?: any, config?: AxiosRequestConfig) => {
return service.put(url, data, config);
};
// 封装 DELETE 请求
export const deleteRequest = (url: string, params?: any, config?: AxiosRequestConfig) => {
return service.delete(url, {
params,
...config,
});
};
export default service;
2. 在项目中使用封装的 Axios 请求
2.1 在 Vue 组件中使用
首先,在你的 Vue 组件中引入封装好的 Axios 方法。例如:
<template>
<div>
<h1>Axios 请求示例</h1>
<button @click="fetchData">获取数据</button>
<button @click="postData">提交数据</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { getRequest, postRequest } from '@/utils/request'; // 替换为实际的路径
export default defineComponent({
name: 'AxiosExample',
methods: {
async fetchData() {
try {
const response = await getRequest('/api/example', { param1: 'value1' });
console.log('获取的数据:', response);
} catch (error) {
console.error('获取数据失败:', error);
}
},
async postData() {
try {
const data = { key1: 'value1', key2: 'value2' };
const response = await postRequest('/api/example', data);
console.log('提交的数据:', response);
} catch (error) {
console.error('提交数据失败:', error);
}
}
}
});
</script>
2.2 全局配置 Axios 实例
如果想要全局使用 service
实例,你可以在项目入口文件(如 main.ts
)中配置:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import axiosInstance from '@/utils/request'; // 替换为实际路径
const app = createApp(App);
// 全局挂载 axios 实例
app.config.globalProperties.$axios = axiosInstance;
app.use(router).use(store).mount('#app');
在 Vue 组件中使用全局配置的 axios
实例:
<template>
<div>
<h1>全局 Axios 请求示例</h1>
<button @click="fetchData">获取数据</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'GlobalAxiosExample',
methods: {
async fetchData() {
try {
const response = await this.$axios.get('/api/example');
console.log('获取的数据:', response);
} catch (error) {
console.error('获取数据失败:', error);
}
}
}
});
</script>
3. 总结
-
封装灵活性:你可以根据实际需求对封装进行扩展,比如增加统一的错误提示、全局加载动画、或者日志记录等。
-
全局与局部使用:封装的 Axios 实例既可以在 Vue 组件中局部引入使用,也可以在全局挂载后方便全局调用。
-
响应拦截器的处理:拦截器的设置可以帮助你统一处理后端的状态码,简化业务逻辑代码。
通过以上方法,能够简洁、高效地管理你的 API 请求,提升项目的可维护性。