本文介绍使用前端使用Fetch时各种响应体数据读取方式
1. res.blob()
res.blob()方法用于获取响应体的二进制数据，并将其存储为Blob对象。Blob代表了一种不可变的、原始数据的类文件对象。它适用于处理如文件和图像等二进制数据。
适用场景：
- 文件下载
- 图像处理
- 生成文件链接供用户下载
示例代码：
fetch(url).then(res => res.blob()).then(blob => {
// 创建一个链接并模拟点击以下载文件
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'filename.ext';
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
});
2. res.arrayBuffer()
res.arrayBuffer()方法返回一个Promise，该Promise解析为响应体的ArrayBuffer对象。ArrayBuffer是一个代表了固定长度的原始二进制数据缓冲区，它不能直接操作，但可以转换为类型化数组。
适用场景：
- 需要直接操作二进制数据
- 转换为特定类型的数组（如
Uint8Array）
示例代码：
fetch(url).then(res => res.arrayBuffer()).then(buffer => {
const uint8Array = new Uint8Array(buffer);
// 进行二进制数据处理
});
3. res.text()
res.text()方法返回一个Promise，该Promise解析为响应体的文本内容。当响应体包含文本数据时，如HTML、CSS、JavaScript代码或纯文本。
适用场景：
- 读取文本文件
- 获取HTML内容
- 处理纯文本数据
示例代码：
fetch(url).then(res => res.text()).then(text => {
// 处理文本数据
console.log(text);
});
4. res.json()
res.json()方法返回一个Promise，该Promise解析为响应体的JSON内容。当服务器返回JSON格式的数据时，这是最直接的方法来获取JavaScript对象。
适用场景：
- 读取API返回的JSON数据
- 处理复杂的响应结构
示例代码：
fetch(url).then(res => res.json()).then(json => {
// 处理JSON对象
console.log(json);
});
5. res.formData()
res.formData()方法返回一个Promise，该Promise解析为响应体的FormData对象。FormData接口提供了一种表示表单数据的键值对的方法。
适用场景：
- 处理表单数据
- 上传文件后读取响应数据
示例代码：
fetch(url).then(res => res.formData()).then(formData => {
// 处理表单数据
for (const pair of formData.entries()) {
console.log(`${pair[0]}: ${pair[1]}`);
}
});
6. res.body.getReader()
res.body.getReader()方法用于读取响应体的原始数据流。它返回一个ReadableStreamDefaultReader对象，该对象可以用于按块读取数据。
适用场景：
- 读取大量数据，如大型文件
- 流式处理数据，边读边处理
示例代码：
fetch(url).then(res => {
// 创建一个读取器，用于读取响应体的数据流
const reader = res.body.getReader();
let bin = null;
// 定义一个递归函数来处理读取到的数据块
const read = ({ done, value }) => {
// 如果读取完成，则返回累积的二进制数据
if (done) return resolve(bin);
if (bin !== null) {
const newBin = new Uint8Array(bin.length + value.length);
newBin.set(bin);
newBin.set(value, bin.length);
bin = newBin;
} else bin = value;
// 继续读取下一个数据块
reader.read().then(read);
};
// 开始读取第一个数据块
reader.read().then(read);
});
综合对比
以下表格对比了上述各种响应体数据读取方式的特点：
| 方法名 | 返回类型 | 适用场景 | 备注 |
|---|---|---|---|
res.blob() | Blob | 文件下载、图像处理、生成文件链接供用户下载 | 代表不可变的、原始数据的类文件对象 |
res.arrayBuffer() | ArrayBuffer | 需要直接操作二进制数据、转换为特定类型的数组 | 表示固定长度的原始二进制数据缓冲区 |
res.text() | String | 读取文本文件、获取HTML内容、处理纯文本数据 | 返回响应体的文本内容 |
res.json() | Object | 读取API返回的JSON数据、处理复杂的响应结构 | 直接解析为JavaScript对象 |
res.formData() | FormData | 处理表单数据、上传文件后读取响应数据 | 提供了一种表示表单数据的键值对的方法 |
res.body.getReader() | ReadableStreamDefaultReader | 读取大量数据、流式处理数据，边读边处理 | 用于按块读取数据，适用于流式数据处理和大型文件读取 |
