http-client 多端通用网络请求库

Http-client 是 axios 网络请求客户端的封装,主要目的:

• 简化步骤: 只需要init即可初始化,useHttp处理实际请求
• 多端一致: 支持h5,小程序 等多个端,api 一致,无心智负担
• 无业务依赖: 可插拔配置,去除跨声内部的重业务依赖,去除 vant 组件库的 toast 提示
• ts 类型友好: 支持ts类型提示,response类型推导

一丶目录结构

二丶基础用法

1. 依赖

pnpm add @mid-vue/http-client

2. 导入

import Http from '@mid-vue/http-client'

3. 初始化实例

暴露 init 静态方法,传入请求配置(完整的参数见末尾),初始化实例

//main.ts

Http.init({
  //baseURL: '/router/rest',  如果接口是代理跨域,直接写死baseURL
  baseURL: import.meta.env.VITE_BASE_API, //不同环境baseURL
  appkey: import.meta.env.VITE_BASE_APP_KEY,

  //去掉内置ks_token,减少耦合
  token: () => getToken(),

  //不内置toast,传入业务组件toast即可
  showErrorMsg: (msg) => showToast(msg),

  //添加是否灰度标识,可选的,非必须
  isGray: () => getGray(),
})

4. 拦截器 -(灰度和 token 失效处理)

//main.ts

Http.init({
  //拦截器
  interceptors: {
    request: [
      (req: HttpRequestConfig) => {
        //请求拦截,判断是否灰度,并添加header
        req.headers.isGray = isGray() ? '1' : '0'
        return req
      },
    ],
    response: [defaultInterceptors().response],
    rejectResponse: (res: HttpResponse) => {
      if ([60010, 100201].includes(res?.data?.code)) {
        //token失效
        //处理token失效的逻辑
      }
      return Promise.reject(res)
    },
  },
  // 其他配置
  baseURL: import.meta.env.VITE_BASE_API, //不同环境baseURL
  xxx,
})

4. 代码使用

暴露 useHttp方法,方便快捷调用,默认post请求

// api.ts

import { useHttp } from '@mid-vue/http-client'
/**
 * 获取用户信息
 */
export const apiGetUserInfo = (data = {}) => {
  return useHttp<IUserInfo>({
    url: 'mv.driver.activityScheme.getUserInfo',
    data,
  })
}

三丶其他实例函数

1. useRequest 通用请求函数

useRequest<IUserInfo>({
  method:'POST|GET|PUT'
  url: 'mv.driver.activityScheme.getUserInfo',
  data,
})

2. 具体实例函数调用

Http.instance.post({
  method:'POST|GET|PUT'
  url: 'mv.driver.activityScheme.getUserInfo',
  data,
})
Http.instance.GET({
  method:'POST|GET|PUT'
  url: 'mv.driver.activityScheme.getUserInfo',
  data,
})

四丶更多配置

集成axios的通用功能,添加loading,ignoreToast等特色配置

1. ignoreToast 忽略错误提示

//相同配置,实例会覆盖全局的
useHttp<IUserInfo>({
  //错误码为10010时,不自动提示Toast
  ignoreToast: [10010],
  url: 'mv.driver.activityScheme.getUserInfo',
  data,
})

useHttp<IUserInfo>({
  //所有错误code不提示Toast
  ignoreToast: true,
  url: 'mv.driver.activityScheme.getUserInfo',
  data,
})

2.详情配置

  //应用唯一的appkey
  appkey?: string | number
  /**
   * token，可以是个函数
   */
  token?: string | (() => string)
  /** userId ,可以是函数 */
  userId?: string | (() => string)

  /** 菜单id */
  menuId?: string

  // 是否开启loading
  loading?: boolean
  /**
   * loading配置
   */
  loadingOption?: {
    show: () => void
    hide: () => void
  }

  /**
   * 是否忽略错误提示
   */
  ignoreToast?: boolean | Array<number | string>

  /**
   * 错误提示
   * @param msg - 后台返回错误信息
   */
  showErrorMsg?: (msg: string) => void
  casToken?: boolean
  headers: {
    appkey: string
    method: MethodValueType
    'Content-Type': EnumContentType
    'content-type'?: EnumContentType
    'X-menu-id'?: string
    'x-from'?: number | string
    'X-associated-system-code'?: string
    [key: string]: string | number | undefined
  }
  interceptors?: Partial<HttpInterceptor>
}