非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。

非同期通信に関しては長い間、$.ajaxを使っておりました。

フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパターンです。今でもレガシーな現場やプロダクトではこれが多いですね・・

$.ajaxでもうまく関数化しておけば、単一の非同期通信ならコールバック地獄にはなりません。

まずい点としては複数の非同期通信などが絡んだ場合にコールバック地獄になりやすい(関数化して、コールバック地獄にならなかったとしても処理の流れがおいずらい)ので非同期通信がガンガン使われるような場合はやはりPromiseを使った方が良いでしょう。

Promiseを使った非同期処理

最初聞いたときはよくわからなかったんですが、プログラミングは理解が半分、慣れが半分なので、ざっくり理解したあとは色々なコードを見ていくことで理解が深まりました。

受験生の時にも感じましたが、「わかれば解ける」ではなく「解ければわかる」ですね。

そんなんで、非同期通信がらみをまとめ。

Contents

1 jQueryを使ったajax
2 fetch
3 axios

jQueryを使ったajax

    let ajaxPrefProp = {
        url:'/library/ajaxpost.php',
        type:'POST',
        //正しくはContent-TypeとdataTypeを設定しないと自動判定して飛んでします
        contentType: 'application/json',
        data:JSON.stringify({
            'user_id':'aaaa',
            'password':'bbbb'
        })
    }
    //jqueryAjax
    function jqueryAjax() {
        $.ajax(ajaxPrefProp)
          .done((data) => {
            console.log("--jqueryAjax success--");
            console.log(data)
          })
          .fail((err) => {
            console.log("--jqueryAjax fail--");
            console.log(err)
          })
          .always((data) =>{
            console.log("--jqueryAjax end--");
            console.log(data);
          })
     }     
     console.log("--jqueryAjax start--");
     jqueryAjax()

let ajaxPrefProp = {

url:'/library/ajaxpost.php',

type:'POST',

//正しくはContent-TypeとdataTypeを設定しないと自動判定して飛んでします

contentType: 'application/json',

data:JSON.stringify({

'user_id':'aaaa',

'password':'bbbb'

})

}

//jqueryAjax

function jqueryAjax() {

$.ajax(ajaxPrefProp)

.done((data) => {

console.log("--jqueryAjax success--");

console.log(data)

})

.fail((err) => {

console.log("--jqueryAjax fail--");

console.log(err)

})

.always((data) =>{

console.log("--jqueryAjax end--");

console.log(data);

})

}

console.log("--jqueryAjax start--");

jqueryAjax()

jQueryで古くからよく使われるパターンです。

内部ではXMLHttpRequestというオブジェクトが使われています。

Promiseがないので、これ単独ではいいですが、複数の非同期通信の時にカオスになります。

failやalwaysもしっかり、書いておきましょう。特にローディング処理などがある場合、always書いておかないと対処仕切れません。

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！

fetch

    function fetchApi() {

        let url = '/library/ajaxpost.php';

        return fetch(url,{
            method:'POST',
            headers: {
             "Content-Type": "application/json"
            },
            body: JSON.stringify({
                'user_id':'aaaa',
                'password':'bbbb'
            })
        })
        .then((res) => {
            console.log('--fetch 1段目then--')
            return res.json();
        })

    }

    console.log("--fetch start--");
    fetchApi().then((res) => {
        //resolve時ここにくる
        console.log('--fetch 2段目(resolve)then--')
        console.log(JSON.stringify(res))
    })
    .catch((err) => {
        //reject時ここにくる
        console.log("--fetch 2段目(reject) err end--")
        console.log(err)
    }).finally((data) =>{
        console.log('--fetch always--');
    });

function fetchApi() {

let url = '/library/ajaxpost.php';

return fetch(url,{

method:'POST',

headers: {

"Content-Type": "application/json"

body: JSON.stringify({

'user_id':'aaaa',

'password':'bbbb'

})

.then((res) => {

console.log('--fetch 1段目then--')

return res.json();

})

}

console.log("--fetch start--");

fetchApi().then((res) => {

//resolve時ここにくる

console.log('--fetch 2段目(resolve)then--')

console.log(JSON.stringify(res))

})

.catch((err) => {

//reject時ここにくる

console.log("--fetch 2段目(reject) err end--")

console.log(err)

}).finally((data) =>{

console.log('--fetch always--');

});

JavaScriptの非同期通信は、XMLHttpRequestを使ってHTTPリクエストを使ったものが主流で$.ajaxはこれをラッピングしたものです。

さらにこれをよりシンプルにし、Promiseを返すようにしたものが、fetchになります。

Promiseを返しますので、結果を受ける側で処理を展開することができます。

POSTする時にheadersをしっかり定義し、JSON.Stringfyを忘れないようにしましょう。

ajaxだと適当に書いても動いてしまいます・・(汗)

Fetch API について

JavaScriptのFetch APIを利用してリクエストを送信する

ちなみにIEなどではそのままでは動かないようです・・・

axios

    //axios
    function axiosApi() {
        let url = '/library/ajaxpost.php';

        return axios.post(url,{
            'user_id':'aaaa',
            'password':'bbbb'
        })
    }


    console.log("--axios start--");

    axiosApi()
    .then((data) => {
        //resolve時ここにくる
        console.log('--axios then--')
        console.log(data)
    })
    .catch((err) => {
        //普通の404、500エラー
        console.log('--axios error--')
        console.log(err);
    })
    .finally((data) => {
        //dataはない
        console.log('--axios always--');
    });

//axios

function axiosApi() {

let url = '/library/ajaxpost.php';

return axios.post(url,{

'user_id':'aaaa',

'password':'bbbb'

})

}

console.log("--axios start--");

axiosApi()

.then((data) => {

//resolve時ここにくる

console.log('--axios then--')

console.log(data)

})

.catch((err) => {

//普通の404、500エラー

console.log('--axios error--')

console.log(err);

})

.finally((data) => {

//dataはない

console.log('--axios always--');

});

Promiseをディフォルトで返す、メソッドで

XMLHttpRequestの生での書き方のjQueryラッパーが$.ajax
Promiseを返す、ラッパーがaxios

になるようです。

Promiseを使うかつライブラリを入れて問題ないのであればこれを使いましょう。

axiosの使い方まとめ (GET/POST/例外処理)