To create instances of axios with common config、token and interceptors. we also give out a default status validator and code validator. but a more intuitive ui component to notify errors is strongly recommanded.
The default notification while got http error and some other error message from server is console.log
, you should customize your own notification first.
import { Notify } from "axios-class";
import { notification } from "ant-design-vue";
// use your own way of notify errors,
// obviously, this is a global setting.
const notifyError = (message: string, duration: number) =>
notification.error({ message, duration, description: "" });
Notify.init({ error: notifyError });
Our application usually have multiple axios instances. Rather than multi-configs, multi-instances has a more semantic expression. You should create new axios instances when different base url, configs or inteceptors are needed.
import { Http } from "axios-class";
// create your axios instances
const baseURL = "http://api.xxx.net";
export const baseHttp = new Http(baseURL);
const ssoURL = "http://sso.xxx.net";
export const ssoHttp = new Http(ssoURL);
// we can use ssoHttp to do some login/authorize stuffs,
// then get datas with baseHttp mostly.
Use 'get' | 'post' | 'put' | 'patch' | 'delete' | 'head' | 'options'
functions to make http request, just like you are using axios functions with typescript supported.
- default types declared in http.d.ts
// the default response wrapper
export declare interface ResponseWrapper<T> {
code: number;
data?: T;
msg?: string;
}
// default data declaration for paginated response
export declare interface Paginated<T> {
current: number;
pageSize: number;
total: number;
items?: T[];
}
// default query params declaration for paginated query
export declare type PaginatedQuery = {
current: number;
pageSize: number;
sorter?: Sorter;
};
export declare type Sorter = {
[key: string]: "asc" | "desc";
};
- the demo model
export interface ICategory {
id: number;
title: string;
description?: string;
parent_id?: number;
created_at?: number;
}
- create http instance
// http.ts
import { Http } from "axios-class";
// create http instances
const baseURL = "http://api.xxx.net";
export const http = new Http(baseURL);
- your fetch api
// category.api.ts
import { http } from "./http";
/**
* get paginated list of category
* @param {Partial<ICategory> & PaginatedQuery} params fetch params
* @returns the paginated list
*/
export const getCategoryList = (params: Partial<ICategory> & PaginatedQuery) =>
http.get<Paginated<ICategory>>("/api/categories", { params });
/**
* add new category
* @param {*} params
* @returns the newly created entity
*/
export const addCategory = (params: Partial<ICategory>) =>
http.post("/api/categories", params);
/**
* update an existed category
* @param {Partial<ICategory>} params the entity to update
* @returns the updated entity
*/
export const updateCategory = (params: Partial<ICategory>) =>
http.put(`/api/categories/${params.id}`, params);
/**
* delete category with the given id
* @param {number} id
* @returns 1 if deleted
*/
export const deleteCategory = (id: number) =>
http.delete(`/api/categories/${id}`);
- use the apis
import { getCategoryList, addCategory, updateCategory, deleteCategory } from '@/service/category.api.ts';
const queryParams = { pageSize: 12, current: 1 };
const { code, data, msg } = await getCategoryList(queryParams);
console.log(data instanceof Paginated<ICategory>); // output: true
const toAdd = { title: 'new category', description: 'test add category' };
const { code, data, msg } = await addCategory(toAdd);
console.log('created category : ', JSON.stringify(data));
// output: { id: 1001, title: 'new category', description: 'test add category' }
const toUpdate = { id: 1001, title: 'update category', description: 'test update category' };
const { code, data, msg } = await updateCategory(toUpdate);
console.log('update category : ', JSON.stringify(data);
// output: { id: 1001, title: 'update category', description: 'test update category' }
const { code, data, msg } = await deleteCategory(1001);
console.log('delete category : ', data > 0);
// output: delete category : true