🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。在 Vue3 项目中，你可以使用 Axios 来发送 HTTP 请求。
安装 Axios
首先，你需要安装 Axios：
bash
npm install axios或者使用 yarn：
bash
yarn add axios在 Vue3 中使用 Axios
你可以在 Vue3 的 setup 函数中使用 Axios 发送请求。以下是一个基本的例子：
javascript
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 生命周期钩子中调用它来在组件加载时获取数据。
使用方法
html
<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 允许你设置请求和响应拦截器，这可以在全局或实例级别进行。
全局拦截器
javascript
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});实例拦截器
javascript
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);
});总结
Axios 是一个强大的 HTTP 客户端，可以很容易地在 Vue3 项目中使用。通过使用 Composition API，你可以将 Axios 请求集成到 setup 函数中，使得数据获取逻辑更加清晰和模块化。记得处理好错误，并在需要时使用拦截器来统一处理请求和响应。