Fetch request.bytes() 方法

在 Web 开发中，处理网络请求是至关重要的。Fetch API 提供了一种现代的方式来发起 HTTP 请求，并且比 XMLHttpRequest 更加强大和灵活。尽管 Fetch API 并没有直接提供 request.bytes() 方法，但我们可以通过其他方式来获取请求体的字节数据。

使用 FormData 对象

如果你需要处理表单数据，可以使用 FormData 对象。虽然它本身并不直接提供字节数据，但你可以将它转换为 Blob 或者 ArrayBuffer 来获取原始字节数据。

示例代码

// javascriptcn.com 代码示例
const formData = new FormData();
formData.append('username', 'exampleUser');
formData.append('password', 'examplePass');

// 将 FormData 转换为 Blob
formData.getBlob((blob) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onloadend = function () {
        const arrayBuffer = reader.result;
        console.log(arrayBuffer); // ArrayBuffer 对象
    };
});

使用 Blob 对象

Blob 对象表示一个不可变的、原始数据的类文件对象。你可以使用它来存储二进制数据，例如图像或音频文件。

示例代码

// javascriptcn.com 代码示例
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

const reader = new FileReader();
reader.readAsArrayBuffer(blob);

reader.onloadend = function () {
    const arrayBuffer = reader.result;
    console.log(arrayBuffer); // ArrayBuffer 对象
};

使用 ArrayBuffer 对象

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。你可以通过 ArrayBuffer 获取到字节数据。

示例代码

// javascriptcn.com 代码示例
const buffer = new ArrayBuffer(8); // 创建一个8字节的ArrayBuffer

const view = new Uint8Array(buffer); // 创建一个视图来读取字节数据
view[0] = 65; // 设置第一个字节为 'A'
view[1] = 66; // 设置第二个字节为 'B'

console.log(view); // 输出：Uint8Array [ 65, 66 ]

// 使用 Fetch 发送 ArrayBuffer 数据
fetch('https://example.com/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/octet-stream'
    },
    body: buffer
});

使用 ReadableStream 对象

ReadableStream 是一种用于表示异步读取的数据源的对象。它非常适合处理流式数据，如大文件上传或实时数据流。

示例代码

// javascriptcn.com 代码示例
const stream = new ReadableStream({
    start(controller) {
        controller.enqueue(new TextEncoder().encode('Hello, world!'));
        controller.close();
    }
});

fetch('https://example.com/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain'
    },
    body: stream
});

处理响应体的字节数据

当处理响应体时，你可以使用 Response.arrayBuffer() 方法来获取字节数据。

示例代码

fetch('https://example.com/api/data')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
        console.log(arrayBuffer); // ArrayBuffer 对象
    })
    .catch(error => console.error('Error:', error));

总结

尽管 Fetch API 没有直接提供 request.bytes() 方法，但你可以通过多种方式来获取和处理请求体及响应体的字节数据。这些方法包括使用 FormData、Blob、ArrayBuffer 和 ReadableStream 等对象。通过这些工具，你可以有效地处理各种类型的二进制数据，从而增强你的前端应用功能。