$.ajax(jQuery.ajax)の非同期処理をasync awaitの入れ子なし同期処理で記述する

目的

$.ajaxをasync awaitを用いた同期処理で書く。
Ajax通信を待ってから処理に進む。
同期処理が入れ子にならず、クリーンに書くことができる。
IEには対応していない。注意。

経緯

保守の際、既存コードがjqueryのajaxで記述されていた。
jquery自体は別に良い。
だが、大量のコールバックによる入れ子で非常に見通しが悪くなっていた。
それをasync awaitを用いた同期処理にリファクタリングをした際の備忘録である。

書き方

フルーツID🔑からフルーツ名🍒を取得する。

hoge.js

/**
 * フルーツ名を取得する
 *
 * @param {string} fruitId
 */
async function getFruitName(fruitId) {
  const fruitRequest = {id: fruitId}
  const fruitResult = await ajaxGetFruit(fruitRequest);
  return fruitResult.name;
}

/**
 * フルーツのajax[GET]を実施する
 * 
 * @param {object} request
 * @returns
 */
function ajaxGetFruit(request) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/fruit/name',
      type: "GET",
      async: true,
      contentType: "application/json",
      data: JSON.stringify(request),
      dataType: "json",
    }).then(
      function (result) {
        // 正常終了
        resolve(result);
      },
      function () {
        // エラー
        reject();
      }
    )
  }
  )
}

かんたんな解説

記述場所

• asyncは関数定義に記述する。
• awaitは呼び出す関数の前に記述する。
• IEには対応していない。注意。

動き

• awaitはasyncで定義された関数内でしか使用できない。
• awaitで呼び出しされた関数がresolve、またはrejectするまで待つ。