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

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • [安装 Axios](#安装 Axios)
  • [在 Vue3 中使用 Axios](#在 Vue3 中使用 Axios)
  • [在组件中使用 Axios](#在组件中使用 Axios)
  • • 使用方法
  • [使用 Axios 拦截器](#使用 Axios 拦截器)
  • • 全局拦截器
    • 实例拦截器
  • 总结

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);
});

总结

Axios 是一个强大的 HTTP 客户端，可以很容易地在 Vue3 项目中使用。通过使用 Composition API，你可以将 Axios 请求集成到 setup 函数中，使得数据获取逻辑更加清晰和模块化。记得处理好错误，并在需要时使用拦截器来统一处理请求和响应。