上一篇
flxhr.js是什么文件？，怎么安装
flxhr.js 是一个轻量级的 JavaScript 库，专注于简化 XMLHttpRequest 的使用，尤其是针对跨域请求、文件上传和进度监控等场景，它通常被用于需要精细控制 AJAX 请求的浏览器环境，封装了原生 XHR 的复杂性,并提供更清晰的接口。
核心特性
- 简化方法调用：统一 GET、POST、PUT、DELETE 等请求方法。
- 自动处理数据格式：支持 JSON、FormData、Blob 等，自动设置 Content-Type。
- 跨域支持：内置对 withCredentials 和 CORS 头部的处理。
- 进度回调：提供上传与下载的实时进度事件。
- 超时与中断：可设置超时时间,并支持手动取消请求。
- 错误处理：统一捕获网络错误和 HTTP 状态码异常。
基本用法示例
| 方法 | 说明 | 参数示例 |
|---|---|---|
| flxhr.get(url, config) | 发起 GET 请求 | { params: { id: 1 }, headers: { Authorization: 'Bearer ...' } } |
| flxhr.post(url, data, config) | 发起 POST 请求 | { name: 'test' } |
| flxhr.upload(url, file, config) | 上传文件 | { onProgress: (e) => console.log(e.percent) } |
| flxhr.abort(requestId) | 取消请求 | 由返回的 requestId 标识 |
示例代码
// 发送 JSON 数据 flxhr.post('/api/data', { key: 'value' }, { headers: { 'X-Custom': 'abc' }, onSuccess: (res) => console.log(res), onError: (err) => console.error(err) }); // 上传文件并显示进度 flxhr.upload('/upload', file, { onProgress: (percent) => console.log(percent + '%'), onComplete: (response) => console.log('上传完成', response) });
配置项说明
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| method | string | 'GET' | 请求方法 |
| url | string | 必填 | 请求地址 |
| data | object | null | 请求体数据 |
| params | object | URL 查询参数 | |
| headers | object | 自定义请求头 | |
| timeout | number | 0 | 超时时间（毫秒），0 表示不限制 |
| withCredentials | boolean | false | 跨域是否携带凭证 |
| onProgress | function | null | 上传/下载进度回调 |
| onSuccess | function | null | 成功回调（状态码 2xx） |
| onError | function | null | 错误回调 |
| responseType | string | 'json' | 响应类型，如 'text'、'blob' |
请求与响应拦截
flxhr.js 通常允许通过拦截器（interceptors）在请求发送前或响应到达后处理数据：
// 请求拦截器 flxhr.interceptors.request.use((config) => { config.headers['Authorization'] = 'Bearer ' + getToken(); return config; }); // 响应拦截器 flxhr.interceptors.response.use((response) => { if (response.status === 200) { return response.data; } throw new Error('请求异常'); });
注意事项
- 该库不依赖 jQuery,可独立使用。
- 在旧版浏览器（如 IE11）中可能需要 polyfill 支持 Promise。
- 文件上传时，data 应使用 FormData 对象，库会自动识别并设置 multipart/form-data。
相关问题与解答
问题 1：flxhr.js 如何处理跨域请求时携带 Cookie？
解答：跨域请求默认不会携带 Cookie，需要手动设置 withCredentials: true，在配置项中将 withCredentials 设为 true，同时服务器端必须响应 Access-Control-Allow-Credentials: true 且 Access-Control-Allow-Origin 不能为 ,必须指定具体的域名。
flxhr.get('https://api.example.com/data', { withCredentials: true, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
问题 2：为什么上传大文件时进度回调不准确，如何优化？
解答：进度回调不准确通常由以下原因导致：
- 浏览器未使用 onprogress 事件（某些低版本浏览器不支持）。
- 服务器端未正确响应 Content-Length 头部。
- 网络质量差导致数据包分片不均匀。
优化方法：
- 确保服务器在响应头中返回 Content-Length。
- 使用 xhr.upload.onprogress 监听上传进度,而不是下载进度。
- 如果仍不准确，可手动分块上传（如每 1MB 一个分片），并在客户端累计计算已上传大小,再通过回调函数更新百分比。
flxhr.upload('/upload', file, { onProgress: (e) => { if (e.lengthComputable) { console.log('真实进度：' + Math.round(e.loaded / e.total 100) + '%'); } else { console.log('无法获取准确进度，当前已传输：' + e.loaded + ' 字节'); } } });
