浏览器中的JS-通过fetch学习指定请求方法和请求体

这是我参与11月更文挑战的第18天, 活动详情查看：2021最后一次更文挑战

前言

通过前几篇文章我们学习记录了浏览器中的 JS-fetch()请求相关知识点, 另有更文其他各知识点小结的相关阅读: list:

上文入门学习了通过 fetch()上传文件, 虽然现代化项目开发中大部分都有使用 axios 请求库来处理请求, 还是要学习点基础原理. 本文继续来学习关于为 fetch 指定请求方法和请求体

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

前文中学习的 fetch() 请求的响应数据根据返回的状态码来判断是否返回正确的数据. 前几个例子中, 每个 fetch 请求使用的请求方法都是为 'GET', 而且只是个简单请求, 并未涉及到复杂的参数问题.

除了前文中使用GET方法发送请求, 我们还可以使用不同的请求方法: 比如

POST, PUT 或者 DELETE 来请求操作数据; 获取数据(GET 或 HEAD ).

比如只使用两个参数的 fetch 发起请求:

fetch(url, {
  method: 'POST',
})
  .then((res) => res.json())
  .then(handleRes)
复制代码

上面的请求方法并没有包含具体的请求体. 而 POST 和 PUT 请求通常都有一个请求体, 用于向服务器发送数据. GET 或 HEAD 这两个方法不支持请求体.

其他支持请求体的方法都可以在选项对象中设置 body 属性来指定请求体:

fetch(url, {
  method: 'POST',
  body: '要向服务器发送的数据, 这里是一个字符串, 当然还可以有很多种, 比如: 一个对象等',
})
复制代码

在指定请求体时, 浏览器会自动为请求添加合适的请求头. 比如上面的字符串请求体, 则浏览器会自动添加 "Content-Type"的头部是 "text/plain;charset=UTF-8".

当然请求体还可能是一个json 对象, 如下:

fetch(url, {
  method: 'POST',
  headers: new Headers({ 'Content-Type': 'application/json' }),
  body: JSON.stringfy(requestBody),
})
复制代码