axios.js 文件 vue3 形式

在 Vue3 项目中引入和使用 `axios.js` 进行 HTTP 请求，可以按照以下步骤进行操作： ### 创建 Axios 实例 首先，在项目中创建一个专门用于配置 axios 的文件，例如 `axios.js` 或 `http.js`。在这个文件中，可以设置基础 URL、请求超时时间等全局配置，并且可以添加请求和响应拦截器。 ```javascript // src/utils/axios.js import axios from 'axios'; const http = axios.create({ // 设置API的基础URL baseURL: 'https://api.example.com', // 请求超时时间 timeout: 5000, }); // 添加请求拦截器 http.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 http.interceptors.response.use( function (response) { // 对响应数据做点什么 return response.data; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } ); export default http; ``` ### 引入并挂载 Axios 到 Vue 原型 接下来，在 Vue3 的入口文件（如 `main.js`）中引入刚刚创建的 axios 实例，并将其挂载到 Vue 应用实例上，以便在整个应用中的组件都能访问到它。 ```javascript // src/main.js import { createApp } from 'vue'; import App from './App.vue'; import http from './utils/axios'; // 导入自定义的axios实例 const app = createApp(App); app.config.globalProperties.$http = http; // 挂载到Vue原型 app.mount('#app'); ``` ### 在组件中使用 Axios 现在可以在任何 Vue 组件中通过 `this.$http` 来调用 axios 方法发起 HTTP 请求了。 ```vue <template> <div> <button @click="fetchData">获取数据</button> </div> </template> <script> export default { methods: { async fetchData() { try { const response = await this.$http.get('/some-endpoint'); console.log(response); } catch (error) { console.error('Error fetching data:', error); } } } } </script> ``` 以上就是在 Vue3 项目中引入和使用 axios.js 进行 HTTP 请求的基本步骤。这种方式不仅使得代码结构更加清晰，而且还能利用 axios 提供的强大功能如拦截器、自动转换 JSON 数据等特性[^4]。