Fetch 发送 POST 请求-JavaScript中文网-JavaScript教程资源分享门户

基本概念

在现代 Web 开发中，处理 HTTP 请求是常见的需求。fetch() API 是一种强大且灵活的工具，用于发起网络请求。本章将详细介绍如何使用 fetch() 发送 POST 请求。

准备工作

首先，确保你的环境支持 ES6 及以上版本，因为 fetch() API 是基于 Promise 的，而 Promise 是 ES6 引入的一个新特性。如果你的项目使用的是旧版浏览器或 Node.js 环境，请考虑使用 polyfill 或者其他兼容性解决方案。

创建一个简单的 POST 请求

发送一个基本的 POST 请求非常简单。你需要做的就是调用 fetch() 方法，并指定请求的 URL 和请求选项。以下是一个简单的示例：

// javascriptcn.com 代码示例
const url = 'https://example.com/api/data';

fetch(url, {
    method: 'POST', // 指定请求方法为 POST
    headers: {
        'Content-Type': 'application/json' // 设置请求头，指明数据格式为 JSON
    },
    body: JSON.stringify({
        name: 'John Doe',
        age: 30
    }) // 将 JavaScript 对象转换为 JSON 字符串
})
.then(response => response.json()) // 将响应体转换为 JSON 对象
.then(data => console.log(data)) // 输出响应数据
.catch(error => console.error('Error:', error)); // 处理错误

在这个例子中，我们向 https://example.com/api/data 发送了一个 POST 请求。请求体包含了一个简单的 JSON 对象，该对象包含了用户的名字和年龄信息。

自定义请求头

在某些情况下，你可能需要自定义请求头，例如设置认证令牌、自定义 Content-Type 等。这可以通过在请求选项中添加 headers 属性来实现。下面的例子展示了如何添加一个自定义的请求头：

// javascriptcn.com 代码示例
const url = 'https://example.com/api/data';
const token = 'your-token-here'; // 认证令牌

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}` // 添加自定义请求头
    },
    body: JSON.stringify({
        name: 'Jane Doe',
        age: 25
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们添加了一个 Authorization 请求头，用于携带认证令牌。这样可以确保服务器能够验证客户端的身份。

处理不同的响应状态

当发送 POST 请求时，服务器可能会返回各种不同的响应状态码。为了确保程序能够正确地处理这些状态码，你可以检查响应对象的 status 属性。下面是一个示例：

// javascriptcn.com 代码示例
const url = 'https://example.com/api/data';
const token = 'your-token-here';

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify({
        name: 'Alice Smith',
        age: 40
    })
})
.then(response => {
    if (response.ok) { // 检查响应是否成功
        return response.json();
    } else {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们使用了 response.ok 来判断响应是否成功。如果响应不成功，则抛出一个错误并被捕获到 catch 块中进行处理。

使用 FormData 发送表单数据

除了 JSON 数据之外，你还可以使用 FormData 对象来发送表单数据。这对于上传文件或其他类型的二进制数据特别有用。下面是一个示例：

// javascriptcn.com 代码示例
const url = 'https://example.com/api/upload';
const formData = new FormData();

formData.append('username', 'user123');
formData.append('file', document.querySelector('#fileInput').files[0]);

fetch(url, {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们创建了一个 FormData 对象，并使用 append 方法添加了表单数据。然后，我们将这个 FormData 对象作为请求体发送出去。

结束语

通过本章的学习，你应该已经掌握了如何使用 fetch() API 发送 POST 请求，并能够根据实际需求对请求进行各种自定义配置。希望这些知识能帮助你在未来的 Web 开发工作中更加得心应手。