A cookie related pit to be noted when reading data using the fetch API of ES6

Time:2020-9-26

When I am doing a test of comparison between Stateful and Stateless BSP application ( mentioned in blog Stateless and Stateful – Different behavior in application side ), I meet with a strange issue.

The conclusion is stateful BSP application will handle request sequentially. Suppose in client I send two request A and B to server. Request A takes 3 seconds to finish and B 2 seconds.

A cookie related pit to be noted when reading data using the fetch API of ES6

The request is sent via jQuery API.

It means for stateful application, I will observe the following timeline in Chrome network tab:

(1) the start time of both request are almost the same, since I send out two request in client code almost at the same time.

(2) even though the second request itself takes 2 seconds to finish, the total processing time for it is 3 seconds waiting for A to finish first + 2 seconds = 5 seconds in the end.

A cookie related pit to be noted when reading data using the fetch API of ES6

The above test did verify the conclusion.
However when I change the approach to send request into ES6 fetch API,

<%@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>

the testing request for stateful application looks as below this time:

A cookie related pit to be noted when reading data using the fetch API of ES6

The two requests are handled simultaneously ( request B only takes 2 seconds to finish, no 3 seconds’ wait time for A to finish this time ), the response of second request returns first before the first, which could be observed in console:

A cookie related pit to be noted when reading data using the fetch API of ES6

why the latest ES6 API causes such discrepancy with known conclusion?
Just compare the cookie of requests sent via these two kinds of API:

A cookie related pit to be noted when reading data using the fetch API of ES6
A cookie related pit to be noted when reading data using the fetch API of ES6

Through comparison I get to know that the session cookie
sap-contextid is not sent together with request triggered by ES6 Fetch API.
Then in Fetch documentation I find out that I need to add option credentials: “include”.

A cookie related pit to be noted when reading data using the fetch API of ES6

function wrapperOnFetch(url){
 // enable session cookie sent with request
  fetch(url,{ credentials:"include" }).then(function(response){
    return response.json();
  }).then(function(json){
      console.log(url + ":" + json.message);
  });
}

After this change the stateful BSP application behaves as expected: the requests are handled in sequence.

For more original articles on Jerry, please pay attention to the official account of “Wang Zixi”:
A cookie related pit to be noted when reading data using the fetch API of ES6