在 Vue 3 中使用 Axios 进行 HTTP 请求是一个常见的任务。Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。以下是一些在 Vue 3 中使用 Axios 的常用操作和示例代码。
安装 Axios
首先，你需要安装 Axios。你可以使用 npm 或 yarn 来安装：
npm install axios基本用法
1. 在组件中引入 Axios
你可以在需要使用 Axios 的组件中直接引入并使用它。
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
const users = ref([]);
const fetchUsers = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
users.value = response.data;
} catch (error) {
console.error('获取用户列表失败:', error);
}
};
onMounted(() => {
fetchUsers();
});
</script>配置 Axios 实例
2. 创建 Axios 实例
你可以创建一个 Axios 实例，并进行一些全局配置，例如设置基础 URL、请求头等。
// src/api/index.ts
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 1000,
headers: { 'Content-Type': 'application/json' }
});
export default instance;然后在组件中使用这个实例：
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import api from '@/api/index';
const users = ref([]);
const fetchUsers = async () => {
try {
const response = await api.get('/users');
users.value = response.data;
} catch (error) {
console.error('获取用户列表失败:', error);
}
};
onMounted(() => {
fetchUsers();
});
</script>请求拦截器和响应拦截器
3. 添加请求拦截器和响应拦截器
你可以添加请求拦截器和响应拦截器来处理请求和响应。
// src/api/index.ts
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 1000,
headers: { 'Content-Type': 'application/json' }
});
// 请求拦截器 请求头添加token
request.interceptors.request.use(
(config) => {
const userStore = useUserStore();
const token = userStore.token
if (token) {
config.headers.Authorization = `${token}`
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器 返回自定义格式
request.interceptors.response.use(
(response) => {
if (response.data.code === 0) {
return response.data;
}
ElMessage.error(response.data.message || "服务异常")
return Promise.reject(response.data);
},
(error) => {
ElMessage.error(error.response.data.message || "服务异常")
return Promise.reject(error);
}
);
export default instance;常用请求方法
4. GET 请求
const fetchUsers = async () => {
try {
const response = await api.get('/users');
console.log(response.data);
} catch (error) {
console.error('获取用户列表失败:', error);
}
};5. POST 请求
const createUser = async (userData) => {
try {
const response = await api.post('/users', userData);
console.log('用户创建成功:', response.data);
} catch (error) {
console.error('用户创建失败:', error);
}
};6. PUT 请求
const updateUser = async (userId, userData) => {
try {
const response = await api.put(`/users/${userId}`, userData);
console.log('用户更新成功:', response.data);
} catch (error) {
console.error('用户更新失败:', error);
}
};7. DELETE 请求
const deleteUser = async (userId) => {
try {
const response = await api.delete(`/users/${userId}`);
console.log('用户删除成功:', response.data);
} catch (error) {
console.error('用户删除失败:', error);
}
};传参
在使用 Axios 进行 HTTP 请求时，传递参数是一个常见的需求。Axios 支持多种方式传递参数，包括 URL 查询参数、请求体参数、路径参数等。以下是详细的示例和说明，帮助你在 Vue 3 项目中正确使用 Axios 传递参数。
1. URL 查询参数 (Query Parameters)
URL 查询参数通常用于 GET 请求，通过 URL 的查询字符串传递参数。
注意:需要把参数id包裹在对象里 { params: { id } },否则会导致 Axios 将整个 id 作为对象的一个属性传递，而不是直接作为查询参数
示例
// 使用 axios.get 传递查询参数
export const articleDeleteCategoryServer = (id: number) => {
return request.delete('/my/cate/del', { params: { id } })
}2. 请求体参数 (Request Body)
请求体参数通常用于 POST 和 PUT 请求，通过请求体传递参数。
示例
// 使用 axios.post 传递请求体参数
const createUser = async (userData) => {
try {
const response = await api.post('/users', userData);
console.log('用户创建成功:', response.data);
} catch (error) {
console.error('用户创建失败:', error);
}
};
// 使用 axios.put 传递请求体参数
const updateUser = async (userId, userData) => {
try {
const response = await api.put(`/users/${userId}`, userData);
console.log('用户更新成功:', response.data);
} catch (error) {
console.error('用户更新失败:', error);
}
};3. 路径参数 (Path Parameters)
路径参数通常用于 GET、PUT 和 DELETE 请求，通过 URL 路径传递参数。
示例
// 使用 axios.get 传递路径参数
const fetchUserById = async (userId) => {
try {
const response = await api.get(`/users/${userId}`);
console.log(response.data);
} catch (error) {
console.error('获取用户失败:', error);
}
};
// 使用 axios.put 传递路径参数
const updateUser = async (userId, userData) => {
try {
const response = await api.put(`/users/${userId}`, userData);
console.log('用户更新成功:', response.data);
} catch (error) {
console.error('用户更新失败:', error);
}
};
// 使用 axios.delete 传递路径参数
const deleteUser = async (userId) => {
try {
const response = await api.delete(`/users/${userId}`);
console.log('用户删除成功:', response.data);
} catch (error) {
console.error('用户删除失败:', error);
}
};4. 请求头参数 (Headers)
请求头参数用于传递一些元数据，例如认证信息、内容类型等。
示例
// 在 axios 实例中设置全局请求头
const instance = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 1000,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
}
});
// 或者在单个请求中设置请求头
const fetchUsers = async () => {
try {
const headers = {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
};
const response = await api.get('/users', { headers });
console.log(response.data);
} catch (error) {
console.error('获取用户列表失败:', error);
}
};5. 示例组件
以下是一个完整的示例组件，展示了如何在 Vue 3 中使用 Axios 传递不同类型的参数。
<template>
<div>
<h1>用户管理</h1>
<h2>用户列表</h2>
<el-form :model="queryParams" style="padding-right: 30px;">
<el-form-item label="页码:" label-width="80px">
<el-input v-model="queryParams.page" placeholder="输入页码" />
</el-form-item>
<el-form-item label="每页数量:" label-width="80px">
<el-input v-model="queryParams.limit" placeholder="输入每页数量" />
</el-form-item>
</el-form>
<el-button type="primary" @click="fetchUsers">获取用户</el-button>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
<button @click="editUser(user)">编辑</button>
<button @click="deleteUser(user.id)">删除</button>
</li>
</ul>
<h2>添加用户</h2>
<el-form :model="newUser" style="padding-right: 30px;">
<el-form-item label="姓名:" label-width="80px">
<el-input v-model="newUser.name" placeholder="输入姓名" />
</el-form-item>
<el-form-item label="邮箱:" label-width="80px">
<el-input v-model="newUser.email" placeholder="输入邮箱" />
</el-form-item>
</el-form>
<el-button type="primary" @click="createUser">添加用户</el-button>
<h2 v-if="editingUser">编辑用户</h2>
<el-form v-if="editingUser" :model="editingUser" style="padding-right: 30px;">
<el-form-item label="姓名:" label-width="80px">
<el-input v-model="editingUser.name" placeholder="输入姓名" />
</el-form-item>
<el-form-item label="邮箱:" label-width="80px">
<el-input v-model="editingUser.email" placeholder="输入邮箱" />
</el-form-item>
</el-form>
<el-button v-if="editingUser" type="primary" @click="updateUser">更新用户</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import api from '@/api/index';
const users = ref([]);
const queryParams = ref({ page: 1, limit: 10 });
const newUser = ref({ name: '', email: '' });
const editingUser = ref(null);
const fetchUsers = async () => {
try {
const response = await api.get('/users', { params: queryParams.value });
users.value = response.data;
} catch (error) {
console.error('获取用户列表失败:', error);
}
};
const createUser = async () => {
try {
const response = await api.post('/users', newUser.value);
users.value.push(response.data);
newUser.value = { name: '', email: '' };
} catch (error) {
console.error('用户创建失败:', error);
}
};
const editUser = (user) => {
editingUser.value = { ...user };
};
const updateUser = async () => {
try {
const response = await api.put(`/users/${editingUser.value.id}`, editingUser.value);
const index = users.value.findIndex(u => u.id === editingUser.value.id);
if (index !== -1) {
users.value[index] = response.data;
}
editingUser.value = null;
} catch (error) {
console.error('用户更新失败:', error);
}
};
const deleteUser = async (userId) => {
try {
await api.delete(`/users/${userId}`);
users.value = users.value.filter(user => user.id !== userId);
} catch (error) {
console.error('用户删除失败:', error);
}
};
onMounted(() => {
fetchUsers();
});
</script>解释
URL 查询参数：
queryParams对象用于存储查询参数。fetchUsers方法通过params选项传递查询参数。
请求体参数：
newUser对象用于存储新用户的表单数据。createUser方法通过请求体传递newUser数据。editingUser对象用于存储正在编辑的用户数据。updateUser方法通过请求体传递editingUser数据。
路径参数：
editUser方法设置要编辑的用户。updateUser方法通过路径参数传递用户 ID。deleteUser方法通过路径参数传递用户 ID。
模板：
- 显示用户列表，并提供编辑和删除按钮。
- 提供添加用户的表单。
- 提供编辑用户的表单（如果
editingUser不为空）。
通过这些示例，你可以在 Vue 3 项目中灵活地使用 Axios 传递不同类型的参数，以满足各种 HTTP 请求的需求。
