axiosを使用してRestAPIを呼び出す方法【React】

■はじめに

実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。

ここでは、「axios」を使用したRestAPIの実行方法を記載します。

■手順

axiosをインストールするために、以下のコマンドを実行する

npm i axios

App.jsのソースコードの全量は以下。

import React from 'react';
import axios from 'axios';
class App extends React.Component{
render()
{
function btnGetClick() {
const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
.then((res) => {
console.log(res);
})
.catch(console.error);
}
function btnPostClick() {
const data = { param : 'aa', paramtwo : 'aa' };
axios.post('https://hogehoge.com/hoge', data)
.then((res) => {
console.log(res);
})
.catch(console.error);
}
return (
<div>
<h1>Hello World</h1>
<button onClick={btnGetClick}>GET通信</button>
<button onClick={btnPostClick}>POST通信</button>
</div>
);
}
}
export default App;

以下でaxiosのインポートをしています。

import axios from 'axios';

「btnGetClick」「btnPostClick」でそれぞれ、リクエストパラメータありのAPIの実行処理を書いています。

違いは、呼び出している関数が「get」「post」なのと、第二引数(パラメータ)の指定方法です。

「get」は以下のように、「{params: [パラメータ]}」というような書き方をする必要があります。

const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
.then((res) => {
console.log(res);
})
.catch(console.error);

コメントを残す