@allkit/http-client 0.0.1

package/src/core/Http.ts

@@ -0,0 +1,82 @@
+import axios from 'axios'
+import { createWXAdapter } from '../adapter/taro'
+import { defaultConfig } from './config'
+import { handleInterceptor } from './interceptor'
+import { parseRequest } from './request'
+import type { HttpClient, HttpRequestConfig, HttpRequestConfigWrap } from '../types'
+
+class Http {
+  private static _instance: Http | null = null
+  private _client: HttpClient | null = null
+  defaultReqConfig: HttpRequestConfig
+
+  constructor(reqConfig: HttpRequestConfig) {
+    this.defaultReqConfig = reqConfig
+    this.createHttp()
+  }
+
+  public static get instance(): Http {
+    return Http._instance!
+  }
+
+  /** 初始化配置 */
+  public static init(config?: HttpRequestConfigWrap) {
+    if (!Http._instance) {
+      const _config = Object.assign({}, defaultConfig, config)
+      Http._instance = new Http(_config)
+    }
+    return Http._instance
+  }
+
+  public createHttp() {
+    const _request = axios.create(defaultConfig)
+    handleInterceptor(_request, this.defaultReqConfig)
+    this._client = _request
+  }
+
+  /** 设置baseUrl */
+  setBaseURL(baseURL: string) {
+    this.defaultReqConfig.baseURL = baseURL
+  }
+
+  setAdapter(option: Record<string, any>) {
+    //@ts-ignore
+    const _wx = typeof wx === 'object' ? wx : ''
+    if (_wx) {
+      option.adapter = createWXAdapter
+    }
+  }
+
+  public get client(): HttpClient {
+    return this._client!
+  }
+  /** 通用请求 */
+  request<T = any>(reqConfig: HttpRequestConfigWrap) {
+    const config = Object.assign({}, this.defaultReqConfig, reqConfig)
+    const option = parseRequest(config) as Record<string, any>
+    this.setAdapter(option)
+    return this.client.request<any, T>(option)
+  }
+
+  /** get请求 */
+  public static get<T = any>(reqConfig: HttpRequestConfigWrap) {
+    return Http.init().request<T>({ method: 'get', ...reqConfig })
+  }
+
+  /** post请求 */
+  public static post<T = any>(reqConfig: HttpRequestConfigWrap) {
+    return Http.init().request<T>({ method: 'post', ...reqConfig })
+  }
+
+  /** put 请求 */
+  public static put<T = any>(reqConfig: HttpRequestConfigWrap) {
+    return Http.init().request<T>({ method: 'put', ...reqConfig })
+  }
+
+  /** delete 请求 */
+  public static delete<T = any>(reqConfig: HttpRequestConfigWrap) {
+    return Http.init().request<T>({ method: 'delete', ...reqConfig })
+  }
+}
+
+export default Http

package/src/core/config.ts

@@ -0,0 +1,51 @@
+import { EnumContentType, EnumMethod } from '../constants'
+import { commonResponseErrorMsg } from './interceptor'
+import type { HttpRequestConfig, HttpResponse } from '../types'
+
+export const defaultInterceptors = () => {
+  return {
+    response: (res: HttpResponse) => {
+      return new Promise((resolve, reject) => {
+        const { showErrorMsg, ignoreToast } = res.config
+        if (res.status === 200) {
+          if (res.data.code === 0) {
+            return resolve(res.data.data)
+          }
+          //code!==0
+          //忽略错误,或者在忽略列表中,就不显示错误信息
+          if (
+            (Array.isArray(ignoreToast) && !ignoreToast.includes(res.data.code)) ||
+            !ignoreToast
+          ) {
+            showErrorMsg?.(res.data.msg || res.message || '接口错误')
+          }
+          return reject(res)
+        }
+        const errorTips = commonResponseErrorMsg(res)
+        showErrorMsg?.(errorTips)
+        return reject(res)
+      })
+    },
+    rejectResponse: (res: any) => {
+      const { showErrorMsg, ignoreToast } = res.config
+      if ((Array.isArray(ignoreToast) && !ignoreToast.includes(res.data.code)) || !ignoreToast) {
+        const msg = res.response?.data?.message || res.message || '接口错误'
+        showErrorMsg?.(msg)
+      }
+      return Promise.reject(res.response)
+    },
+  }
+}
+
+/** 默认的配置 */
+export const defaultConfig: HttpRequestConfig = {
+  baseURL: '',
+  headers: {
+    method: EnumMethod.POST,
+    'Content-Type': EnumContentType.JSON,
+  },
+  timeout: 10000,
+  loading: false,
+  method: 'POST',
+  interceptors: defaultInterceptors(),
+}

package/src/core/index.ts

@@ -0,0 +1,6 @@
+import Http from './Http'
+import { defaultConfig, defaultInterceptors } from './config'
+
+export { defaultConfig, defaultInterceptors }
+
+export default Http

package/src/core/interceptor.ts

@@ -0,0 +1,98 @@
+import { isEmptyObject } from '../utils'
+import type { AxiosInstance } from 'axios'
+import type { HttpInterceptor, HttpRequestConfig, HttpResponse, MultiInterceptor } from '../types'
+
+export function mergeInterceptor(httpInterceptor?: Partial<HttpInterceptor>) {
+  const opt: MultiInterceptor = {
+    request: [],
+    response: [],
+    rejectRequest: [],
+    rejectResponse: []
+  }
+
+  // 重试
+  if (httpInterceptor && !isEmptyObject(httpInterceptor)) {
+    for (const keyName in opt) {
+      const optInterceptor = opt[keyName as keyof typeof opt]
+      const interceptor = httpInterceptor[keyName as keyof typeof httpInterceptor] || []
+      // @ts-ignore
+      opt[keyName] = optInterceptor.concat(interceptor)
+    }
+  }
+
+  const interceptorList = [
+    ...opt.request.map((i) => {
+      return {
+        callback: i,
+        type: 'request'
+      }
+    }),
+    ...opt.response.map((i) => {
+      return {
+        callback: i,
+        type: 'response'
+      }
+    }),
+    ...opt.rejectRequest.map((i) => {
+      return {
+        callback: i,
+        type: 'rejectRequest'
+      }
+    }),
+    ...opt.rejectResponse.map((i) => {
+      return {
+        callback: i,
+        type: 'rejectResponse'
+      }
+    })
+  ].filter(Boolean)
+  return interceptorList
+}
+
+/**
+ * 处理拦截器
+ */
+export function handleInterceptor(request: AxiosInstance, reqConfig: HttpRequestConfig) {
+  // 拦截器配置
+  const interceptorList = mergeInterceptor(reqConfig.interceptors)
+  interceptorList.forEach((interceptor) => {
+    const { type, callback } = interceptor
+    type === 'request' && request.interceptors?.request?.use(callback as any)
+    type === 'response' && request.interceptors?.response?.use(callback as any)
+    type === 'rejectRequest' && request.interceptors?.request?.use(undefined, callback)
+    type === 'rejectResponse' && request.interceptors?.response?.use(undefined, callback)
+  })
+}
+
+export function commonResponseErrorMsg(res: HttpResponse) {
+  const msg = res.data?.message || res.msg
+  let errorMsg = ''
+  switch (res.status) {
+    case 401:
+      errorMsg = '401:' + msg
+      break
+    case 403:
+      errorMsg = msg
+      break
+    case 404:
+      errorMsg = '404: ' + msg
+      break
+    case 422:
+      errorMsg = '请求参数错误' + msg
+      break
+    case 426:
+      errorMsg = '426: ' + msg
+      break
+    case 428:
+      errorMsg = '428: ' + msg
+      break
+    case 500: {
+      errorMsg = '服务器错误: ' + msg
+      break
+    }
+    default:
+      errorMsg = '未知的情况'
+      break
+  }
+  return errorMsg
+}

package/src/core/request.ts

@@ -0,0 +1,75 @@
+import md5 from 'js-md5'
+import { EnumContentType } from '../constants'
+import { isFunction } from '../utils'
+import type { HttpRequestConfig } from '../types'
+
+/**
+ * 创建请求头
+ */
+export function parseHeaders(config: HttpRequestConfig) {
+  const { url, data } = config
+
+  const token = isFunction(config.token) ? config.token() || '' : config.token || ''
+
+  const _getSign = () => {
+    return md5(md5(token).toUpperCase() + JSON.stringify(data || {})).toUpperCase()
+  }
+  const _headers = {
+    ...config.headers,
+    method: url,
+    sign: _getSign()
+  } as Record<string, any>
+  if (token) {
+    _headers.Authorization = 'Bearer ' + token
+  }
+  return _headers
+}
+
+/**
+ * 创建请求体
+ */
+export function parseBody(config: HttpRequestConfig) {
+  const { data = {} } = config
+  const contentType = config.headers?.['Content-Type'] || config.headers?.['content-type']
+  const option = { data: {} }
+  switch (contentType) {
+    case EnumContentType.URL_ENCODED: {
+      const params = new window.URLSearchParams()
+      for (const [key, val] of Object.entries(data)) {
+        params.append(key, val as string)
+      }
+      option['data'] = params
+      //data = qs.stringify(param, { arrayFormat: 'brackets' })
+      break
+    }
+    case EnumContentType.FORM: {
+      const formData = new FormData()
+      for (const [key, val] of Object.entries(data)) {
+        formData.append(key, val as string)
+      }
+      option['data'] = formData
+      break
+    }
+    default:
+      option['data'] = data
+      break
+  }
+  return option
+}
+
+/**
+ * 处理转换请求
+ */
+export function parseRequest(config: HttpRequestConfig) {
+  //处理请求体
+  const body = parseBody(config)
+  //处理请求头
+  const headers = parseHeaders(config)
+  //处理请求行
+  //const url = parseUrl(config.url!)
+  return {
+    ...config,
+    headers,
+    ...body
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+import { EnumMethod } from './constants'
+import Http from './core'
+import type { HttpRequestConfigWrap } from './types'
+
+export * from './core'
+export * from './types'
+
+/**
+ * 发送请求
+ * 默认post
+ */
+export const useHttp = <T = any>(config: HttpRequestConfigWrap) => {
+  config.method = config.method || EnumMethod.POST
+  return Http.init().request<T>(config)
+}
+
+export { Http }
+export default Http

package/src/types.ts

@@ -0,0 +1,82 @@
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { EnumContentType, EnumMethod } from './constants'
+
+export type MethodValueType = (typeof EnumMethod)[keyof typeof EnumMethod] | string
+
+export interface HttpRequestConfig<T = any> extends AxiosRequestConfig<T> {
+  /**
+   * token，可以是个函数
+   */
+  token?: string | (() => string)
+
+  /** userId ,可以是函数 */
+  userId?: string | (() => string)
+
+  // 是否开启loading
+  loading?: boolean
+  /**
+   * loading配置
+   */
+  loadingOption?: {
+    show: () => void
+    hide: () => void
+  }
+
+  /**
+   * 是否忽略错误提示
+   */
+  ignoreToast?: boolean | Array<number | string>
+
+  /**
+   * 错误提示
+   * @param msg - 后台返回错误信息
+   */
+  showErrorMsg?: (msg: string) => void
+  casToken?: boolean
+  headers: {
+    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>
+}
+
+export type HttpRequestConfigWrap<T = any> = Omit<HttpRequestConfig<T>, 'headers'> & {
+  headers?: Partial<HttpRequestConfig['headers']>
+}
+
+export interface HttpResponse<T = any> {
+  data: T
+  code: number
+  msg: string
+  success: boolean
+  headers: HttpRequestConfig['headers']
+  config: HttpRequestConfigWrap<T>
+  [key: string]: any
+}
+
+export interface HttpClient extends AxiosInstance {
+  create?: (config: HttpRequestConfig) => any
+}
+
+export type HttpInterceptorRequest = (value: AxiosRequestConfig) => Record<string, any>
+export type HttpInterceptorResponse = (value: HttpResponse) => Promise<any> | HttpResponse
+export type HttpInterceptorReject = (error: any) => any
+
+export interface HttpInterceptor {
+  request: HttpInterceptorRequest | Array<HttpInterceptorRequest>
+  response: HttpInterceptorResponse | Array<HttpInterceptorResponse>
+  rejectRequest: HttpInterceptorReject | Array<HttpInterceptorReject>
+  rejectResponse: HttpInterceptorReject | Array<HttpInterceptorReject>
+}
+
+export interface MultiInterceptor {
+  request: Array<HttpInterceptorRequest>
+  rejectRequest: Array<HttpInterceptorReject>
+  rejectResponse: Array<HttpInterceptorReject>
+  response: Array<HttpInterceptorResponse>
+}

package/src/utils/index.ts

@@ -0,0 +1,36 @@
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object')
+}
+
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function'
+}
+
+/**
+ * 检测当前类型是否是空对象
+ * @param obj - 检测当前类型
+ * @returns 如果为空的对象则返回true、否则返回false
+ */
+export const isEmptyObject = (obj: any): boolean => {
+  return isObject(obj) && Object.keys(obj as Object).length === 0
+}
+
+/**
+ * 随机数
+ * @param count  - 位数
+ */
+export const random = (count: number) => {
+  const num = Date.now() + Math.floor(1000 * Math.random() + 1000)
+  if (count) {
+    return num.toString().substr(-count)
+  }
+  return num.toString()
+}
+
+export const isKuaShengClient = navigator.userAgent.toLowerCase().indexOf('kuasheng-2.0') >= 0

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "@allkit/tsconfig/tsconfig.web.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "types": [
+      "vite/client"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "~/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/*.d.ts"
+  ]
+}

package/types/global.d.ts

@@ -0,0 +1,16 @@
+export {}
+
+declare global {
+  interface IWxRequest {
+    url: string
+    data: Record<string, any>
+    header?: Record<string, string | number | undefined>
+    success: (res: Record<string, any>) => void
+    fail: (error: any) => void
+    complete: () => void
+    [key: string]: any
+  }
+  interface Wx {
+    request: (req: IWxRequest) => void
+  }
+}