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にて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...