/ _` | '_ \| |_____| |_ / _` |/ __| __/ _ \| '__| | | |
| (_| | |_) | |_____| _| (_| | (__| || (_) | | | |_| |
\__,_| .__/|_| |_| \__,_|\___|\__\___/|_| \__, |
|_| |___/
-- Make your http client api of modern frontend project easier to manage,maintain and extensible.
Install
npm i @jfbeatit/api-factory
Usage
-
mkdir in your project root,
mkdir api/definition -p
-
and then
touch api/definition/index.ts
with the following code:
import { defineApiConfig } from "@jfbeatit/api-factory";
export default defineApiConfig({
// the base url of your api
baseUrl: "/",
// `adapter` means the request api you want to use, default is `fetch`
adapter: "fetch",
// set http headers here
setHeaders: () => {
return { Authorization: "Bearer token" };
},
// the callback of the response
beforeResponse: ({ status }) => {
console.log(status);
},
apiList: {
// just an example, you can define all the api you need here
common: {
upload: { path: '/api/upload', method: 'POST', contentType: 'form' // default is `json` },
},
user: {
query: { path: "/api/users", method: "GET" },
create: { path: "/api/users", method: "POST" },
update: { path: "/api/users/{id}", method: "PUT" },
destroy: { path: "/api/users/{id}", method: "DELETE" },
},
// ... any other api you need
},
});
- for TypeScript support,
touch api/api-factory.d.ts
with the following code:
import { type ApiMapped } from "@jfbeatit/api-factory";
declare module "@jfbeatit/api-factory" {
export function apiFactory<
R = { code: number; msg: string; data: Array<Record<string, unknown>> },
T = typeof import("./definition/index.ts")
>(loadConfig: Promise<T>): ApiMapped<T["default"]["apiList"], R>;
}
- now, you can
touch api/index.ts
and define a helper function like this:
import { apiFactory } from "@jfbeatit/api-factory";
export function useApi<T = Array<Record<string, unknown>>>() {
return apiFactory<{ code: number; msg: string; data: T>(import("./api/definition/index.ts"));
}
- finally, just simply use it like this:
import { useApi } from "/api";
interface User {
id: number;
name: string;
age: number;
//...
}
async function uploadFile(e) {
const file = e.target.files[0];
const res = await useApi().common.upload({ file });
console.info(res);
}
async function fetchUsers() {
const res = await useApi<Array<User>>().user.query();
console.info(res);
}
// or
async function createUser() {
const res = await useApi<User>().user.create({ name: "test1" });
console.info(res);
}
// or
async function updateUser() {
const res = await useApi<User>().user.update({ id: 1, name: "test2" });
console.info(res);
}
// or
async function destroyUser() {
const res = await useApi().user.destroy({ id: 1 });
console.info(res);
}
License
MIT