素のJavaScriptのみでのAjax共通ロジック

最近はjQuery使いたくない時もあるので、これもメモ

commonajax.js

//-----------------------------------------------
// 素のJavaScriptのみでのAjax共通ロジック
// @param url   リクエスト先
// @param requestJson リクエストデータ(json形式)
// @param callback 取得後実行処理
// @param cbparam 取得後実行処理に対する引数
//-----------------------------------------------
const commonajax = function(url, requestjson, callback, cbparam){

    fetch(url,{
        method : "POST",
        body : JSON.stringify(requestJson),
        headers: {"Content-Type": "application/json; charset=utf-8"},
    })
    .then(function(res){
        return res.json(); 
    })
    .then(function(data){
        // 返されたデータ(json) 
        if(callback) callback(data, cbparam);
    })
    .catch(function(err){
        // エラー処理
        console.error(err);
    });
}

使い方

{"reqname1":"name1","reqname2":"name2"} 

みたいなjsonが帰ってくるとして

temp.js

window.addEventListener("load", function(){
    //イベントトリガー
    var getbtn = document.getElementById("getbtn");
    if(getbtn){
        //クリックしたとき
        getbtn.addEventListener("click", function(){
            commonajax("hoge/ajax",
            {reqcode:"001"}
            setdata,
            {setid1:"field1",setid2:"field2"});
        });
        
        //事後処理
        var setdata = function(data, param){
        	console.log(data)
        	var elem1 = document.getElementById(params["setid1"]);
        	if(elem1) elem1.value = data["reqname1"];
        	var elem2 = document.getElementById(params["setid2"]);
        	if(elem2) elem2.value = data["reqname2"];
        }            
    }    
});

使い方の動作確認はまだしてない(^^;