前端开发场景中如何对接后端接口拿到需要的数据

1. API 层不等于页面层#

管理端把订单接口集中在 src/api/manage/deliveryOrder.js，小程序放在 api/business/order.js。页面调用有业务名称的方法：

1
OrderApi.getOrderDetail(orderId)
2
OrderApi.resubmitOrder(orderId, payload)
3
DeliveryOrderApi.startFlight(orderId, params)

页面不应反复拼 URL，也不应关心 token header。接口路径变化时只改 API 层。

2. 请求层统一处理公共问题#

小程序 utils/request.js 统一完成：

• baseURL 与查询参数拼接；
• Authorization 注入；
• 401 刷新与登录引导；
• 请求超时和错误消息；
• loading 引用计数；
• 相同请求取消和防重复。

1
export const get = (url, params = {}, options = {}) =>
2
  request({ ...options, url, method: 'GET', params })

统一层只处理通用协议，不要在这里写“订单失败后跳订单页”这种业务逻辑。

3. 先设计页面所需模型#

对接前先列出页面真正需要的字段。例如异常卡片需要异常编号、业务订单号、描述、级别、状态和时间。接口若只返回 orderId，就应明确缺少的是业务订单号，而不是稀里糊涂把 ID 显示出来。

1
页面字段清单
2
   ↓ 对照
3
接口响应字段
4
   ↓ 找差异
5
补充接口 / 后端联表 / 前端补全

这一步能提前发现“N+1 查询”或业务标识缺失。

4. 查询参数与空值#

筛选表单不要把空字符串、undefined 和无效日期全部传给后端。请求层序列化时跳过空值，页面在点击查询时把页码重置为 1。

1
Object.entries(params).forEach(([key, value]) => {
2
  if (value === undefined || value === null || value === '') return
3
  // append query
4
})

排序字段也应显式传递，例如 orderByColumn: 'createTime'、isAsc: 'desc'，避免依赖数据库默认顺序。

5. 响应适配#

接口可能返回 { data }、{ rows, total } 或直接对象。API/Store 层先归一，模板只消费确定类型：

1
const rows = Array.isArray(response?.rows) ? response.rows : []
2
const total = Number(response?.total ?? rows.length)
3
const detail = response?.data || response || {}

模板里大量 response?.data?.rows ?? response?.rows 是接口边界没有收好的信号。

6. 关联数据补全#

异常与通知接口只返回 orderId 时，前端可以并行查询订单详情：

1
const ids = [...new Set(rows.map(item => item.orderId).filter(Boolean))]
2
const results = await Promise.allSettled(ids.map(id => getOrderDetail(id)))

补全结果用 Map 缓存，避免同一订单重复请求。不过从长期看，列表接口直接返回 orderNo 更合理，因为这是稳定且高频的展示字段。

7. 并行还是串行#

互不依赖的详情、凭证和日志可以并行；创建订单后上传凭证必须串行两个阶段；取消飞行任务后退款也必须按业务顺序执行。

1
并行：订单详情 ┬ 凭证
2
              ├ 历史
3
              └ 日志
4

5
串行：创建订单 → 得到 orderId → 上传凭证

是否并行取决于依赖关系，不取决于“Promise.all 看起来更快”。

8. 错误边界#

核心数据失败时页面显示错误和重试；附属数据失败时用 Promise.allSettled 保留其余内容。写操作失败应保留表单输入，不自动假装成功。

9. 请求竞态与取消#

搜索、标签切换、周期切换都可能产生竞态。可以使用版本号忽略旧响应，或由请求层取消完全相同的前一个任务。两者解决的问题不同：版本号处理“不同参数的返回顺序”，去重取消处理“同参数重复触发”。

10. 本篇小结#

接口对接的终点不是控制台打印出数据，而是页面在慢网、空值、旧响应和局部失败下仍然可信。await 只有五个字母，它身后的活可一点都不少。