request 函数封装 xmlhttprequest,支持 get/post 自动适配、超时/错误分类捕获、promise 返回及 json/text 响应自动处理,参数可配置,兼顾兼容性与现代用法。

写一个通用 AJAX 封装函数,核心是把重复逻辑收口、参数可配置、错误可捕获、调用够简洁。不用第三方库,原生 XMLHttpRequest 就能搞定,兼顾兼容性与现代用法。
基础结构:统一入口 + 参数驱动
所有请求走同一个函数,比如叫 request,接收一个配置对象:
- url:必填,请求地址
-
method:可选,默认
'GET',支持'POST'/'PUT'/'DELETE' -
data:可选,请求数据(对象、字符串或
FormData) -
headers:可选,自定义请求头,如
{ 'Authorization': 'Bearer xxx' } -
timeout:可选,毫秒级超时时间(如
10000) -
responseType:可选,设为
'json'自动解析,'text'或留空则返回原始字符串
GET 与 POST 的自动适配
封装要自动处理两种最常用方式的差异:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- GET 请求:把
data对象转成 query 字符串,拼在 URL 后,例如/api/user?id=1&name=test - POST 请求:若传的是普通对象,自动
JSON.stringify并设置Content-Type: application/json;若传的是FormData,不设头、直接发——让浏览器自己处理边界 - 手动拼接 URL 时加时间戳或随机数(如
&_t=1724196240123),避免 IE/旧浏览器缓存问题
状态与错误的清晰反馈
原生 xhr 的状态码和网络异常容易混在一起,封装里要区分处理:
- HTTP 状态码在
200–299或304视为成功,否则归为“响应失败” - 触发
onerror、ontimeout、onabort时,统一 reject 并抛出带类型信息的错误,例如:new Error('Network Error')、new Error('Timeout') - 响应体是 JSON 但解析失败(比如返回了 HTML 错误页),也单独 throw,方便上层识别
支持 Promise 和 async/await 调用
函数必须返回 Promise,这是现代封装的关键:
- 内部用
new Promise((resolve, reject) => { ... })包裹 XHR 流程 - 成功时 resolve 数据(已按
responseType处理好) - 失败时 reject 错误实例,不吞掉异常
- 这样就能直接
await request({ url: '/api/list' }),也能链式调用.then().catch()
不复杂但容易忽略。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










