axios封装 vue3
时间: 2024-07-19 17:01:08 浏览: 96
axios 是一款流行的 JavaScript 库,用于浏览器和 Node.js 环境中的 HTTP 请求。在 Vue 3 中,它常被用于处理 API 调用,简化数据交互。为了更好地管理和复用 axios,可以对其进行封装,以便在整个项目中统一使用。
以下是一个简单的 Axios 封装示例:
```javascript
// 创建一个 Vue.prototype 的属性 axios
import axios from 'axios';
Vue.prototype.$http = {
install(Vue) {
Vue.prototype.$axios = axios.create({
// 设置默认配置,如 base URL、请求头等
baseURL: process.env.BASE_URL,
headers: { 'Content-Type': 'application/json' },
timeout: 5000, // 超时时间
withCredentials: true, // 是否发送 cookie
});
// 拦截器设置:发送前和发送后
axios.interceptors.request.use((config) => {
// 添加全局的请求拦截器
return config;
}, (error) => {
// 发送错误处理
console.error('请求失败', error);
Promise.reject(error);
});
axios.interceptors.response.use((response) => {
// 处理成功响应
return response.data;
}, (error) => {
// 处理错误响应
console.error('请求错误', error.message);
if (error.response.status) {
switch (error.response.status) {
case 401:
// 处理未授权
break;
default:
// 其他错误处理
break;
}
} else {
// 如果没有状态码,可能是网络问题
console.error('未知错误', error.message);
}
return Promise.reject(error);
});
},
};
```
要在组件中使用封装的 axios,只需注入 `$http` 或者 `$axios`,例如:
```html
<template>
<div>
<button @click="fetchData">获取数据</button>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { $http } from '@/common/api';
async function fetchData() {
try {
const response = await $http.get('/api/data');
console.log(response);
} catch (error) {
console.error(error);
}
}
</script>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)