dlsjs 文档站

Chinese

English

Chinese

English

夜间模式

requestFile / requestJSON ​

requestFile 和 requestJSON 两个函数通过 axios 请求从服务器读取文件或 JSON 数据，亦可用于读取项目内静态文件。

语法 ​

javascript
requestFile(url, fileName)
requestJSON(url)

参数 ​

requestFile ​

  • url string
    • 文件路径，可以是远程地址或项目内静态资源路径。
  • fileName string
    • 文件名。可选，未传入时自动取 url 以 / 分隔后的最后一段作为文件名。

requestJSON ​

  • url string
    • JSON 文件路径，可以是远程地址或项目内静态资源路径。

返回值 ​

  • requestFile Promise<File> - 返回封装好的 File 对象。
  • requestJSON Promise<any> - 返回解析后的 JSON 数据（对象或数组）。

两个函数在请求失败时会以 reject(error.toString()) 的形式抛出错误字符串。

描述 ​

requestFile 内部使用 axios 以 responseType: 'arraybuffer' 发起 GET 请求，将响应数据通过 new File([res.data], fileName) 封装为 File 对象返回。若未传入 fileName，则按 / 分割 url 取最后一段作为文件名。

requestJSON 使用 axios 以 responseType: 'json' 发起 GET 请求，直接返回 res.data（解析后的 JSON 对象）。

两个函数均可用于读取项目内静态文件（如 public 目录下的资源），也可用于请求远程地址，但远程地址需配置跨域访问。两个函数均依赖 axios。

注意事项 ​

  1. 两个函数均依赖 axios，使用前需确保已安装并正确引入 axios。
  2. 请求远程地址需服务端配置 CORS，否则会被浏览器同源策略拦截。
  3. requestFile 使用 arraybuffer 接收数据，适合二进制文件（图片、压缩包等）；文本文件亦可使用，但读取后需自行处理编码。
  4. requestJSON 依赖服务端返回正确的 Content-Type: application/json，否则可能拿到原始字符串。
  5. 错误处理以 error.toString() 抛出字符串而非 Error 对象，catch 中拿到的是字符串信息。
  6. 未传入 fileName 时自动解析逻辑不会处理查询参数，若 URL 含查询字符串建议显式传入文件名。

示例 ​

读取项目内文件为 File 对象 ​

读取项目内 JSON ​

浏览器兼容性 ​

  • 两个函数基于 axios 实现，兼容性取决于 axios 支持的浏览器范围。
  • File 构造函数在 IE10+ 及所有现代浏览器中可用。
  • responseType: 'arraybuffer' 与 responseType: 'json' 在所有现代浏览器中可用。

性能考虑 ​

  • 时间复杂度: 取决于网络请求耗时与文件大小，本身无复杂计算。
  • 内存占用: requestFile 会将整个文件加载到内存中（arraybuffer），不适合读取超大文件。
  • 两个函数均使用 Promise 异步处理，不会阻塞主线程。
  • requestFile 每次调用都会创建新的 File 对象，重复请求相同资源建议做缓存。

相关函数 ​