在Vue 3中，可以通过封装axios来实现接口的统一管理和调用。封装后的接口调用更加简洁，代码可维护性也更好。以下是一个简单的Vue 3中axios接口封装的示例：
1.首先，安装axios和qs（如果需要处理复杂数据）：
npm install axios qs
2.创建一个api.js文件用于存放接口封装的代码：
1. // api.js 2. import axios from 'axios'; 3. import qs from 'qs'; 4. 5. // 创建axios实例 6. const instance = axios.create({ 7. baseURL: 'https://api.example.com', // 替换为你的后端接口地址 8. timeout: 10000, // 请求超时时间 9. }); 10. 11. // 请求拦截器 12. instance.interceptors.request.use( 13. config => { 14. // 在请求发送之前可以做一些处理，比如添加请求头等 15. return config; 16. }, 17. error => { 18. // 请求错误处理 19. return Promise.reject(error); 20. } 21. ); 22. 23. // 响应拦截器 24. instance.interceptors.response.use( 25. response => { 26. // 在这里可以对响应数据进行处理 27. return response.data; 28. }, 29. error => { 30. // 响应错误处理 31. return Promise.reject(error); 32. } 33. ); 34. 35. // 封装get请求 36. export function get(url, params) { 37. return instance.get(url, { 38. params, 39. }); 40. } 41. 42. // 封装post请求 43. export function post(url, data) { 44. return instance.post(url, qs.stringify(data)); 45. }
3.在Vue组件中使用接口：
1. <template> 2. <div> 3. <button @click="getData">获取数据</button> 4. <div v-if="data"> 5. <p>{{ data }}</p> 6. </div> 7. </div> 8. </template> 9. 10. <script> 11. import { get } from './api'; // 替换为你的api.js文件的路径 12. 13. export default { 14. data() { 15. return { 16. data: null, 17. }; 18. }, 19. methods: { 20. async getData() { 21. try { 22. const response = await get('/data'); // 替换为你的后端接口路径 23. this.data = response; 24. } catch (error) { 25. console.error('获取数据失败:', error); 26. } 27. }, 28. }, 29. }; 30. </script>
在上述示例中，我们在api.js文件中封装了get和post请求，并配置了axios的请求拦截器和响应拦截器，以便在请求发送和响应返回时进行统一处理。然后，在Vue组件中，我们通过导入get函数来调用后端接口获取数据。
这样，你就可以在Vue 3项目中使用封装后的axios接口调用，更加方便和灵活地管理和调用后端接口。同时，通过axios的拦截器，你可以在请求和响应时进行一些全局的处理，如添加请求头、统一处理错误等。
