封装 Axios 可以帮助我们更好地管理 HTTP 请求，例如添加统一的基础 URL、请求头、拦截器等功能。
下面是封装 Axios 的一个示例，以及如何在 Vite 项目中使用它来请求数据。
首先，创建一个新的 JavaScript 文件，比如 http.js 或 axiosInstance.js，并在其中配置 Axios 实例：
// src/http.jsimport axios from 'axios';// 创建一个新的 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com', // 设置基础 URLtimeout: 5000, // 设置超时时间headers: {'Content-Type': 'application/json'}
});// 添加请求拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么，例如添加 token 到请求头const token = localStorage.getItem('token'); // 示例：从本地存储获取 tokenif (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
instance.interceptors.response.use(response => {// 对响应数据做点什么return response.data; // 返回实际的数据而不是整个响应对象},error => {// 对响应错误做点什么if (error.response.status === 401) {// 处理未授权的情况// 可能需要重定向到登录页面或者其他操作}return Promise.reject(error);}
);export default instance;
使用封装后的 Axios
接下来，在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例：
// src/views/MyComponent.vue<template><div><button @click="fetchData">Fetch Data</button><pre>{{ data }}</pre></div>
</template><script>
import axiosInstance from '@/http'; // 引入封装好的 axios 实例export default {data() {return {data: null,};},methods: {async fetchData() {try {const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点this.data = response;} catch (error) {console.error("Failed to fetch data:", error);}},},
};
</script>
在这个例子中，我们在 MyComponent.vue 中定义了一个按钮，点击后会触发 fetchData 方法，该方法通过封装好的 Axios 实例发起请求，并将返回的数据展示出来。
注意事项
- 确保在 Vue 项目中正确配置了路径别名或相对路径，以便正确导入封装好的 Axios 实例。
- 根据实际的需求调整 Axios 的配置和拦截器逻辑。
- 如果你在生产环境中遇到跨域问题，请确保服务器设置了正确的 CORS 头。
通过这种方式，你可以方便地管理和复用 HTTP 请求代码，并且可以根据需要轻松地添加额外的功能，如身份验证和错误处理。
