JavaScript 中 Fetch 怎么处理文本文件的异步读取-js教程-PHP中文网

fetch读取文本文件需调用response.text()获取字符串，该方法返回promise且默认utf-8解码；gbk等编码需用textdecoder手动解码arraybuffer；使用时应处理http错误和cors限制。

javascript 中 fetch 怎么处理文本文件的异步读取

Fetch 读取文本文件非常直接，核心就是调用 response.text() 方法获取字符串内容。

用 fetch 获取文本内容

fetch 默认返回一个 Promise，解析成 Response 对象后，调用 .text() 方法即可拿到纯文本（如 .txt、.csv、.json 文件内容）。

确保请求地址正确，且服务端允许跨域（CORS），否则会报错
.text() 本身也返回 Promise，需用 await 或 .then() 处理
若文件较大，.text() 会等整个响应体加载完成才 resolve，不支持流式读取

基础写法示例

最简方式：

const content = await fetch('data.txt').then(r => r.text());

更推荐带错误处理的写法：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

try {
  const res = await fetch('notes.md');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const text = await res.text();
  console.log(text); // 原始字符串
} catch (err) {
  console.error('读取失败：', err.message);
}

处理编码问题（如 GBK 文件）

fetch 默认按 UTF-8 解码。如果文本是 GBK、BIG5 等编码，.text() 会乱码——此时不能靠 fetch 直接解决，需借助第三方库（如 text-encoding 或 iconv-lite 的浏览器兼容方案）手动解码 ArrayBuffer：

先用 response.arrayBuffer() 获取二进制数据
再用解码库将 ArrayBuffer 按指定编码转成字符串
例如：new TextDecoder('gbk').decode(buffer)（现代浏览器支持部分编码）

读取后怎么用？

得到字符串后，可按需处理：

按行分割：text.split(/\r\n|\n/)
解析 CSV：Papa.parse(text, { header: true })（配合 Papa Parse 库）
渲染到页面：document.getElementById('output').textContent = text
作为配置加载：const config = JSON.parse(text)（前提是内容是合法 JSON）

不复杂但容易忽略细节，关键是分清 fetch 流程和解码环节，别把编码问题误认为请求失败。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南