JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び出ししており、これは何なのかと調べたところHTTPクライアント用のライブラリみたい。jQueryだとAjaxで対応するようなところで使うものっぽい。以下に利用方法及びソースコードのメモ。

AXIOS

公式サイト

https://axios-http.com/ja/

ドキュメント

https://axios-http.com/ja/docs/intro

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.min.js"></script>

異なるバージョンが良い場合は以下から探す。

https://cdnjs.com/libraries/axios

ソースコード

HTTPリクエストの受け取り側(res.php)

<?php
echo json_encode($_REQUEST);

GETリクエスト

const url = './res.php?code=123&item=hoge';

axios.get(url)
//成功時の処理
.then(function( res ){

    //レスポンスデータ
    console.log(res.data); //Object { code: "123", item: "hoge" }

    //ステータスコード
    console.log(res.status); //200
})
//失敗時の処理
.catch(function( error ){

    //エラーメッセージ
    console.log(error.message);

    //エラーコード
    console.log(error.code);
})
//成否に関わらず実行される処理
.finally(function(){

});

POSTリクエスト

const url = './res.php';

const param = new URLSearchParams();
param.append('code', 234);
param.append('item', 'fuga');

axios.post(url, param)
//成功時の処理
.then(function( res ){

    //レスポンスデータ
    console.log(res.data);

    //ステータスコード
    console.log(res.status);
})
//失敗時の処理
.catch(function( error ){

    //エラーメッセージ
    console.log(error.message); //Object { code: "234", item: "fuga" }

    //エラーコード
    console.log(error.code); //200
})
//成否に関わらず実行される処理
.finally(function(){

});

ドキュメントのPOSTリクエストのまま記述するとレスポンスデータを受け取れない。URLSearchParams APIを使う必要あり。