易宝支付 大前端 client utils

3.0 版本之后，ESMOnly.

Features

• getQueryObject: 获取 url 参数
• setTokenFromUrl(key): 通过 url 中的参数 key 设置 TOKEN, 并存入 cookie 中
• getToken: 从 cookie 中获取 TOKEN
• removeToken: 从 cookie 中删除 TOKEN
• serviceFactory: 请求封装的工厂函数

serviceFactory 介绍

基本使用

import { serviceFactory } from '@yeepay/client-utils'

const service = serviceFactory(
  {
    baseUrl: '/xxx-server',
    headers: {},
  },
  successCallback,
  failCallback,
  unauthorizedCallback,
  forbiddenCallback,
  notfoundCallback,
)

Mock数据

import { serviceFactory } from '@yeepay/client-utils'

const service = serviceFactory(
  {
    baseUrl: '/xxx-server',
    headers: {},
    mock: {
      modules: import.meta.glob('./mock/**/*.json', { eager: true }),
    },
  },
  successCallback,
  failCallback,
  unauthorizedCallback,
  forbiddenCallback,
  notfoundCallback,
)

比如 mock 数据文件 ./mock/get/user.json 内容如下：

{
  "code": "000000",
  "data": {
    "name": "John Doe"
  }
}

在你调用 uri 为 /get/user 的接口时，mock 数据将会被返回。

你还可以使用 js 文件来自定义 status、response、headers:

比如 mock 数据文件 ./mock/get/user.ts 内容如下：

import type { AxiosRequestConfig } from 'axios'

export default (config: AxiosRequestConfig) => {
  return [400, {
    code: '000000',
    data: {
      message: 'User not found'
    },
  }, { 'new-header-hello': 'world' }]
}

Debug 日志打印

开发者常常使用 console.log 日志打印来调试代码，且往往会忘记删除这些日志，导致线上环境也打印日志，影响性能与潜在安全风险。

@yeepay/client-utils 提供了 debug 模块来帮助开发者更好地控制日志打印。

基本使用

import { debug } from '@yeepay/client-utils'

debug.page1('page1 is loaded')

debug.api('fetch user api is called')

这些日志默认在开发环境打印，而在生产环境不打印。

如果想要在生产环境打印，可以在浏览器控制台执行：

debug.enableAll()
// 或者打印特定模块
debug.enable('page1')

// 恢复默认行为
debug.disable()