当前位置：首页 > news >正文

Axios 在 Vue3 项目中的使用：从安装到组件中的使用

news 2025/6/22 13:33:27

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。在 Vue3 项目中，你可以使用 Axios 来发送 HTTP 请求。

安装 Axios

首先，你需要安装 Axios：

npm install axios

或者使用 yarn：

yarn add axios

在 Vue3 中使用 Axios

你可以在 Vue3 的 setup 函数中使用 Axios 发送请求。以下是一个基本的例子：

import { ref } from 'vue';
import axios from 'axios';export default {
setup() {
const responseData = ref(null);
const error = ref(null);const fetchData = async () => {
try {
const result = await axios.get('https://api.example.com/data');
responseData.value = result.data;
} catch (err) {
error.value = err;
}
};// 调用 fetchData 函数来获取数据
fetchData();return {
responseData,
error
};
}
};

在组件中使用 Axios

你可以在组件的方法中使用 Axios，或者在 onMounted 生命周期钩子中调用它来在组件加载时获取数据。

使用方法

<template>
<div v-if="error">An error occurred: {{ error.message }}</div>
<div v-else-if="responseData">
<!-- 渲染响应数据 -->
</div>
</template><script>
import { ref, onMounted } from 'vue';
import axios from 'axios';export default {
setup() {
const responseData = ref(null);
const error = ref(null);const fetchData = async () => {
try {
const result = await axios.get('https://api.example.com/data');
responseData.value = result.data;
} catch (err) {
error.value = err;
}
};onMounted(() => {
fetchData();
});return {
responseData,
error
};
}
};
</script>

使用 Axios 拦截器

Axios 允许你设置请求和响应拦截器，这可以在全局或实例级别进行。

全局拦截器

axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});

实例拦截器

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});