axios-api-gen

English｜繁體中文

This package is generate API from path definition, it is based on axios and it can integrate perfectly with mswx(mock service worker extension).

Install

$ npm i axios-api-gen

Basic usage

define endpoints. (api.ts)

1import { METHOD, generateApi, type Endpoints } from 'axios-api-gen';
2
3const endpoints = {
4	getUsers: '/users',
5	createUser: {
6		method: METHOD.POST,
7		path: '/users'
8	},
9	updateUser: {
10		method: METHOD.PATCH,
11		path: '/users/:id'
12	},
13	deleteUser: '/users/:id'
14};
15
16// type checking is optional.
17const checkEndpoints: Endpoints = endpoints;
18
19export default generateApi(endpoints);

Basic usage:

1import api from './api'
2api.getUsers().then((res) => {
3    console.log(res)
4})

---

Auto-complete

Do not directly assign the type when defining endpoints, as this may cause your IDE unavailable to auto-complete. If you want type-checking, please refer to the above example.

---

generateApi options

The interface is defined as follows.

1interface generateApiOptions {
2  axiosInstance?: AxiosInstance
3  beforeHandler?: () => void
4  afterHandler?: () => void
5}

axiosInstance

You can customize axios instance, e.g.

1import axios from 'axios';
2
3const axiosInstance = axios.create({
4	baseURL: import.meta.env.VITE_API_PREFIX,
5	headers: {
6		'Content-Type': 'application/json'
7	}
8});
9
10// skip endpoint definition
11
12export default generateApi(endpoints, {
13	axiosInstance
14});

beforeHandler

A hook for before request.

1export default generateApi(endpoints, {
2	beforeHandler() {
3		console.log('before');
4	}
5});

afterHandler

A hook for request finished.

1export default generateApi(endpoints, {
2	afterHandler() {
3		console.log('after');
4	}
5});

---

Integrate mswx

mswx is an extension of mock service worker, which is more convenient to use and has middleware features.

example:

1import api from '@/api';
2import { rest } from 'mswx';
3
4export const handlers = [
5	rest.define(api.getUsers, async (req, res, ctx) => {
6		return res(ctx.status(200));
7	})
8];

Why does this work?

Because each API not only can call but also has two properties (method, path), for example:

1console.log(api.getUsers.method); // output: GET
2console.log(api.getUsers.path);   // output: /users