Lesson 02 · 请求链路

一次请求的完整生命

从一个下拉框，到 /1000y/engine/cmd。 中间有四个地方会悄悄改你的请求。

先复习：上一课的两个点

先说人话：这次要追的是什么

策划打开「NPC」页，从地图下拉框里选了一张地图，列表刷新出这张地图上的所有 NPC。

就这么一个动作。但如果有一天他跟你说「选了地图但列表是空的」， 你需要知道这中间有几个环节可能出问题。 这一课就是把这条链路完整走一遍。

第 0 步：先确认用户点的是什么

这一步听起来多余，但它是本项目最容易翻车的地方。页面上有两个东西看起来都像「搜索」， 只有一个会真的发请求。

打开 src/views/GameEditor/Npc/index.vue，先看模板里的事件绑定：

第 1 步：页面 → api 层

页面不直接用 axios。它调 src/api/ 下的封装：

// src/views/GameEditor/Npc/index.vue:130
const res = await byMapIdGetNpc({
  mapId: mapID.value,
  pageSize: 9999,
  pageNum: 1,
  type: 0
})

而 byMapIdGetNpc 长这样（src/api/game/index.ts:14）：

export async function byMapIdGetNpc(params: GetNpcApiModel) {
  const { serverId, ...data } = params
  return request.post({
    url: '/1000y/engine/cmd',
    data: {
      type: 1,
      ...data,
      reverse: true,
      serverId: serverId || getStorage('defaultServerId'),
      cmd: 'npc_search_ByMapId'      // ← 关键在这
    }
  })
}

这里有两件事值得停下来看：

① URL 是固定的，动作藏在 cmd 里

这不是 REST。几乎所有业务请求都打到同一个地址 /1000y/engine/cmd，服务端靠请求体里的 cmd 字段决定干什么：

② serverId 有个静默兜底

serverId: serverId || getStorage('defaultServerId') —— 调用方没传就用本地存的默认服。

这意味着「选服」这个动作会影响之后所有请求。 如果用户报「数据不对」，先问他选的哪台服。 这个值没选过的话可能是 undefined，请求照发， 服务端返回空 —— 界面上看起来就是「列表是空的」。

第 2 步：api → axios 封装

request.post 来自 src/config/axios/index.ts， 是一层很薄的包装：把 { url, method, params, data, headersType } 转成 axios 的调用形式，顺便塞一个默认的 Content-Type: application/json。

真正干活的是 service（src/config/axios/service.ts:22）：

const service: AxiosInstance = axios.create({
  baseURL: BASE_PATH_URL,        // import.meta.env.VITE_BASEPATH
  timeout: SERVICE_TIMEOUT       // 2 分钟
})

第 3 步：请求拦截器 —— 四件事

src/config/axios/service.ts:115：

service.interceptors.request.use((config) => {
  const token = getStorage(appStore.getToken)
  token && config.headers.setAuthorization(`Bearer ${token}`)   // ①

  handleGetParams(config)      // ②
  handlePostParams(config)     // ③
  handle1000yRequest(config)   // ④
  return config
})

① 和 ② ③ 都是常规操作（拼 GET 查询串、按 Content-Type 决定要不要 qs.stringify）。 值得细看的是 ④。

handle1000yRequest：只对含 1000y 的 URL 生效

src/config/axios/service.ts:88，它做三件事：

// src/config/axios/service.ts:79
function getBaseURL(pcode: string): string {
  if (pcode.includes('_dev')) {
    return 'http://common-gm-460qntest.3975app.com/n1000y-api/'
  }
  return 'http://common-gm-460qnprod.3975app.com/n1000y-api/'
}

第 4 步：响应拦截器

src/config/axios/service.ts:131：

service.interceptors.response.use((response) => {
  if (response.config.responseType === 'blob') return response
  if (response.config.responseType === 'stream') return response

  if (response.data.code === result_code || response.data.code === 1) {
    return response.data          // ← 注意：返回的是 data，不是 response
  }
  return Promise.reject(response) // ← 业务码不对 = reject
})

两个必须记住的行为：

把整条链串起来

「列表是空的」怎么查

现在你有了完整链路，可以把这个模糊报障拆成有序的检查点：

真机验证