JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び出ししており、これは何なのかと調べたところHTTPクライアント用のライブラリみたい。jQueryだとAjaxで対応するようなところで使うものっぽい。以下に利用方法及びソースコードのメモ。
AXIOS
公式サイト
ドキュメント
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を使う必要あり。
関連記事
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...
-
-
JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法
以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...