ajaxやfetch、axiosをPOSTでAPI接続する方法〜リクルート A3RTのTalk APIを取得例

ajaxやfetch、axiosなどでAPI接続するための方法をリクルートのA3RTで試しました。
getなら比較的簡単に取得できますが、post指定の場合はちょっと難易度が上がります。参考にしてください。

今回はリクルート　A3RTのTalk APIを取得します。ここで提供するAPIはpostを使う必要があります。
　A3RTのTalk APIは人工知能と雑談をするためのAPIです。

リクルート　A3RTからAPI KEYの取得を済ませておきます。

どの記述もモダンなJavaScriptで書かれています。

jQueryのajaxを使う方法
fetchを使う場合
axiosについて
1. axiosを使う例

jQueryのajaxを使う方法

事前にjQueryを読み込んでおきます。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

JavaScriptコード

$.ajax({
  url: "https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk",
  type: 'POST',
  data: { apikey: '取得したAPIキー', query: 'おはよう' }
  }).then(data　=> {
    console.log(data.results[0]['reply']),
    error => alert('エラー')
}）

fetchを使う場合

JavaScriptコード

let formdata = new FormData();
formdata.append('apikey','取得したAPIキー');
formdata.append('query','おはよう');
fetch('https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk',{
  method: 'post',
  body: formdata
}).then(response => {
  response.json().then(data => {
    console.log(data.results[0].reply);
  })
}).catch(error => console.log(error));

axiosについて

axiosはブラウザや「node.js」で動く「Promise」ベースの「HTTPクライアント」です。
具体的にはReactやVue.jsなどでも併用される場合が多いようです。

Vue.jsの公式ページでの使用例

Reactページの　「AJAX and APIs」（ここでの例はfetchを使用しています）

axios公式ページ:Promise based HTTP client for the browser and node.js

axiosを使う例

事前にaxiosを読み込んでおきます。

<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>

JavaScriptコード

let params = new FormData();
params.append("apikey","取得したAPIキー");
params.append("query","おはよう" );
axios.post('https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk',params)
  .then(response =>{
     console.log(response.data.results[0].reply);
  }).catch(error => {
     console.log(error);
});