1. Vue3 封装 aixos 并且 使用 aixos 请求数据
npm install axios
# 或者
yarn add axios
2. Vue3 封装 aixos 并且 使用 aixos 请求数据
封装 axios
可以帮助我们更好地管理 HTTP 请求,例如添加统一的基础URL、请求头、拦截器等功能。
下面是封装 axios
的一个示例,以及如何在 Vite 项目中使用它来请求数据。
1.1. 创建 Axios 实例
首先,创建一个新的 JavaScript 文件,比如 http.js
或 axiosInstance.js
,并在其中配置 Axios 实例:
// 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 实例:
// 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 请求代码,并且可以根据需要轻松地添加额外的功能,如身份验证和错误处理。