Fetch API 脱坑教程

通常我们在游览器请求时，发现请求失败，想就这条件重新请求调试，取出参数去其他工具调试吧，参数少还好，一旦多了也麻烦，毕竟取出来的参数也是要经过处理的。这时我们可以考虑使用游览器Fetch，实现重新请求，并且可以更改其传入参数，以方便定位问题。下面是我遇到的问题以及Fetch的一些简单使用。

一、遇到的问题

今天前端抛来一个问题，POST方式数组传参，后台接收不到list数组，然后就想定位是哪里出了问题。首先本地用postman直接访问，没出问题，那回到游览器，请求参数传过去之后，除了数组，其他的参数似乎都接收到了，那可以初步肯定数组传参时发生了变化。以前每次自己都会叫前端把请求参数都copy过来，然后自己组装用工具请求，但这效率太低了，等你搞好请求，人家都已经调好了，用前端js调吧，那更麻烦，因为你不熟悉他的代码，后来无意间发现可以直接游览器复制当次请求，更改参数，重新请求，这就是Fetch，当然也还有其他很多种方法，例如复制请求到PowerShell等等。
如果想了解上面问题的解决方法的可直接跳到《POST方式接收数组失败》

二、Fetch使用教程

作用： Fetch主要是用来发起Ajax请求的，原生的JS API，替代传统的XHR，不需要额外的jquery框架即可发起。
语法：

/* GET方式 */
fetch("URL").then(res => res.json())		//返回的是response对象
.then(data=> console.log(data))	 //打印返回体data
.catch(e => console.log("error", e));	//打印error

/* POST方式 */
fetch("URL", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
    "authorization": "undefined",
    "content-type": "application/x-www-form-urlencoded"
  },
  "referrer": "http://127.0.0.1:8080/",
  "referrerPolicy": "no-referrer-when-downgrade",      
  "body":"",
  "method": "POST",
  "mode": "cors"
}).then(res => res.json())		//返回的是response对象
.then(data=> console.log(data))	 //打印返回体data
.catch(e => console.log("error", e));	//打印error

三、实战调试例子

1、首先选中你的请求，右键，copy as Fetch，然后粘贴到游览器控制台，例：

fetch("http://127.0.0.1:8080/store/batch", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
    "authorization": "undefined",
    "content-type": "application/x-www-form-urlencoded"
  },
  "referrer": "http://127.0.0.1:8080/",
  "referrerPolicy": "no-referrer-when-downgrade",      
 "body":"userId=1&storeCodes[]=CN0fsd094&storeCodes[]=CN769fds0&storeCodes[]=CN76esd0&ifEasyBuyAgainShow=false",
  "method": "POST",
  "mode": "cors"
})

2、在后面加上

.then(res => res.json())
.then(data=> console.log(data))
.catch(e => console.log("error", e));

3、之后便是校验请求是否和你要求的一样了，特别要注意的一些参数content-type、authorization、body、method
4、特别参数：
credentials:发送带凭据的请求，参数有include(跨域源)、same-origin(在请求URL与调用脚本位于同一起源处时发送凭据)、omit(不在请求中包含凭据)
5、结果：

最后，若想了解更多关于Fetch这方面知识推荐观看：Fetch API详细使用说明