How to get data when using ES6 fetch in Struts2? - struts2

Question

Action code:
public class ContentAction extends ActionSupport {
private String menuName;
public String getMenuName() {
return menuName;
}
public void setMenuName(String menuName) {
this.menuName = menuName;
}
}
js code:
import "es6-promise/auto";
import fetch from 'isomorphic-fetch'
export function postAction(action,url,params=[]) {
return function (dispatch) {
const data = params;
return fetch(url,{
method:"POST",
body:data//data=Object{menuName:"index"}
})
.then(response => response.json())
.then(json =>dispatch(action(json)))
}
}
but when project run, menuName is null in action.
I try to use key-value pair:
import "es6-promise/auto";
import fetch from 'isomorphic-fetch'
export function postAction(action,url,params=[]) {
return function (dispatch) {
const data = Object.keys(params).map(key =>
encodeURIComponent(key)+"="+ encodeURIComponent(params[key])).join('&');
return fetch(url,{
method:"POST",
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:data//data="menuName=index"
})
.then(response => response.json())
.then(json =>dispatch(action(json)))
}
}
use JSON:
export function postAction(action,url,params=[]) {
return function (dispatch) {
const data = JSON.stringify(params);
return fetch(url,{
method:"POST",
headers:{'Content-Type':'application/json'},
body:data//data="{"menuName":"index"}"
})
.then(response => response.json())
.then(json =>dispatch(action(json)))
}
}
use FormData:
export function postAction(action,url,params=[]) {
return function (dispatch) {
const data = new FormData();
Object.keys(params).map(key =>
data.append(encodeURIComponent(key),encodeURIComponent(params[key])));
return fetch(url,{
method:"POST",
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:JSON.stringify(data)//data.get("menuName")="index"
})
.then(response => response.json())
.then(json =>dispatch(action(json)))
}
}
all of above can not work (menuName=null in action).
but if I append key-value pair to URL directly, it works (menuName=index in action):
import "es6-promise/auto";
import fetch from 'isomorphic-fetch'
export function postAction(action,url,params=[]) {
return function (dispatch) {
const data = Object.keys(params).map(key =>
encodeURIComponent(key)+"="+ encodeURIComponent(params[key])).join('&');
return fetch(url + "?" + data,{//url.action?menuName=index
method:"POST"
})
.then(response => response.json())
.then(json =>dispatch(action(json)))
}
}
but I think this way should not be standard，it is not even post. So Where did I make a mistake?

Answer 1

If you define a method:'POST' then a method is used is POST regardless of query string parameters.
You should use URLSearchParam to build the the string of parameters in x-www-form-urlencoded format.
const uparams = new URLSearchParams();
Object.keys(params).map(key =>
uparams.append(key, params[key]));
fetch(url,{
method:"POST",
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:uparams//data="menuName=index"
})