封装---统一处理接口与打印错误信息

一.简介

我在重构代码时突然想到一个想法并实现出来:封装一个统一处理接口与打印错误信息,控制显示错误信息在控制台,接口请求时loading效果展示等等

这个只是个人想法,而且比较简略,不太清楚实际工作是否这样写,但是我认为只要有这个想法就要去实现,总比没实现好,欢迎大家的建议与指导

介绍我在项目中如何封装一个统一的 API 请求函数，解决每个接口都要写 try...catch 的繁琐问题，并实现自动错误日志、toast 提示等功能，助力开发效率提升。

在日常开发中，我们常常会写很多类似这样的代码：

try {
  const res = await axios.get('/api/user')
  console.log('请求成功', res)
} catch (error) {
  console.error('请求失败', error)
}

当 API 请求数量增多，每个都写一遍 try...catch，不仅重复代码多，而且难以统一管理。

于是我封装了一个 apiRequest 方法，来统一处理：

 在上一篇文章中,我详细写了关于封装try...catch的封装文章:

封装---优化try..catch错误处理方式

已经能够实现下面的效果:

const [Response, Error] = await apiRequest(fetch('/api'))
if (Error) {
// 需要打印error
  console.log(Error)
}
// 处理返回值代码部分
console.log(Response)

接下来进行拓展到能够实现下面的效果:

这样统一内部处理错误信息提示,控制台打印规范统一的错误信息,显示正确信息提示等等,核心业务代码逻辑就可以更好的在下面进行书写

二.实现

1.单个接口(使用apiRequest函数)

首先就是工具函数的封装,我才用ts来写:

import { toast } from '@/lib/utils/toast'

interface ApiRequestOptions {
  requestName?: string
  showRequestName?: boolean
  showSuccessLog?: boolean
  showErrorLog?: boolean
  showSuccessToast?: boolean
  successToastMessage?: string
  showErrorToast?: boolean
  errorToastMessage?: string
}

const apiRequest = async (promise: Promise, options: ApiRequestOptions = {}): Promise<[T | null, any | null]> => {
  const {
    requestName = '请求',
    showRequestName = true,
    showSuccessLog = false,
    showErrorLog = true,
    showSuccessToast = false,
    successToastMessage = '请求成功',
    showErrorToast = false,
    errorToastMessage = '请求失败'
  } = options

  try {
    const response = await promise
    if (showRequestName && showSuccessLog) {
      console.log(`[${requestName}] 请求成功:`, response)
    }
    if (showSuccessToast) {
      toast.success(successToastMessage)
    }
    return [response, null]
  } catch (error) {
    if (showRequestName && showErrorLog) {
      console.error(`[${requestName}] 请求失败:`, error)
    }
    if (showErrorToast) {
      toast.error(errorToastMessage)
    }
    return [null, error]
  }
}

上面中的函数apiRequest接收两个参数:

1. promise接口
2. 配置参数数据

这样的情况下根据配置参数就可以决定是否需要打印信息,控制信息提示等等(可以自行进行拓展)

使用示例:

// apis/user.ts
import http from '@/lib/utils/request/http'

export const getUserInfo = (id: number) => {
  return http.get(`/api/user/${id}`)
}

使用 apiRequest 调用该函数:

// pages/user.ts
import { apiRequest } from '@/lib/utils/apiRequest'
import { getUserInfo } from '@/apis/user'

async function fetchUser() {
  const [res, error] = await apiRequest(getUserInfo(1), {
    requestName: '获取用户信息',
    showSuccessLog: true,
    showSuccessToast: true,
    successToastMessage: '获取用户成功',
    showErrorLog: true,
    showErrorToast: true,
    errorToastMessage: '获取用户失败'
  })

  if (!error) {
    console.log('用户数据:', res.data)
  }
}

2.多个接口统一封装配置

工具函数:

import { toast } from '@/lib/utils/toast'

// 后续可以添加更多内容拓展
interface ApiRequestOptions {
  requestName?: string
  showRequestName?: boolean
  showSuccessLog?: boolean
  showErrorLog?: boolean
  showSuccessToast?: boolean
  successToastMessage?: string
  showErrorToast?: boolean
  errorToastMessage?: string
}

// 适合于封装多个请求的函数,注意那个api请求药味对象封装形式
interface WrapRequestOptions {
  defaultOptions?: ApiRequestOptions
  requestNameMap?: Record
}

const apiRequest = async (promise: Promise, options: ApiRequestOptions = {}): Promise<[T | null, any | null]> => {
  const {
    requestName = '请求',
    showRequestName = true,
    showSuccessLog = false,
    showErrorLog = true,
    showSuccessToast = false,
    successToastMessage = '请求成功',
    showErrorToast = false,
    errorToastMessage = '请求失败'
  } = options

  try {
    const response = await promise
    if (showRequestName && showSuccessLog) {
      console.log(`[${requestName}] 请求成功:`, response)
    }
    if (showSuccessToast) {
      toast.success(successToastMessage)  
    }
    return [response, null]
  } catch (error) {
    if (showRequestName && showErrorLog) {
      console.error(`[${requestName}] 请求失败:`, error)
    }
    if (showErrorToast) {
      toast.error(errorToastMessage)
    }
    return [null, error]
  }
}

function wrapRequestObject>(apiObject: T, config: WrapRequestOptions = {}): { [K in keyof T]: (...args: Parameters) => ReturnType } {
  const wrapped = {} as any

  for (const key in apiObject) {
    const func = apiObject[key]
    wrapped[key] = (...args: any[]) => {
      // 取出用户传入的 options（最后一个参数，且为对象）
      let options = {}
      if (args.length > 1 && typeof args[args.length - 1] === 'object' && !Array.isArray(args[args.length - 1]) && !(args[args.length - 1] instanceof File)) {
        options = args.pop()
      }

      const promise = func(...args)
      const requestName = config?.requestNameMap?.[key] || key

      return apiRequest(promise, {
        ...config?.defaultOptions,
        ...options,
        requestName: requestName
      })
    }
  }

  return wrapped
}

export { apiRequest, wrapRequestObject }

(1).原始接口定义（以教师管理为例）

// apis/teacher-management.api.ts
import http from '@/lib/utils/request/http'

export default {
  get_teacher_list: (params: { page: number; pageSize: number }) =>
    http.get('/v1/teachers', { params }),

  add_teacher: (data: any) => http.post('/v1/teachers', data),

  update_teacher: (data: any) => http.put('/v1/teachers', data),

  delete_teacher: (id: number) => http.delete(`/v1/teachers/${id}`)
}

(2).封装 wrapRequestObject 配置

可以统一配置封装这一个对象中的接口函数以及配置)

需要对其中的接口配置只需要单独

// apis/index.ts
import { wrapRequestObject } from '@/lib/utils/apiRequest'
import TeacherAPI_Raw from './teacher-management.api'

const TeacherManagement_API = wrapRequestObject(TeacherAPI_Raw, {
  defaultOptions: {
    showRequestName: true,
    showSuccessToast: true,
    showErrorToast: true,
    showErrorLog: true,
    successToastMessage: '请求成功',
    errorToastMessage: '请求失败'
  },
  requestNameMap: {
    get_teacher_list: '获取教师列表',
    add_teacher: '新增教师',
    update_teacher: '修改教师',
    delete_teacher: '删除教师'
  }
})

export { TeacherManagement_API }

(3).页面中调用示例（带局部覆盖配置）

const [res, err] = await TeacherManagement_API.add_teacher({ name: '张三' }, {
  successToastMessage: '添加教师成功！',
  showSuccessLog: true
})

if (!err) {
  console.log('添加成功:', res)
}

三.优势

优势	说明
简洁性	一行代码搞定 try/catch、toast、log
灵活性	每个请求支持单独传参
可维护性	统一处理日志与提示，便于维护与调试
可读性	requestNameMap 提高开发者阅读效率

 这个封装方式非常适用于大型项目，尤其是 SvelteKit、Vue、React 项目中的 API 请求管理。你可以根据项目具体需求，扩展更多功能，比如 loading 管理、请求时间统计、埋点分析等。

就比如像下面的代码一样:(效果展示)

可以统一项目中的信息控制台错误打印等,实际使用接口只需要一行,其他内容写业务逻辑