勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

あるサイトのソースコードを拝見していると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を使う必要あり。

 - JavaScript

  関連記事

円形のプログレスバーをprogressbar.jsで実装する方法

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...