[js] ajaxの書き方 (おまけaxios, fetch関数)

この記事について

ajaxの書き方についてjQueryと生JS両方の書き方の備忘。

ajaxとは

webページを再読み込みせずにサーバと通信を行い、結果を画面に反映すること(非同期処理)ができる技術

jQueryでの書き方

jQuery

$(function() {
  let url = "https//xxxxx";
  $.ajax({
    url: url,
    dataType : 'json'　//データ形式
  }).done(function(data) {
    //通信成功時の処理
  }).fail(function(data) {
    //通信失敗時の処理
  }).always(() => {
    //通信の成否に関わらず実行する処理
  });
});

JavaScriptでの書き方

javascript

let url = "https//xxxxx";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
    if ( xhr.readyState === 4 ) {
        if( xhr.status == 200) {
            var data = JSON.parse(xhr.response);
            //通信成功時の処理
        } else {
            //通信失敗時の処理
        }
        //通信の成否に関わらず実行する処理
    }
};
xhr.open( 'GET', url );
xhr.send();

おまけ axiosについて

axiosとは

ブラウザやnode.js上で動くPromiseベースのHTTPクライアント
Vue.jsやReactで非同期通信を行う際はaxiosがスタンダード

書き方

vue.js

let url = "https//xxxxx";
axios
.get(url)
.then(function (response) {
    //通信成功時の処理
})
.catch(function (error) {
    //通信失敗時の処理
})
.finally(function () {
    //通信の成否に関わらず実行する処理
});

おまけ JS fetch関数によるAPIの取得について

JSのfetch関数でAPIを叩くときの書き方

Promiseチェーンを使用した場合

サンプル：https://jsfiddle.net/Maro1027/964x7tug/

function callApi() {
  const url = 'https//xxxxx';
  const res = fetch(url)
  .then(resData => {
    // データが返ってこなかった場合はエラーを返却
    if(!resData.ok) {
      throw new Error('response error');
    }
    // JSON形式でデータを返却
    return resData.json();
  })
  .then(parseData => {
    // resData.json()をparseDataとし受け取り
    // 通信成功、正常にデータを取得した時の処理
  })
  .catch(error => {
    //通信失敗時の処理
	console.log(error);
  })
}

callApi();

async/awaitとtry/catch文を使用した場合

サンプル：https://jsfiddle.net/Maro1027/dpqcsuhm/

const url = 'https//xxxxx';
async function callApi() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    //通信成功時の処理
  } catch (error) {
    //通信失敗時の処理
  }
}

callApi();

参考