JavaScript中使用Promises/Fetch提取文本文件内容的方法

嘿，我懂你遇到的问题啦！你现在打印出来的sampleResp和sample2Resp其实是Response对象，这只是fetch请求返回的响应元数据（比如状态码、headers这些），还没拿到文件里的实际文本内容呢。

fetch API的工作逻辑是这样的：它返回的第一个Promise会解析成Response对象，你得再调用这个对象的.text()方法——这个方法本身也返回一个Promise——才能把响应体转换成纯文本。

下面给你两种可行的修改方案：

方案一：直接在fetch链中解析文本 #

这种写法更简洁，直接把每个fetch请求的结果转换成文本Promise：

function getSampleText() {
  Promise.all([
    // 对每个fetch的Response调用.text()，拿到文本内容的Promise
    fetch('sample.txt').then(resp => resp.text()),
    fetch('sample2.txt').then(resp => resp.text())
  ]).then(([sampleText, sample2Text]) => {
    // 这里就能直接拿到两个文件的文本啦
    console.log('第一个文件内容:', sampleText);
    console.log('第二个文件内容:', sample2Text);
  }).catch(error => {
    // 别忘了处理错误！比如文件找不到、网络失败的情况
    console.error('获取文件时出错:', error);
  });
}

方案二：先获取所有Response，再统一解析文本 #

如果你需要先对Response做一些额外处理（比如检查状态码），可以用这种写法：

function getSampleText() {
  Promise.all([fetch('sample.txt'), fetch('sample2.txt')])
    .then(allResp => {
      // 先检查每个响应是否成功（状态码200-299）
      allResp.forEach(resp => {
        if (!resp.ok) {
          throw new Error(`请求失败：${resp.status}`);
        }
      });
      // 把所有Response转换成文本Promise，再用Promise.all等待完成
      return Promise.all(allResp.map(resp => resp.text()));
    })
    .then(([sampleText, sample2Text]) => {
      console.log('第一个文件内容:', sampleText);
      console.log('第二个文件内容:', sample2Text);
    })
    .catch(error => {
      console.error('获取文件时出错:', error);
    });
}

关键知识点： #

• fetch返回的Promise不会直接解析成响应体内容，而是先给你Response对象，让你自己选择解析方式（比如.text()纯文本、.json()JSON数据、.blob()二进制数据等）。
• .text()方法是异步的，所以必须把它放到Promise链里，确保等待解析完成后再处理结果。
• 永远记得加上.catch()来处理异步操作中的错误，避免控制台报错却找不到原因。

内容的提问来源于stack exchange，提问作者Leia_Organa