ES6(というかReact)とjQueryがデバイスで使い分けされている(PCとSPで使っているjsが違う、みたいな感じ)、変則的な環境で同一の挙動(APIに必要なデータをPOSTする)をさせる必要が出たことがあり、当然ながらそれぞれ記述がちょっと異なる形になったので、その備忘録です。
(似たような件で別の記述することがあったら随時増やそうと思います)
また、大体POSTする際はデータをjson化することが多いと思うのですが、今回の件は逆にjson化してはならず、けれどもES6ではjQueryのように連想配列状態でbodyにセットしても400エラーが出てしまったので、ならどうするかと頭を抱えた末のことだったのも、記録として残す発端だったりします(調べても、大体のところがデータをjson化させてる記述ばかりだったので…)。
あんまりなさそうなケースですが、似たようなことで頭を抱える人の助けになることがあったらこれ幸い。
後はちょっとjQuery⇔ES6で変換して記述してみたい人の参考になったりとか…するんですかね、これ。
もっと良い書き方、やり方があったら教えていただけると大変助かります。
①ES6での記述
送りたいデータを配列ではなく「URLSearchParams」や「FormData」といったオブジェクトにして送る必要がありました。
ちなみにこれをやる時はContent-Typeを指定してしまうと、ちゃんと送られない模様。
let _endPoint = 'APIのURL';
let _postdata = new URLSearchParams();
_postdata.append('keyA', 'valueA');
if (条件分岐){
_postdata.append('keyB', 'valueB-1');
} else {
_postdata.append('keyB', 'valueB-2');
}
let _options = {
method : 'POST',
mode : 'cors',
credentials: 'include',
headers : {
'pragma' : 'no-cache',
'cache-control' : 'no-cache',
'X-Requested-With' : 'XMLHttpRequest'
},
body : _postdata
};
fetch(_endPoint, _options)
.then(_res => {
if (_res.status===200){
return _res;
} else {
throw Error(_res.status);
}
})
.then(
(_result) => {
console.log('success');
},
(_error) => {
console.log(_error);
}
)
②jQueryでの記述
json化がいらない(してはいけない)ケースなのですが、dataTypeは「json」を指定する必要がありました。
var _postAjax = function(_data) {
"use strict";
return $.ajax({
url: 'APIのURL',
dataType: 'json',
type: 'POST',
data: _data,
crossDomain: true,
cache: false,
async: false,
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
complete: function(xhr, txtStatus){
switch(xhr.status){
case 200 :
console.log('success');
break;
default :
console.log('error: ' + xhr.status);
break;
}
}
});
}
var _postData = {
keyA : valueA,
keyB : null
};
if (条件分岐){
_postData.keyB = 'valueB-1';
} else {
_postData.keyB = 'valueB-2';
}
_postAjax(_postData);