JavaScript Fetch API メモ

JavaScript Fetch

Fetch APIはJavaScrtip標準のhttp通信の方法の1つ。
Fetch APIが導入される以前はXMLHttpRequestが一般的に使われいた。jQuery.ajaxはXMLHttpRequestが使われている。
Fetch APIはPromiseオブジェクトをベースに設計されている。
非同期でhttp通信が可能なので、レスポンスが遅い処理の場合に関係ない後続処理を、シーケンシャルに実行可能。
Fetch API - Web API | MDN

// GET
function getTodoList(){

    fetch('http://localhost:3000/api/v1/list')
        .then(function(response){
            return response.json();
        })
        .then(function(myJson){
            myJson.forEach(function(value){
                if(value.done){
                    var tag = '<li>'+ value.title +'<li>'
                    $('#done').append(tag);

                    getTodoDetail(value.id)

                }else{
                    var tag = '<li>'+ value.title +'<li>'
                    $('#notyet').append(tag);
                }
            })
        })
}

//POST
function todoDone(data){
    
    fetch('http://localhost:3000/api/v1/done',{
        method: 'POST',
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(data),
    }).then(function(response){
        console.log(response);
    })
    .catch(error => console.error(error)
    );
}