小程序请求层怎么封装？

小程序的每个页面自己拼 token、timestamp、app_version，迟早出问题------

不是漏字段，就是 POST 被 merge 了三遍公参，body 胖到后端怀疑人生。

我在 Mpx 项目里收拢成 一层 request 模块，全局初始化一次。

🎭 先搞懂架构：别在页面里 fetch

复制代码

页面/composable
    ↓ 只传 url + data
xfetch 实例（可 create 独立的）
    ↓ request 拦截：塞公参
    ↓ response 拦截：解包 + 统一报错
host 解析（按 serviceKey + 环境）

就像快递：页面只管填收件人，公参是仓库统一贴面单。

🔧 开关一：要不要独立 xfetch 实例

typescript 复制代码

import mpx from '@mpxjs/core'

const INDEPENDENT_FETCH = false
const fetchInstance = INDEPENDENT_FETCH
  ? mpx.xfetch.create()
  : mpx.xfetch

false（大多数情况） ：全 App 共享，拦截器只注册一次
true：上传、第三方域名等场景，别污染主链路

见过 INDEPENDENT_FETCH = true 然后每个页面 create() 一个新的吗？拦截器注册了八遍，公参 merge 八遍，debug 到想离职。

🔧 开关二：动态公参------对象 + 函数都要支持

typescript 复制代码

const _dyParams: Record<string, unknown> = {}
const _dynamicParamFns: Array<() => Record<string, unknown>> = []

function extendRequestParams(
  params: Record<string, unknown> | (() => Record<string, unknown>)
) {
  if (typeof params === 'function') {
    _dynamicParamFns.push(params)
  } else {
    Object.assign(_dyParams, params)
  }
}

为啥要函数？实验分组、traceId、页面栈深度------这些 运行时才算得出来，写死在对象里不现实。

🛡️ 拦截器：注册一次，终身受用

typescript 复制代码

let _interceptorRegistered = false

function registerInterceptors() {
  if (_interceptorRegistered) return
  _interceptorRegistered = true

  fetchInstance.interceptors.request.use((config) => {
    if (config._ignoreInterceptors) return config

    const extendData = { ..._dyParams }
    _dynamicParamFns.forEach((fn) => Object.assign(extendData, fn()))

    if (/^post$/i.test(config.method) && isPlainObject(config.data)) {
      config.data = { ...extendData, ...config.data }
    } else if (/^get$/i.test(config.method)) {
      config.params = { ...extendData, ...config.params }
    }
    return config
  })

  fetchInstance.interceptors.response.use((response) => {
    // HTTP 200 → 再看业务 code → 成功直接 return data.data
    // 失败统一 reject + 可选 toast / 上报
  })
}

_ignoreInterceptors 是救命绳：上传、第三方 SDK 回调，别硬走你的业务解包逻辑。

😴 登录态：别每个请求都 await 登录

typescript 复制代码

const getLoginInfo = async () => {
  let login = store.state.login
  if (!login?.token) {
    login = await silentLogin().catch(() => null)
  }
  return login
}

有 token 用 token，没有再 silent------首屏不会被登录接口卡成 PPT。

📋 请求 config 私有字段（推荐）

字段	干嘛用
`_serviceKey`	走哪套 host / 成功码规则
`_ignoreInterceptors`	这条请求别拦截
`_noCache`	禁用缓存
`_filterTrackRequestErrorCodes`	哪些错误不上报

比全局 window.__SKIP_INTERCEPTOR__ 这种野路子强多了。

🕳️ 坑清单（真实伤害版）

拦截器 register 了多次 → POST body 指数膨胀，后端：？
GET 合并了 params、POST 忘了 data → 一半接口永远缺公参
所有后端 success 都当 code === 0 → 多服务并存时全崩，用 serviceKey 映射
空字符串 token 也传 → 后端鉴权鬼畜，记得 delete 空值

🎬 对外就两行

typescript 复制代码

// App onLaunch
setupRequest()

// 页面里
const list = await apiGet<User[]>('/list', { page: 1 })

业务同学再也不用关心 timestamp 是秒还是毫秒------ 这层就该死磕细节，页面只拿 data。