0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

APIに対してPOSTした際の備忘録

Posted at

ES6(というかReact)とjQueryがデバイスで使い分けされている(PCとSPで使っているjsが違う、みたいな感じ)、変則的な環境で同一の挙動(APIに必要なデータをPOSTする)をさせる必要が出たことがあり、当然ながらそれぞれ記述がちょっと異なる形になったので、その備忘録です。
(似たような件で別の記述することがあったら随時増やそうと思います)

また、大体POSTする際はデータをjson化することが多いと思うのですが、今回の件は逆にjson化してはならず、けれどもES6ではjQueryのように連想配列状態でbodyにセットしても400エラーが出てしまったので、ならどうするかと頭を抱えた末のことだったのも、記録として残す発端だったりします(調べても、大体のところがデータをjson化させてる記述ばかりだったので…)。
あんまりなさそうなケースですが、似たようなことで頭を抱える人の助けになることがあったらこれ幸い。
後はちょっとjQuery⇔ES6で変換して記述してみたい人の参考になったりとか…するんですかね、これ。

もっと良い書き方、やり方があったら教えていただけると大変助かります。

①ES6での記述

送りたいデータを配列ではなく「URLSearchParams」や「FormData」といったオブジェクトにして送る必要がありました。
ちなみにこれをやる時はContent-Typeを指定してしまうと、ちゃんと送られない模様。

ES6
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」を指定する必要がありました。

jQuery
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);
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?