Vue中使用 Axios 的常见方式
1. 安装 Axios通过 npm 安装 Axios：
npm install axios
2. 在vue组件中使用 Axios
<template>
<div>
<h1>项目列表</h1>
<ul>
<li v-for="project in projects" :key = "priject.id">{{project.name}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
projects: [];
};
},
mounted(){
this.fetchProjects();
},
medthods(){
async fetchProjects() {
try {
const response = await axios.get('http://127.0.0.1:8000/api/projects/');
this.projects = response.data; // 将返回的数据存储到 `projects ` 中
} catch (error) {
console.error('Error fetching projects:', error);
}
},
},
};
</script>
[*]mounted(): 当组件加载时，mounted() 生命周期钩子会自动实行 fetchProjects 方法，发送请求获取数据。
[*]Axios 请求：axios.get() 发送 GET 请求，获取数据并更新 Vue 组件中的 projects 数据。
3. 全局设置 Axios
[*]假如你盼望在整个应用中都使用相同的 Axios 设置（比方 API 基础 URL、请求头等），你可以在 main.js 中进行全局设置。
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
// 设置 Axios 默认基础 URL
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';// 设置全局 Authorization 头
const app = createApp(App);
app.config.globalProperties.$axios = axios;// 将 Axios 注册为全局属性
app.mount('#app');
[*]以在任何组件中通过 this.$axios 直接访问 Axios。
4.使用全局 Axios
<template>
<div>
<h1>项目列表</h1>
<ul>
<li v-for="project in projects" :key="project.id">{{ project.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
projects: [],
};
},
mounted() {
this.fetchProjects();
},
methods: {
async fetchProjects() {
try {
const response = await this.$axios.get('projects/');
this.projects = response.data;// 将返回的数据存储到 `projects` 中
} catch (error) {
console.error('Error fetching projects:', error);
}
},
},
};
</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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]