Fetch request.body 属性

在处理 HTTP 请求时，了解如何有效地发送和接收数据至关重要。request.body 属性是 Fetch API 中一个关键的组成部分，用于处理请求体的内容。本章将深入探讨 request.body 属性，并展示其在实际应用中的使用方法。

基础概念

什么是 request.body？

request.body 是一个可读流，代表了 HTTP 请求体中的数据。在使用 Fetch API 发送 POST、PUT 或其他需要请求体的请求时，你可以通过设置 request.body 来传递数据。需要注意的是，一旦从 request.body 读取过数据，它就会被消耗掉，无法再次读取。因此，在使用时需要特别小心，确保只读取一次。

如何创建请求体

请求体可以是多种格式的数据，包括 JSON、表单数据或原始字符串。创建请求体通常涉及以下几种情况：

JSON 数据

如果你需要发送 JSON 数据，可以使用 JSON.stringify() 方法将其转换为字符串，然后设置给 request.body。同时，别忘了设置正确的 Content-Type 头。

// www.javascriptcn.com code example
const data = {
    name: '张三',
    age: 30
};

fetch('/api/user', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
});

表单数据

对于表单数据，你可以使用 FormData 对象来构建请求体，并且同样需要设置相应的 Content-Type 头。

const formData = new FormData();
formData.append('username', '李四');
formData.append('password', '123456');

fetch('/api/login', {
    method: 'POST',
    body: formData
});

原始字符串

有时你也可能需要发送原始字符串作为请求体，例如上传文件或自定义文本内容。

// www.javascriptcn.com code example
const textData = '这是一段原始字符串';

fetch('/api/upload-text', {
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain'
    },
    body: textData
});

使用 read() 和 arrayBuffer()

除了直接使用 request.body，你还可以通过 read() 和 arrayBuffer() 方法来读取请求体中的数据。这些方法返回一个 Promise，可以用来异步地获取请求体的内容。

read()

read() 方法允许你逐字符地读取请求体中的内容。它返回一个包含当前读取数据的 Uint8Array 对象。由于每次调用 read() 只会读取一部分数据，你需要循环调用直到所有数据都被读取完毕。

let chunk;
while (chunk = await request.body.read()) {
    console.log(chunk);
}

arrayBuffer()

相比之下，arrayBuffer() 方法更简单，它一次性读取整个请求体并返回一个 ArrayBuffer 对象。这种方法适合于一次性读取大量数据的情况。

const buffer = await request.body.arrayBuffer();
console.log(buffer);

处理请求体的错误

在使用 request.body 时，可能会遇到各种错误，如读取失败或格式不匹配等。为了保证程序的健壮性，你需要适当地处理这些异常情况。

捕获异常

在读取请求体的过程中，你应该使用 try...catch 结构来捕获可能出现的异常。

try {
    const buffer = await request.body.arrayBuffer();
    console.log(buffer);
} catch (error) {
    console.error('读取请求体时发生错误：', error);
}

验证数据格式

根据你的需求，可能还需要验证接收到的数据是否符合预期格式。例如，如果你期望接收 JSON 数据，则应确保 Content-Type 是 application/json，并且数据能够正确解析为 JSON 对象。

// www.javascriptcn.com code example
fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
}).then(response => response.json())
.then(data => {
    if (typeof data !== 'object') {
        throw new Error('数据格式错误');
    }
    console.log('接收到的数据：', data);
}).catch(error => {
    console.error('处理数据时发生错误：', error);
});

实际应用示例

接下来我们将通过几个具体的例子来展示 request.body 的实际应用。

示例 1: 发送 JSON 数据

假设我们有一个用户注册功能，需要向服务器提交用户的姓名和年龄信息。

// www.javascriptcn.com code example
const user = {
    name: '王五',
    age: 25
};

fetch('/api/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
}).then(response => response.json())
.then(result => {
    console.log('注册成功！', result);
}).catch(error => {
    console.error('注册失败：', error);
});

示例 2: 提交表单数据

假设我们有一个登录表单，用户可以通过它提交用户名和密码进行登录。

// www.javascriptcn.com code example
const form = document.getElementById('login-form');
form.addEventListener('submit', async event => {
    event.preventDefault();

    const formData = new FormData(form);

    fetch('/api/login', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(result => {
        console.log('登录成功！', result);
    }).catch(error => {
        console.error('登录失败：', error);
    });
});

示例 3: 上传文件

假设我们需要实现一个文件上传功能，允许用户选择文件后将其上传到服务器。

// www.javascriptcn.com code example
document.getElementById('upload-button').addEventListener('click', async () => {
    const fileInput = document.getElementById('file-input');
    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append('file', file);

    fetch('/api/upload', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
    .then(result => {
        console.log('文件上传成功！', result);
    }).catch(error => {
        console.error('文件上传失败：', error);
    });
});

总结

通过本章的学习，你应该已经掌握了 request.body 属性的基本用法及其在实际开发中的应用场景。无论是发送 JSON 数据、表单数据还是原始字符串，亦或是读取请求体中的内容，都需要根据具体需求灵活运用。希望这些知识能帮助你在未来的项目中更加高效地使用 Fetch API。