JavaScript的Fetch API是现代前端发起网络请求的主流方案，它返回的是一个Response对象，该对象包含了请求返回的所有响应信息，包括状态码、响应头、响应体等内容。在实际开发中，我们常常需要对响应体做二次处理，或者基于原始响应生成新的响应对象来满足业务需求。
Fetch API响应对象的基本结构
Fetch API调用后返回的Response对象是不可变的，其响应体只能通过特定的方法读取，且读取操作只能执行一次。常见的响应体读取方法如下：
response.text()：将响应体解析为文本字符串response.json()：将响应体解析为JSON对象，前提是响应内容是合法的JSON格式response.blob()：将响应体解析为Blob二进制对象response.arrayBuffer()：将响应体解析为ArrayBuffer对象
需要注意的是，这些方法都返回Promise，且调用后响应体的读取流会被锁定，再次调用会抛出错误。
修改响应体的基本思路
由于原始Response对象的响应体是只读的，无法直接修改，所以我们需要先读取原始响应体的内容，处理完成后再构造一个新的Response对象。基本流程分为三步：
- 调用Fetch API获取原始Response对象
- 通过响应体读取方法获取原始数据并处理
- 使用处理后的数据和原始响应的其他配置构造新的Response对象
具体实现示例
示例1：修改JSON格式的响应体
假设接口返回的JSON数据需要额外添加一个处理时间戳字段，实现代码如下：
// 发起Fetch请求
fetch('https://ipipp.com/api/user')
.then(response => {
// 先读取原始JSON响应体
return response.json().then(originalData => {
// 处理响应体，添加自定义字段
const modifiedData = {
...originalData,
processTime: new Date().getTime()
};
// 构造新的响应对象，保留原始响应的状态码和响应头
const newResponse = new Response(JSON.stringify(modifiedData), {
status: response.status,
statusText: response.statusText,
headers: response.headers
});
return newResponse;
});
})
.then(newResponse => newResponse.json())
.then(finalData => {
console.log('处理后的响应数据:', finalData);
})
.catch(error => {
console.error('请求出错:', error);
});
示例2：修改文本格式的响应体
如果是文本类型的响应，比如接口返回纯文本，需要替换部分内容后再生成新响应，代码如下：
fetch('https://ipipp.com/api/text')
.then(response => {
// 读取原始文本响应体
return response.text().then(originalText => {
// 处理文本，替换指定内容
const modifiedText = originalText.replace('原始内容', '替换后的内容');
// 构造新的响应对象
const newResponse = new Response(modifiedText, {
status: response.status,
statusText: response.statusText,
headers: response.headers
});
return newResponse;
});
})
.then(newResponse => newResponse.text())
.then(finalText => {
console.log('处理后的文本响应:', finalText);
});
生成新响应对象的注意事项
在使用new Response()构造新响应时，需要注意以下几点：
- 第一个参数是响应体内容，支持字符串、Blob、ArrayBuffer等类型，需要和对应的响应类型匹配
- 第二个参数是可选的配置对象，其中
status设置状态码，statusText设置状态描述，headers设置响应头 - 如果需要修改响应头，不能直接修改原始Response的headers对象，需要新建一个Headers对象再传入，示例代码如下：
fetch('https://ipipp.com/api/data')
.then(response => response.json())
.then(data => {
// 新建Headers对象，复制原始响应头并添加自定义头
const newHeaders = new Headers(response.headers);
newHeaders.set('X-Custom-Header', 'custom-value');
// 构造新响应，使用新的响应头
const newResponse = new Response(JSON.stringify(data), {
status: response.status,
statusText: response.statusText,
headers: newHeaders
});
return newResponse;
});
常见问题说明
很多开发者会尝试直接修改Response对象的body属性，这是无效的操作，因为该属性是只读的，修改不会生效。另外，响应体的读取方法只能调用一次，如果需要多次使用响应数据，一定要先保存读取后的结果，再构造新响应。
如果是在Service Worker中使用Fetch API，修改响应体和生成新响应的逻辑和上述一致，常用于缓存策略的实现和请求的拦截处理。
Fetch_APIJavaScript响应体修改新响应生成修改时间：2026-06-19 11:36:18