首页axios在vue3封装

axios在vue3封装

时间: 2024-10-28 16:04:16 浏览: 50

Axios是一个流行的JavaScript库，用于处理HTTP请求。在Vue 3中，我们可以将其封装成一个更易于使用的自定义模块，以便在项目中方便地发送网络请求。以下是基本的封装步骤： 1. 安装axios：首先需要通过npm安装axios： ``` npm install axios ``` 2. 创建封装文件：创建一个名为`axios.js`的文件，例如在`src/api`目录下： ```javascript // src/api/axios.js import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // API地址配置 timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('token') // 如果有权限验证 } }); export default { get: (url, params) => instance.get(url, { params }), post: (url, data) => instance.post(url, data), put: (url, data) => instance.put(url, data), delete: (url, data) => instance.delete(url, data) }; ``` 3. 使用封装后的axios：在组件中导入并使用封装好的API方法： ```javascript // src/components/YourComponent.vue import axios from '@/api/axios'; methods: { fetchData() { axios.get('/users') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } ``` 4. 配置环境变量：确保在开发和生产环境中设置了正确的API基础URL。

阅读全文