@vsoft/request

基于 axios 的请求封装库，提供统一的请求配置和拦截器管理。

特性

• 🎯 基于 axios，API 简单易用
• 🔧 支持全局配置和拦截器
• 🔄 内置重试机制
• 📦 支持 TypeScript 类型推导
• ⚡ 支持 ESM 和 CommonJS 格式
• 🛡️ 统一错误处理

安装

pnpm add @vsoft/request

快速开始

基础使用

import { request } from '@vsoft/request'

// GET 请求
const users = await request.get('/users')

// POST 请求
const newUser = await request.post('/users', { name: 'John' })

// 带配置的请求
const user = await request.get('/users/1', {
  showLoading: true,
  retry: 3,
  retryDelay: 1000
})

创建自定义实例

import { createRequest } from '@vsoft/request'

const api = createRequest({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  defaultConfig: {
    showError: true,
    showLoading: false
  }
})

// 使用自定义实例
const data = await api.get('/users')

配置选项

RequestInstanceConfig

interface RequestInstanceConfig {
  baseURL?: string          // 基础URL
  timeout?: number          // 超时时间(ms)
  interceptors?: RequestInterceptor  // 拦截器配置
  defaultConfig?: Partial<RequestConfig>  // 默认配置
}

RequestConfig (扩展自 AxiosRequestConfig)

interface RequestConfig extends AxiosRequestConfig {
  showLoading?: boolean     // 是否显示loading
  showError?: boolean       // 是否显示错误提示
  retry?: number           // 重试次数
  retryDelay?: number      // 重试延迟时间(ms)
}

拦截器

import { createRequest, type RequestInterceptor } from '@vsoft/request'

const interceptors: RequestInterceptor = {
  onRequest: (config) => {
    // 请求前处理
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  
  onRequestError: (error) => {
    // 请求错误处理
    console.error('请求错误:', error)
    return Promise.reject(error)
  },
  
  onResponse: (response) => {
    // 响应处理
    return response
  },
  
  onResponseError: (error) => {
    // 响应错误处理
    if (error.response?.status === 401) {
      // 未授权处理
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
}

const api = createRequest({
  baseURL: 'https://api.example.com',
  interceptors
})

响应数据格式

interface ResponseData<T = any> {
  code: number | string
  data: T
  message: string
  [key: string]: any
}

API 方法

// 通用请求
request<T>(config: RequestConfig): Promise<ResponseData<T>>

// HTTP 方法快捷方式
request.get<T>(url: string, config?: RequestConfig): Promise<ResponseData<T>>
request.post<T>(url: string, data?: any, config?: RequestConfig): Promise<ResponseData<T>>
request.put<T>(url: string, data?: any, config?: RequestConfig): Promise<ResponseData<T>>
request.delete<T>(url: string, config?: RequestConfig): Promise<ResponseData<T>>
request.patch<T>(url: string, data?: any, config?: RequestConfig): Promise<ResponseData<T>>

// 获取原始 axios 实例
request.getInstance(): AxiosInstance

在项目中使用

1. 创建 API 配置文件

// src/api/index.ts
import { createRequest } from '@vsoft/request'

export const api = createRequest({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  interceptors: {
    onRequest: (config) => {
      const token = localStorage.getItem('token')
      if (token) {
        config.headers.Authorization = `Bearer ${token}`
      }
      return config
    },
    onResponseError: (error) => {
      if (error.response?.status === 401) {
        localStorage.removeItem('token')
        window.location.href = '/login'
      }
      return Promise.reject(error)
    }
  }
})

2. 在组件中使用

// src/components/UserList.vue
import { api } from '@/api'

interface User {
  id: number
  name: string
  email: string
}

const getUsers = async () => {
  try {
    const response = await api.get<User[]>('/users', {
      showLoading: true,
      retry: 2
    })
    return response.data
  } catch (error) {
    console.error('获取用户列表失败:', error)
  }
}

License

MIT