kaka-api-service
v1.1.8
Published
When developing B-end management system projects, facing the table data operations and form add, delete, modify, and query functions of numerous pages, we can adopt the following strategies to design a unified data management tool class to improve the fle
Downloads
62
Readme
Kaka API Service 灵活和高效的前端数据管理工具
kaka-api-service
是一个用于管理和调用不同页面 API 接口的工具类库。它提供了一个统一的方式来处理数据的增删改查操作,并支持批量请求、缓存管理、错误处理等功能。
安装
使用 npm 安装:
npm install kaka-api-service
或使用 yarn 安装:
yarn add kaka-api-service
快速开始
1. 注册 API
首先,在项目中引入 kaka-api-service
并注册页面的 API。假设你有一个登录页面和一个用户信息页面:
import API_Service from 'kaka-api-service';
import request from './path/to/axios/request';
// 注册登录API
API_Service.registerApi('login', {
fetch: (data) => request.post('/users/login', data),
});
// 你也可以使用 fetch 方法注册多个请求
API_Service.registerApi('login', {
fetch: {
default:(data) => request.post('/users/loginDefault', data),
login:(data) => request.post('/users/login', data),
},
});
// 注册用户信息API
API_Service.registerApi('userProfile', {
fetch: (data) => request.get('/users/profile', { params: data }),
});
2. 发起单个请求
你可以通过 fetch
方法发起请求,获取某个页面的数据:
const loginClickHandle = async () => {
try {
const result = await API_Service.fetch('login', { userName: 'Zhao SiYuan', userPwd: '0415' });
console.log('Login Result:', result);
} catch (error) {
console.error('Login failed:', error);
}
};
如果使用 fetch 方法注册多个请求,可以按一下方法使用:
const loginClickHandle = async () => {
try {
// 增加第三个参数,值为注册请求时的key值,如果不填,默认为default
const result = await API_Service.fetch('login', { userName: 'Zhao SiYuan', userPwd: '0415' },'login');
console.log('Login Result:', result);
} catch (error) {
console.error('Login failed:', error);
}
};
3. 批量请求数据
如果需要在一个页面内同时获取多个数据源的数据,可以使用 fetchMultiple
方法:
const fetchMultipleDataExample = async () => {
const requests = [
{ pageName: 'login', params: { userName: 'Zhao SiYuan', userPwd: '0415' } ,'login'},
{ pageName: 'login', params: { userId: 123 } },
];
try {
const [loginData, profileData] = await API_Service.fetchMultiple(requests);
console.log('Login Data:', loginData);
console.log('Profile Data:', profileData);
} catch (error) {
console.error('Error fetching data:', error);
}
};
4. 并发控制的批量请求
如果需要控制并发请求的数量,可以使用 fetchWithConcurrencyControl
方法:
const fetchWithLimitedConcurrency = async () => {
const requests = [
{ pageName: 'login', params: { userName: 'Zhao SiYuan', userPwd: '0415' } },
{ pageName: 'userProfile', params: { userId: 123 } },
// 其他请求...
];
try {
const results = await API_Service.fetchWithConcurrencyControl(requests, 2); // 并发限制为2
console.log('Results:', results);
} catch (error) {
console.error('Error fetching data:', error);
}
};
5. 添加缓存支持 (TODO)
如果你希望缓存某些页面的数据,可以在 fetch
中启用缓存,并设置缓存的失效时间(默认 60 秒):
const fetchWithCache = async () => {
const result = await API_Service.fetch('userProfile', { userId: 123 }, true, 60000);
console.log('Cached Profile Data:', result);
};
6. 其他操作
kaka-api-service
还提供了其他常见的 API 操作,如创建、更新、删除和导出数据:
// 创建数据
await API_Service.create('userProfile', { name: 'New User', age: 25 });
// 更新数据
await API_Service.update('userProfile', 123, { name: 'Updated User' });
// 删除数据
await API_Service.delete('userProfile', 123);
// 导出数据
await API_Service.export('userProfile', { filter: 'active' });
贡献
欢迎为 kaka-api-service
做出贡献,请通过提交 Pull Request 或者 Issue 与我们联系。
许可协议
此项目遵循 MIT 协议。