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详细使用说明