前回await/asyncでaxiosを使いましたが、業務でも使っていきそうなので、
axiosのみにフォーカスして確認してみました。
nodeコマンドで、ターミナルからjsファイルを実行して確認しています。
axiosとは？
公式githubに書いてますが、翻訳してみると
ブラウザおよびnode.js用のPromiseベースのHTTPクライアント
みたいです！
phpで言う所のguzzleみたいな感じでhttp通信するためのライブラリになるかと思います🤔
ブラウザで使うには
普通にブラウザからformをsubmitして、テストしてみたいと思いましたが、node_modulesを読み込むには
browserifyを使う必要があるようなので、今回は割愛します。
vueで普通に使ってたけどなーと思いましたが、buildしているので、ブラウザで読み込めるようにしてくれてるんでしょうね。
axiosを使ってみる
ということで、今回は’node xxxx.js’というコマンドを打ってターミナルから確認します。
バックエンドはphpです。
axiosをinstall
npm install axios
でインストールします。
バックエンドのphpファイルを用意
受け側のプログラムを用意します。
<?php
$json_data = json_decode(file_get_contents('php://input'));
$mode = $_SERVER["REQUEST_METHOD"];
if ($mode == 'GET') {
$results = [
'status' => '200',
'mode' => $mode,
'message' => 'getアクセスしました。'
];
echo json_encode($results);
} else if ($mode == 'POST') {
$results = [
'status' => '200',
'mode' => $mode,
'param' => $json_data->param1,
'message' => 'postアクセスしました。'
];
echo json_encode($results);
}
ドキュメントルートの’testcode/axios_test’に配置して名前はindex.phpにしました。
簡単なプログラムで、requestの形式によって返すjsonの形を変えて、返しています。
$_POSTでデータが取れるかと思ったんですが、mine typeがapplication/jsonなので取れません😵
$json_data = json_decode(file_get_contents('php://input'));
でbodyのjsonデータを取得してオブジェクトにしてくれます。
axiosでpostする
axios_post_test.jsって名前で下記を作りました。
let axios = require('axios');
let param = { param1: 'hoge' };
axios.post('http://192.168.33.11/testcode/axios_test/', param)
.then(function(result) {
console.log(result.data);
console.log(result.data.status);
console.log(result.data.mode);
console.log(result.data.param);
console.log(result.data.message);
});
POSTデータにparam1 という名前で’hoge’を渡してます。
axios.postの2番目の引数にパラメータがつけれます。
axios.postの1番目の引数はアクセスするAPIのURLですね。phpファイルを置いたサーバーとファイル名を指定します。
データはPromiseを返すので、thenで受ければいいですね!
result.dataにphpファイルにアクセスした結果のjsonが入っています。
実行する
名前をaxios_post_test.jsとしたので、下記で実行します。
node axios_post_test.js
結果下記のようになります。
それぞれphpの配列で指定したデータと、渡したパラメータの値を返しているのが確認できますね。
> node axios_post_test.js
{
status: '200',
mode: 'POST',
param: 'hoge',
message: 'postアクセスしました。'
}
200
POST
hoge
postアクセスしました。
axiosでgetする
axios_get_test.jsって名前で下記を作りました。
let axios = require('axios');
axios.get('http://192.168.33.11/testcode/axios_test/')
.then(function(result) {
console.log(result.data);
console.log(result.data.status);
console.log(result.data.mode);
console.log(result.data.param);
console.log(result.data.message);
});
実行する
名前をaxios_get_test.jsとしたので、同じように実行します。
結果下記のようになりました。ちゃんと返ってきてますね！
> node axios_get_test.js
{ status: '200', mode: 'GET', message: 'getアクセスしました。' }
200
GET
undefined
getアクセスしました。
エラーだった場合は？ & finally処理
サーバー側でエラーだった場合(500ステータスを返した)と、終了処理のメソッドを書くことができるようなので確認してみました。
サーバーのGET処理の箇所を下記のように書き換えます。
if ($mode == 'GET') {
$error_flg = true;
if ($error_flg) {
$results = [
'status' => '500',
'mode' => $mode,
'message' => 'Internal Server Errorになりました!!'
];
header('HTTP/1.1 500 Internal Server Error');
echo json_encode($results);
} else {
$results = [
'status' => '200',
'mode' => $mode,
'message' => 'getアクセスしました。'
];
echo json_encode($results);
}
}
error_flgはtrue固定でエラーところしか通らないようにしました🤣
headerで500を指定して、Internal Server Errorを返しました。
実際に実装するときはtry catchでcatchした時に処理すると良さそうです。
axios_get_test.jsを下記のように書きます。
let axios = require('axios');
axios.get('http://192.168.33.11/testcode/axios_test/')
.then(function(result) {
console.log(result.data);
}).catch(function(error) {
console.log(error.response.status);
console.log(error.response.statusText);
console.log('エラーになりました。');
}).finally(function(){
console.log("finally");
});
catchとfinallyをメソッドチェーンで繋いでいます。
これでエラーになった場合はcatchに来るはず。
実行する!
> node axios_get_test.js
500
Internal Server Error
エラーになりました。
finally
500ステータスを返しているのでエラーのcatchに入ってくることが、確認できました！
response.status,response.statusTextでステータスとテキストが取得できます。
finallyはエラーでも正常でも通る箇所になります。
通信が終わる時にやる処理を書いてあげると良さそうです！
👋🏻
コメント