seasun-request

基于 axios 二次封装的网络请求库，提供更简洁的API和额外的功能增强。

特性

• 基于 axios 封装，提供更简洁的API
• 支持请求/响应拦截器
• 支持全局加载状态管理
• 支持请求成功/失败通知
• 支持装饰器语法，简化API调用
• 支持URL路径参数
• 支持类级别的基础URL配置
• 支持TypeScript，提供完整类型定义

安装

npm install axios seasun-request --save

配置

配置 tsconfig.json，确保启用对装饰器支持。

{
  "compilerOptions": {
    // 其他配置
    ...
    // 启用装饰器
    "experimentalDecorators": true
  }
}

基础使用

直接使用HttpClient实例

import { httpClient } from 'seasun-request';

// GET请求
httpClient.get('/api/users').then(res => {
  console.log(res);
});

// POST请求
httpClient.post('/api/users', { name: 'test' }).then(res => {
  console.log(res);
});

// 带配置的请求
httpClient.request({
  url: '/api/users',
  method: 'get',
  loading: true,           // 显示加载状态
  successNotice: true,     // 成功时显示通知
  errorNotice: true,       // 失败时显示通知
  debug: true,             // 开启调试日志
  getResponse: false       // 是否返回完整响应对象
}).then(res => {
  console.log(res);
});

使用装饰器

import { Get, Post, Put, Delete, BaseUrl } from 'seasun-request';

@BaseUrl('/api/v1')  // 为类中所有请求方法添加基础URL前缀
class UserService {
  @Get('/users')  // 最终请求URL为: /api/v1/users
  static async getUsers() {
    // 返回值会作为请求参数
    return { page: 1, size: 10 };
  }

  @Post('/users')  // 最终请求URL为: /api/v1/users
  static async createUser(data: any) {
    // 返回值会作为请求体
    return data;
  }

  @Put('/users/:id')  // 最终请求URL为: /api/v1/users/:id
  static async updateUser(id: number, data: any) {
    // 函数参数顺序要与URL参数顺序一致
    // 最后一个参数为请求数据
    return data;
  }

  @Delete('/users/:id')  // 最终请求URL为: /api/v1/users/:id
  static async deleteUser(id: number) {
    // 无需返回值的情况
    return {};
  }
}

// 调用方式
UserService.getUsers().then(res => console.log(res));
UserService.createUser({ name: 'test' }).then(res => console.log(res));
UserService.updateUser(1, { name: 'updated' }).then(res => console.log(res));
UserService.deleteUser(1).then(res => console.log(res));

高级配置

自定义HttpClient实例

import { HttpClient } from 'seasun-request';

const customClient = new HttpClient({
  baseURL: 'https://api.example.com',
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 设置成功状态码
customClient.setSuccessCode(200);

// 添加请求拦截器
customClient.addRequestInterceptor(
  config => {
    // 在请求发送前做一些处理
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
customClient.addResponseInterceptor(
  response => {
    // 处理响应数据
    return response;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

API参考

HttpClient 类

| 方法 | 描述 | | --- | --- | | constructor(customConfig?: AxiosRequestConfig) | 创建HttpClient实例 | | setSuccessCode(code: number) | 设置成功状态码 | | addRequestInterceptor(customInterceptor, customErrorInterceptor) | 添加请求拦截器 | | addResponseInterceptor(customInterceptor, customErrorInterceptor) | 添加响应拦截器 | | request(options: RequestOptions) | 发送请求 | | get(url: string, config?: AxiosRequestConfig) | 发送GET请求 | | post(url: string, data?: any, config?: AxiosRequestConfig) | 发送POST请求 | | put(url: string, data?: any, config?: AxiosRequestConfig) | 发送PUT请求 | | delete(url: string, config?: AxiosRequestConfig) | 发送DELETE请求 | | patch(url: string, data?: any, config?: AxiosRequestConfig) | 发送PATCH请求 |

装饰器

| 装饰器 | 描述 | | --- | --- | | @BaseUrl(baseUrl: string) | 类装饰器，为类中所有HTTP请求方法添加基础URL前缀 | | @Get(url: string \| RequestDecoratorOptionsType) | GET请求装饰器 | | @Post(url: string \| RequestDecoratorOptionsType) | POST请求装饰器 | | @Put(url: string \| RequestDecoratorOptionsType) | PUT请求装饰器 | | @Delete(url: string \| RequestDecoratorOptionsType) | DELETE请求装饰器 | | @Patch(url: string \| RequestDecoratorOptionsType) | PATCH请求装饰器 |

请求选项

| 选项 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | debug | boolean | false | 是否开启调试模式 | | loading | boolean | false | 是否显示加载状态 | | successNotice | boolean | false | 是否显示成功通知 | | errorNotice | boolean | false | 是否显示错误通知 | | getResponse | boolean | false | 是否返回完整响应对象 |

类型定义

// 请求方法类型
type RequestMethodType = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';

// 请求选项
type RequestOptions = AxiosRequestConfig & {
  debug?: boolean,
  loading?: boolean,
  successNotice?: boolean,
  errorNotice?: boolean,
  getResponse?: boolean,
}

// 响应数据结构
type ResultData<T = any> = {
  code: number;
  data: T;
  message: any;
  success?: boolean;
  total_num?: number;
  page_num?: number;
  page_size?: number;
};