首页vue axios与后端的数据交互

vue axios与后端的数据交互

时间: 2025-02-02 21:09:51 浏览: 36

### Vue 使用 Axios 进行前后端数据交互 #### 方法一：定义全局方法并调用为了简化开发流程，可以在项目的`utils/request.js`文件中创建一个通用的HTTP请求工具类[^2]。 ```javascript // utils/request.js import axios from 'axios' export function getList() { return axios.get('http://localhost:8080/api/data'); } ``` 在组件内部可以通过引入此函数来发起网络请求： ```javascript <script> import {getList} from '@/utils/request'; export default { data() { return { dataList: [] } }, methods: { fetchData() { getList().then(response => { this.dataList = response.data; }).catch(error => { console.error("There was an error fetching the data!", error); }); } }, mounted() { this.fetchData(); } }; </script> ``` #### 方法二：直接在组件内集成Axios实例如果不想额外配置公共API接口，则可以直接在单个Vue组件里边导入和使用axios库[^3]。 ```html <template> <div class="example">  </div> </template> <script> import axios from "axios"; export default { name: "ExampleComponent", data() { return { responseData: null, }; }, created() { this.test(); }, methods: { test() { this.axios.get("/api/user/test").then((res) => { console.log(res.data); // 处理返回的数据 }); }, }, }; </script> ``` 上述两种方式都可以实现前端向后端发送GET请求的功能。第一种更适合大型应用，有助于维护统一的API管理；第二种则更加灵活便捷适用于小型项目或快速原型设计。

阅读全文