【HTTPリクエスト】fetch,jquery,axiosそれぞれの特徴

fetch

JavaScriptの機能の一つ。ajax、axiosはscriptタグなどでライブラリを読み込む必要がありますが、fetchはその必要がありません。

// 使用例
let body =`idToken=${idToken}`
    let request = new Request('/schedules', {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
        'X-CSRF-Token': token
      },
      method: 'POST',
      body: body
    });
    fetch(request)
    .then(response => response.json());
    .then(data => {
       console.log(data)
       sub_field.append(data.sub)
      });
    .catch(error => {
       console.log(error);
      });

1つめの.thenでpromiseを返し、2つめの.thenでJSONを取得できます(Promiseは非同期を操作するための機能らしいですが、詳しいことはまだよく分かりません)。
ajax通信やthenのなかでエラーが発生すると.catchを実行します。

jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

こんな感じでスクリプトを読み込む必要があります。

//使用例
const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: 'foo',
    email: 'foo@example.com',
    password: 'foobar'
};
$.post(url, params)
    .done(data => {
        console.log(data);
    })
    .fail(error => {
        console.log(error);
    });

通信に成功すると.doneを返し、エラーの場合は.failを返します。

axios

<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

jquery同様、ライブラリを読み込む必要があります。比較的新しくできたらしく、Vue.jsなどを使うときに一緒に使用されることが多いみたいです。

//使用例
const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: 'foo',
    email: 'foo@example.com',
    password: 'foobar'
};
axios.post(url, params)
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.log(error);
    });