1. Vue3 封装 aixos 并且 使用 aixos 请求数据
bash
npm install axios
# 或者
yarn add axios
2. Vue3 封装 aixos 并且 使用 aixos 请求数据
封装 axios
可以帮助我们更好地管理 HTTP 请求,例如添加统一的基础URL 、请求头 、拦截器等功能。
下面是封装 axios
的一个示例,以及如何在 Vite 项目中使用它来请求数据。
1.1. 创建 Axios 实例
首先,创建一个新的 JavaScript 文件,比如 http.js
或 axiosInstance.js
,并在其中配置 Axios 实例:
javascript
// src/http.js
import axios from 'axios';
// 创建一个新的 axios 实例
const service = axios.create({
baseURL: 'https://api.example.com', // 设置基础 URL
timeout: 5000, // 设置超时时间
headers: { 'Content-Type': 'application/json' } //设置默认的Content-Type
});
// 添加请求拦截器
service.interceptors.request.use(
config => {
// 在这里可以设置请求头、请求参数等return config
// 例如添加 token 到请求头
const token = localStorage.getItem('token'); // 示例:从本地存储获取 token
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
console.log(error)
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
// return response.data; // 返回实际的数据而不是整个响应对象
// 在这里处理返回数据
const { data } = response
if (data.code !== 200) {
// 对响应code做点什么
if (data.code === 401) {
// 处理未授权的情况
// 可能需要重定向到登录页面或者其他操作
}
console.error('Error:', data.message)
return Promise.reject(newError(data.message || 'Error'))
} else {
return data
}
},
error => {
console.log(error)
return Promise.reject(error);
}
);
export const get = (url, params) => {
return service.get(url, { params });
};
export const post = (url, data) => {
return service.post(url, data);
};
export const put = (url, data) => {
return service.put(url, data);
};
export const delete= (url, data) => {
return service.delete(url, data);
};
export default service;
1.2. 使用封装后的 Axios
接下来,在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例:
javascript
// src/views/MyComponent.vue
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<pre>{{ data }}</pre>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import service from '@/http'; // 引入封装好的 axios 实例
const data = ref('');
async function fetchData() {
try {
const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点
data.value = response;
} catch (error) {
console.error("Failed to fetch data:", error);
}
}
</script>
在这个例子中,我们在 MyComponent.vue
中定义了一个按钮,点击后会触发 fetchData
方法,该方法通过封装好的 Axios 实例发起请求,并将返回的数据展示出来。
1.3. 注意事项
-
确保在 Vue 项目中正确配置了路径别名或相对路径,以便正确导入封装好的 Axios 实例。
vue3使用vite设置 @ 路径别名指向src 目录_vue项目设置src别名 vite-CSDN博客 -
根据实际的需求调整 Axios 的配置和拦截器逻辑。
-
如果你在生产环境中遇到跨域问题,请确保服务器设置了正确的 CORS 头。
通过这种方式,你可以方便地管理和复用 HTTP 请求代码,并且可以根据需要轻松地添加额外的功能,如身份验证和错误处理。