Vue中使用 Axios 的常见方式

1. 安装 Axios

通过 npm 安装 Axios：

1. npm install axios

复制代码

2. 在vue组件中使用 Axios

1. <template>
2.         <div>
3.                 <h1>项目列表</h1>
4.                 <ul>
5.                         <li v-for="project in projects" :key = "priject.id">{{project.name}}</li>
6.                 </ul>
7.         </div>
8. </template>
10. <script>
11. import axios from 'axios';
13. export default {
14.         data() {
15.                 return {
16.                         projects: [];
17.                 };
18.         },
19.         mounted(){
20.                 this.fetchProjects();
21.         },
22.         medthods(){
23.                 async fetchProjects() {
24.                         try {
25.                                 const response = await axios.get('http://127.0.0.1:8000/api/projects/');
26.                                 this.projects = response.data; // 将返回的数据存储到 `projects ` 中
27.                         } catch (error) {
28.                                 console.error('Error fetching projects:', error);
29.                         }
30.                 },
31.         },
32. };
33. </script>

复制代码

• mounted(): 当组件加载时，mounted() 生命周期钩子会自动实行 fetchProjects 方法，发送请求获取数据。
  
• Axios 请求：axios.get() 发送 GET 请求，获取数据并更新 Vue 组件中的 projects 数据。
  

3. 全局设置 Axios

• 假如你盼望在整个应用中都使用相同的 Axios 设置（比方 API 基础 URL、请求头等），你可以在 main.js 中进行全局设置。
  

1. import { createApp } from 'vue';
2. import App from './App.vue';
3. import axios from 'axios';
5. // 设置 Axios 默认基础 URL
6. axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
7. axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';  // 设置全局 Authorization 头
9. const app = createApp(App);
10. app.config.globalProperties.$axios = axios;  // 将 Axios 注册为全局属性
11. app.mount('#app');

复制代码

• 以在任何组件中通过 this.$axios 直接访问 Axios。
  

4.使用全局 Axios

1. <template>
2.   <div>
3.     <h1>项目列表</h1>
4.     <ul>
5.       <li v-for="project in projects" :key="project.id">{{ project.name }}</li>
6.     </ul>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       projects: [],
15.     };
16.   },
17.   mounted() {
18.     this.fetchProjects();
19.   },
20.   methods: {
21.     async fetchProjects() {
22.       try {
23.         const response = await this.$axios.get('projects/');
24.         this.projects = response.data;  // 将返回的数据存储到 `projects` 中
25.       } catch (error) {
26.         console.error('Error fetching projects:', error);
27.       }
28.     },
29.   },
30. };
31. </script>

复制代码

• 全局设置 Axios：在 main.js 中，app.config.globalProperties.$axios = axios 将 Axios 注册为全局属性，如许每个组件都能访问到它。
  
• 组件使用 Axios：在组件中，替换掉原来的 import axios from 'axios'，并使用 this.$axios 进行 HTTP 请求。如许，所有的 Axios 请求都可以直接通过 this.$axios 来发送。
  
• Vue 3 的任何组件中方便地使用 Axios，而无需每次都 import axios
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。