在使用 Fetch API 发送 POST 请求时，通常需要指定请求的方法为 "POST"，并通过 body 参数传递要发送的数据，下面是关于如何使用 Fetch API 发送 POST 请求的详细解释和示例代码：
一、基本用法
1、设置 URL：将url 变量设置为要发送 POST 请求的后端接口 URL。
2、准备请求数据：创建一个包含要发送数据的 JavaScript 对象，例如requestData。
3、配置请求选项：在 fetch 函数的第二个参数中，指定请求方法为 'POST'，并设置请求头和请求体，请求头通常根据后端要求设置合适的 Content-Type，如 'application/json'，请求体通过body 属性传递，使用JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
4、发送请求并处理响应：使用fetch 函数发送请求，并通过then 方法处理成功的响应，使用catch 方法捕获和处理错误。
二、示例代码
以下是一个完整的示例代码，演示如何使用 Fetch API 发送 POST 请求：
const url = '/api/endpoint'; // 替换为你的后端接口 URL
const requestData = {
mmsi: 209838000,
startTime: '2024-07-10 12:00:00',
endTime: '2024-07-10 18:00:00'
};
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 根据实际情况设置请求头
},
body: JSON.stringify(requestData) // 将数据转换为 JSON 字符串
})
.then(response => response.json())
.then(data => {
console.log('Response:', data); // 输出响应数据
})
.catch(error => {
console.error('Error:', error); // 捕获和处理异常
});三、POST 请求的四种传参方式
1、JSON提交：前端传递的是键值对数据，即对象（Object），采用JSON传递参数，请求头Content-Type为application/json;charset=utf-8，注意点是既然为JSON提交，就要对参数进行序列化，即JSON.stringify(params)，否则传递到服务端的参数可能是[Object object]。
2、请求头提交：在实际开发中，遇到过不少后端开发喜欢把请求参数放在请求头，类似于get请求，即请求的参数是拼接在请求地址后面，个人觉得这种传参方式并不好，一般浏览器对URL长度是有限制的，以Chrome为例，URL最大长度正在7700个字符左右，对于post请求来说，最好参数还是放在body中。
3、普通表单提交：表单提交的方式有两种，一种是普通的表单提交，另外一种是通过FormData进行提交（主要应用在文件上传），单纯的表单提交，与上述两种参数格式上还是存在一定的差别。
4、FormData提交：使用 FormData 对象来构建请求体，适用于文件上传或多部分表单数据提交。
四、相关问答FAQs
问题1：如何在 Fetch API 中发送带有文件的 POST 请求？
答案：可以使用 FormData 对象来构建请求体，创建一个 FormData 实例，然后使用append 方法添加文件和其他字段，在 fetch 请求中设置请求体为该 FormData 实例。
问题2：如何取消使用 Fetch API 发送的请求？
答案：Fetch API 添加了一个实验性的功能，支持客户端手动取消http请求，借助 AbortSignal 接口，可以通过 AbortController 实例化一个控制器，将实例的 signal 当做请求的配置项，传递到服务端，客户端可以通过 AbortController 实例的 abort 方法，来终止当前的 http 请求。
五、小编有话说
Fetch API 作为现代浏览器提供的原生网络请求接口，具有强大的功能和灵活的使用方式，它不仅支持各种 HTTP 方法（如 GET、POST、PUT、DELETE 等），还允许开发者自定义请求头、请求体以及处理响应的方式，通过掌握 Fetch API 的基本用法和高级技巧（如取消请求、处理二进制数据等），我们可以更加高效地与后端进行数据交互，提升用户体验和开发效率，也需要注意浏览器兼容性问题，确保在目标用户群体的浏览器中能够正常使用 Fetch API。