ES6 Fetch API和Cookie相关的知识点
Jerry Wang曾經(jīng)寫過一篇比較web應(yīng)用處于stateful和stateless不同狀態(tài)下的行為差異，發(fā)表在SAP社區(qū)上：
https://blogs.sap.com/2017/03/31/stateless-and-stateful-different-behavior-in-application-side/
結(jié)論就是stateful的BSP應(yīng)用會(huì)通過串行方式依次處理傳進(jìn)來的請(qǐng)求。
看這個(gè)例子，客戶端發(fā)送A和B兩個(gè)請(qǐng)求給服務(wù)器，兩個(gè)請(qǐng)求分別需要3秒和2秒完成。
對(duì)于stateful BSP應(yīng)用來說，因?yàn)槭谴刑幚?#xff0c;所以第二個(gè)請(qǐng)求實(shí)際上需要3+2=5秒才能從服務(wù)器端返回，這一點(diǎn)在Chrome開發(fā)者工具的network標(biāo)簽里觀察得很清楚。
大家能發(fā)現(xiàn)上圖的客戶端請(qǐng)求發(fā)送我用的是jQuery。當(dāng)我換成ES6的fetch API時(shí)，我發(fā)現(xiàn)一切不再工作了。
源代碼如下：
<%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <!DOCTYPE html> <html> <head> <title>Jerry Test Stateful</title> </head> <body> <button onclick="fire()">Fire two request</button> <script> function wrapperOnFetch(url){fetch(url).then(function(response){return response.json();}).then(function(json){console.log(url + ":" + json.message);}); } function fire(){wrapperOnFetch("first.json");wrapperOnFetch("second.json"); } </script> </body> </html>此時(shí)，stateful BSP應(yīng)用對(duì)這兩個(gè)請(qǐng)求的處理表現(xiàn)得像并行處理一樣。
為了找到引起jQuery和ES6 fetch API的差異原因，我比較了兩種發(fā)送的HTTP請(qǐng)求，發(fā)現(xiàn)了一些差異：
通過jQuery.ajax方法發(fā)送的請(qǐng)求，帶有Cookie：
而ES6 fetch API發(fā)送的則沒有：
在fetch的官方文檔里發(fā)現(xiàn)了一個(gè)參數(shù)：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
credentials: “include”.
帶上之后，fetch API的請(qǐng)求也帶有期望的cookie，并且之后行為完全和jquery的AJAX方法一致了：同時(shí)到達(dá)服務(wù)器的兩個(gè)請(qǐng)求按照串行方式依次被處理。
要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的ES6 Fetch API和Cookie相关的知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 业务安全与风控
- 下一篇： SAP Fiori Launchpad的