Vue常用的UI组件库
记录一些常用的UI组件库
在前端开发中,Axios 是一个非常流行的库,用于发送 HTTP 请求。为了提高代码的可维护性和复用性,对 Axios 进行封装并统一管理 API 接口是一种常见的做法。
首先,确保你的项目中已安装 Axios。如果未安装,可以通过 npm 或 yarn 来安装:
npm install axios
# 或者
yarn add axios
我们在src
目录下utils
目录下创建一个名为 request.js
(或你自定义的文件名)的文件,用于存放封装后的 Axios 实例。这样做的好处是可以统一处理请求和响应的错误、设置基础URL、添加请求头等。
// request.js
import axios from 'axios';
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 根据环境变量设置基础URL
timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么,例如添加Token
// config.headers['Authorization'] = `Bearer ${token}`;
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么
return response.data;
},
(error) => {
// 对响应错误做点什么
console.error('API 请求出错:', error);
// 打印错误信息
return Promise.reject(error);
}
);
export default service;
接下来,在src
目录下创建api
目录,并创建你需要的模块,比如user.js
、article.js
等。来集中管理所有 API 接口。这样可以使得接口调用更加清晰和方便。
// article.js
import request from '@/utils/request';
// 导入上面封装的 axios 实例
// 文章相关API
export function getArticles(params) {
return request({
url: "/articles",
method: "get",
params
});
}
上述使用的示例中用到了 @/utils/request
,这是创建了alias
别名,可以看我的这篇文章 vscode中vue文件路径别名后路径提示
在你的组件中,你可以直接导入这些封装好的API函数来使用它们:
import { getArticles } from '@/api/article';
getArticles({
page: 1,
pageSize: 10
})
.then((res) => {
console.log(res);
// 响应成功后的数据
})
.catch((err) => {
console.error('请求失败:', err);
});
通过这样的封装和管理,你的项目结构会更加清晰,API 调用也会变得更加简洁和统一,便于维护和扩展。