JavaScript 中怎么实现一个统一的接口请求封装函数-js教程-PHP中文网

javascript 中应使用 fetch 封装统一请求函数，包含默认配置合并、get 参数序列化、json 自动序列化、http 错误抛出 apierror、响应标准化为 {code, message, data}、token 自动注入与防并发刷新机制。

javascript 中怎么实现一个统一的接口请求封装函数

在 JavaScript 中实现统一的接口请求封装函数，核心是用 fetch 或 axios 做基础请求，再通过拦截器、默认配置、错误统一处理、Token 自动注入等方式抽象出一个可复用、易维护的请求函数。下面以原生 fetch 为例（兼容性好、无需额外依赖），给出实用、轻量、生产可用的封装方案。

1. 基础封装：支持默认配置与请求参数合并

避免每次调用都重复写 method、headers、credentials 等。用一个工厂函数生成带默认配置的请求函数：

设置基础 URL、超时时间、默认 Content-Type 和 Accept 头
自动合并用户传入的 headers 和默认头，不覆盖
对 GET 请求自动序列化 params 到 URL
对非 GET 请求，若传了 data，自动转为 JSON 并设 Content-Type: application/json

2. 统一错误处理与响应解析

原生 fetch 不会在 HTTP 错误状态（如 401、500）时 reject，需手动判断 response.ok 或 response.status：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

对非 2xx/3xx 响应抛出自定义错误（如 ApiError），附带 status、statusText、data
尝试用 response.json() 解析响应体；失败则 fallback 到 response.text()
将最终数据结构标准化为 { code, message, data } 格式（适配常见后端约定）

3. Token 自动注入与刷新机制（可选增强）

登录态管理常见需求：

从 localStorage / cookie 读取 token，自动加到 Authorization 请求头
遇到 401 响应时，触发 token 刷新逻辑（例如调用 /auth/refresh），成功后重发原请求
使用 Promise 队列防止并发刷新多次（避免多个请求同时 401 导致多次 refresh 调用）

4. 使用示例与调用方式

封装后使用非常简洁：

普通请求：api.get('/users', { id: 123 })
提交数据：api.post('/login', { username, password })
带自定义头或超时：api.put('/profile', { nick: 'A' }, { headers: { 'X-Trace': 'abc' }, timeout: 8000 })
错误捕获：统一用 try/catch，错误对象含 status、message、response 等字段，便于 UI 层提示或跳转