ajaxのdone, failをthen catchに置き換えたい

Question

実現したいこと

・ajaxのdone, failをthen catchに置き換えたい。
・待ち時間が必要なのでasync / awaitを使いたい。
・サーバのレスポンスが成功時はthenで受け取り、サーバのレスポンスがエラー時はcatchで受け取りたい。

前提

現行のdone, failをthen, catchに置き換え中。
done　→　thenに置き換え、
fail　→　cathcに置き換え、
サーバ側でエラーを返したところブラウザにエラーが出て解消できずにいます。

発生している問題・エラーメッセージ

uncaught (in promise) TypeError: $.

該当のソースコード

少しずつ置き換えてる途中なので、元々のdone, failはコメントアウトしています。

$(function(){
  $('#listing_smart_lock__lock_btn').click(function(){
    console.log("btn click");
    const res = lock();
    console.log("end");
  });
});
async function lock() {
  await disableButton(true);
  $('#listing_smart_lock__response').text('施錠リクエスト中・・・');
  
  const job = await createJob();
  
  if (!job){
    await disableButton(false);
    $('#listing_smart_lock__response').text('リクエスト失敗');
    return;
  }
  console.log("job_id :" + job.job_id);
  const res2 = await findJob();
  
  await disableButton(false);
  $('#listing_smart_lock__response').text('施錠しました');

}

const createJob = () => {
  return new Promise(resolve => {
    const id = $("#listing_smart_lock__id").text();
    $.ajax({
      url: './lock',
      type: 'POST',
      dataType: 'json',
      data: { id: id },
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      }
    })
    .then((...args) => { // done
      const [data, textStatus, jqXHR] = args;
      console.log('done', jqXHR.status);
      resolve(data);
    })
    .catch((...args) => { // fail
      const [jqXHR, textStatus, errorThrown] = args;
      console.log('fail', jqXHR.status);
      resolve('');
    })
    // .done(function(data, textStatus, jqXHR) {
    //   resolve(data);
    // })
    // .fail(function(jqXHR, textStatus, errorThrown) {
    //   console.log("fail in ");
    //   const res = JSON.parse(jqXHR.responseText);
    //   //$('#listing_smart_lock__response').text(res.message);
    //   resolve(res);
    // })
    // .always(function(res) {
    //   setTimeout( () => {
    //     console.log("this is createJob");
    //     resolve(res);
    //   }, 3000);
    // });
    
  })
  .catch(errObj => {console.log("何も表示されない・・・");} //ここに追加するとブラウザのエラーは解消されるがここに入らない
  );
};
const disableButton = value => {
  return new Promise(resolve => {
    $('#listing_smart_lock__lock_btn').prop('disabled', value);
    $('#listing_smart_lock__unlock_btn').prop('disabled', value);
    resolve();
  });
};

試したこと

catchの場所を１つ外側にしました。※66行目
そうするとブラウザのエラーはなくなりますが、console.logに何も表示されず。
エラーがキャッチできませんでした。

なぜ39行目のthenは有効なのに、44行目のcatchはダメなのでしょう？
ブラウザのエラーを解消し例外をcatchできるようにするにはどう修正すればよろしいでしょうか？

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/admin/adjustment_sales.self-3760686aa0da4f901772fa3ecb330bff9c22e71f23de5b9bda30269cea58ab73.js?body=1"></script>
<script src="/assets/smart_lock/lock.self-fc1de6b8dff82a9e86c5aba3d75dfa87b44c7a84815e9b6bb56e9f319160e0c3.js?body=1"></script>
<script src="/assets/smart_lock/unlock.self-19ca2cf82c9aaf26ff28af4b738e90a265c73925664c6f7747c777e48f7ec277.js?body=1"></script>
<script src="/assets/admin.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script>
<script src="/assets/rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery-ui/core.self-93be4d22eda916787802a64d8f88b52db8a9027d4ccbbc0942625324a7d12d44.js?body=1"></script>
<script src="/assets/jquery-ui/widget.self-c1602241ddc51216b58391768667068867b8e15b9efc722befcd25771eda6819.js?body=1"></script>
<script src="/assets/jquery-ui/accordion.self-c95f320275150a94241b004a91e21eef9c5ae9965a793cb3e2475f6078a1670d.js?body=1"></script>
<script src="/assets/jquery-ui/position.self-e693ced4ecfa1a276f0b794f32c1d30d792764b08788bf68ecfa3b388c291333.js?body=1"></script>
<script src="/assets/jquery-ui/menu.self-7abc1c9401509a7e4fc609b1e461be6fd17e8116e8fda19cc59d05ba79aefb68.js?body=1"></script>
<script src="/assets/jquery-ui/autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1"></script>
<script src="/assets/jquery-ui/button.self-4d4f21ba77bbf8cc08ae65e2b6329a7a1b952b32c3ba7bffca8313e7e8c93d0c.js?body=1"></script>
<script src="/assets/jquery-ui/datepicker.self-6267be6d4d0f0e8665be3b4d6ac07f40ba23a32aff8eaa5d1bfc00f76a9eeae7.js?body=1"></script>
<script src="/assets/jquery-ui/mouse.self-c513294e8da73f31f84ba3ef11e2a1180a47faea0eb2fea4a53fc26153dd21fd.js?body=1"></script>
<script src="/assets/jquery-ui/draggable.self-debcca3d0d5d9afe2fe91a6fd1aebdb41ca0a55f2f6017352e6c02b6d8a6e64c.js?body=1"></script>
<script src="/assets/jquery-ui/resizable.self-60b870565f3cd62982c1907828119bb51f42ec8228d5e23868153edc3abc685c.js?body=1"></script>
<script src="/assets/jquery-ui/dialog.self-5a6c7980dfa3f6b74445b0f4b20eed799ee65363163500ed7f032e603d6b022d.js?body=1"></script>
<script src="/assets/jquery-ui/droppable.self-a7a2b4c2cec8fc176f51e4e4291d92bfd3eec40b6a580b47fc54c16334d52882.js?body=1"></script>
<script src="/assets/jquery-ui/effect.self-3acdb29e7da09c8f0195b994d2f04d73bfef50dc539c84fd2c835d964d33e5c1.js?body=1"></script>
<script src="/assets/jquery-ui/effect-blind.self-ed102209d7aa0b7374f3db8478cc7dcff5f9980d3146e8bf9fbfab959c6d5d8a.js?body=1"></script>
<script src="/assets/jquery-ui/effect-bounce.self-bfcb9288797ecd234ddeedf4fbc5b4c9de94a4e6d8d44e6faa5b5e9836fad9fd.js?body=1"></script>
<script src="/assets/jquery-ui/effect-clip.self-7368e4597c32360b162d264ff8bbd0cf9fb1535eb9b4564e6eb7c1db3c774bf3.js?body=1"></script>
<script src="/assets/jquery-ui/effect-drop.self-294aaa72126ad9c94d6558cca792eb3716754713aca98f18a9dd7c493150ed92.js?body=1"></script>
<script src="/assets/jquery-ui/effect-explode.self-68e74dc114a52f3f4d7033e40c39196961bdcf439652daa2e98baa115c7bb44b.js?body=1"></script>
<script src="/assets/jquery-ui/effect-fade.self-42d542a5253e0a610717460102ee6bee339c656cc188e491d89eb0779043c963.js?body=1"></script>
<script src="/assets/jquery-ui/effect-fold.self-ad9967f153423916300dbf1104b00f7ad7bbd6a222a0fcc1012ebe251bcb13c8.js?body=1"></script>
<script src="/assets/jquery-ui/effect-highlight.self-f922b7179ab8ccfa7865141f38865bba0a3d2bdceba7561c27ca14544dbfd996.js?body=1"></script>
<script src="/assets/jquery-ui/effect-size.self-368aecefa09656a2be5c72dc8e685b120363a3df812134cbd2dd998bafa179fd.js?body=1"></script>
<script src="/assets/jquery-ui/effect-scale.self-884a5abcb6d90fcd9f9a071aa8329638184df688afced1b1d3b6be6c69f4dd7f.js?body=1"></script>
<script src="/assets/jquery-ui/effect-puff.self-93415831093923a70f671d73e8d0b3d94deb37ac7472a036a4add545f565c166.js?body=1"></script>
<script src="/assets/jquery-ui/effect-pulsate.self-eb107c0d136eccdfbd8a2f0f2ee71e0f6911cb300c6b63cc2fe4f6532e6a9a97.js?body=1"></script>
<script src="/assets/jquery-ui/effect-shake.self-63bcc14897aac5b84e10690be94d64d5724f864aa14c913b4d1030c461a256ad.js?body=1"></script>
<script src="/assets/jquery-ui/effect-slide.self-c93054a4a80d1f986760806d81ab067e4a4120bf103337e152ecc24d36e785f6.js?body=1"></script>
<script src="/assets/jquery-ui/effect-transfer.self-181245634ec522320fc1081f6dbf94fd982f34eefa03555f76817dedfcdea336.js?body=1"></script>
<script src="/assets/jquery-ui/progressbar.self-a259ff5a2a5e7aef0ec21bda94edd0f6bc1e9821128d901de415956edf212b0d.js?body=1"></script>
<script src="/assets/jquery-ui/selectable.self-42e53fc2f95211314e36a8094c42560f869c207f16d68cfc206aa37201dcdc03.js?body=1"></script>
<script src="/assets/jquery-ui/selectmenu.self-09dbcac573f0e508194bd9deff254db090889b380d030261857860309c0918e8.js?body=1"></script>
<script src="/assets/jquery-ui/slider.self-8af8d2a0661743ba88b4cfb99d5c8c874cfa3fc6528ae4e9252366b388def0b7.js?body=1"></script>
<script src="/assets/jquery-ui/sortable.self-df2d80a36f9dfbe0facc596ccd92af83ca50d38e4cd6a84810aaf5d40b8cd181.js?body=1"></script>
<script src="/assets/jquery-ui/spinner.self-3c8c95a7bc9c877d0f9c16789246bbedda6b8e8fbf5927951babdab775aed02e.js?body=1"></script>
<script src="/assets/jquery-ui/tabs.self-dc07b44bf1b926c8d28ccd2658e30933881e5329348caf70cf305c3943f6bbd7.js?body=1"></script>
<script src="/assets/jquery-ui/tooltip.self-38f04ac3a6c8fb2391ec6832b68845671cc9013a94371b7eb239478f4835eb73.js?body=1"></script>
<script src="/assets/jquery-ui.self-52111578aa54225c9ebfe06f78a62771020ee548bb27d62228ee3f5e6633969d.js?body=1"></script>
<script src="/assets/lib/moment.min.self-2c95f4f25e28459d41620f0cc995d299b9ed5c4cf6e5f6da8d5f3976afdb5bfc.js?body=1"></script>
<script src="/assets/lib/gps_search_utils.self-239a05bdd562183b8b5f5778e79f899e30b387c121bb176ee5fb01b0cf786719.js?body=1"></script>
<script src="/assets/vendor/ajaxzip3-https.self-df894ab07a67b451d086dda93d9e5a7fad47580930570b1b1cb88ea3c29f603e.js?body=1"></script>
<script src="/assets/vendor/placeholder.self-06336b4d713fd99859c945feeac482cd06dfe8d6135b7d655f898b31be9c1a80.js?body=1"></script>
<script src="/assets/vendor/arg.self-008e18100c2d098fa1b29193991069662210e4da0c0cab5139a43dac6cff9cde.js?body=1"></script>
<script src="/assets/vendor/flipsnap.self-317ed0d33cc0e593ffe7c51441a6472208bc811ed38143317dad1bfc94b3ec62.js?body=1"></script>


<script src="/assets/jquery.fileupload/main.self-2b4e7da4b0a8f50cfeae47d4fae460834a999594f77ed3949db0214f195ebb5b.js?body=1"></script>
<script src="/assets/telecube/jsQR.self-42e35a41a7293fdfe6c7b7bb95c1283997ca8fd8bd16b46cc36e8e6d4696283f.js?body=1"></script>
<script src="/assets/list_map.self-25067e1d37fa3ae49efd220aa6b0e51a0c67b2b45c56bfefa99022476175fd89.js?body=1"></script>
<script src="/assets/application.self-03c7393062d8eea5b22704871289c413c2a7a43263051aeb60f9db29752e6b81.js?body=1"></script>
<script data-main='/assets/provider_app' src='/assets/require.js'></script>

Comments

[退会済みユーザー]

もしかしてjQueryのslim.buildを使ってないですか？
もしそうならslim.buildではなくて uncompressed　または minifiedを使ってみては？

[pecchan]

ありがとうございます。
基本サーバサイド側の人間で、「slim.build」もはじめて聞きました。
プロジェクト内で「slim.build」を使っているかどうか分からず、確認方法を調べてます。

[m.ts10806]

htmlもご提示ください。
jQueryファイル名かえてなかったりcdn使ってたらすぐ分かります。

[pecchan]

>htmlもご提示ください。
>jQueryファイル名かえてなかったりcdn使ってたらすぐ分かります。
ありがとうございます。
railsアプリなのでアセットパイプラインになっておりhtmlからは確認できませんでした。
バージョンしか分かりませんでした。
$.fn.jquery
'1.12.4'

[pecchan]

railsからも同じ表記が確認されました
[1] pry(main)> Jquery::Rails::JQUERY_VERSION
=> "1.12.4"

[pecchan]

1.x系という事でajaxは問題なく使えるバージョンなのでしょうか？
https://javascript.programmer-reference.com/jquery-kind/

[m.ts10806]

系はあまり問題にならないかと（サポートブラウザや機能的なものはあるでしょうけど、こだわりがないなら3系最新で）
ブラウザ表示させたときのHTML、そこからリンク名も確認できますし、なんならjQueryのソースコードも確認できます。ソースコード冒頭のコメントでもどのビルドのものか確認できた・・・はず。

[m.ts10806]

いずれにしても質問は編集できます。

[pecchan]

<script>タグをhtml貼り付けました。
文字数制限に引っかかったため一部ですが。

Answer 1

done/then、fail/catchはそのまま書き換えれば使用できます
非推奨ですがsuccess/errorでも受け取れます

$(function(){
  $.ajax({
  url:"test.php",
  success:function(data){
    console.log("sccess:");
    console.log(data);
  },
  error:function(xhr,err){
    console.log("error:")
    console.log(xhr.status);
    console.log(err);
  },
  }).done(function(data){
    console.log("done:");
    console.log(data);
  }).then(function(data){
    console.log("then:");
    console.log(data);
  }).fail(function(xhr,err){
    console.log("fail:");
    console.log(xhr.status);
    console.log(err);
  }).catch(function(xhr,err){
    console.log("catch:");
    console.log(xhr.status);
    console.log(err);
  });
});

よほど特殊な使い方を想定していないならいまさらjQueryの$.ajaxに固執する必要もないと思います。可能であればfetchへの移行を検討されたほうがよいでしょう。

Answer 2

置き換えは断念しました