質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2337閲覧

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

pecchan

総合スコア591

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/04/29 00:34

編集2023/04/29 04:15

実現したいこと

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

前提

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

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

uncaught (in promise) TypeError: $.

イメージ説明

該当のソースコード

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

javascript

1$(function(){ 2 $('#listing_smart_lock__lock_btn').click(function(){ 3 console.log("btn click"); 4 const res = lock(); 5 console.log("end"); 6 }); 7}); 8async function lock() { 9 await disableButton(true); 10 $('#listing_smart_lock__response').text('施錠リクエスト中・・・'); 11 12 const job = await createJob(); 13 14 if (!job){ 15 await disableButton(false); 16 $('#listing_smart_lock__response').text('リクエスト失敗'); 17 return; 18 } 19 console.log("job_id :" + job.job_id); 20 const res2 = await findJob(); 21 22 await disableButton(false); 23 $('#listing_smart_lock__response').text('施錠しました'); 24 25} 26 27const createJob = () => { 28 return new Promise(resolve => { 29 const id = $("#listing_smart_lock__id").text(); 30 $.ajax({ 31 url: './lock', 32 type: 'POST', 33 dataType: 'json', 34 data: { id: id }, 35 headers: { 36 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 37 } 38 }) 39 .then((...args) => { // done 40 const [data, textStatus, jqXHR] = args; 41 console.log('done', jqXHR.status); 42 resolve(data); 43 }) 44 .catch((...args) => { // fail 45 const [jqXHR, textStatus, errorThrown] = args; 46 console.log('fail', jqXHR.status); 47 resolve(''); 48 }) 49 // .done(function(data, textStatus, jqXHR) { 50 // resolve(data); 51 // }) 52 // .fail(function(jqXHR, textStatus, errorThrown) { 53 // console.log("fail in "); 54 // const res = JSON.parse(jqXHR.responseText); 55 // //$('#listing_smart_lock__response').text(res.message); 56 // resolve(res); 57 // }) 58 // .always(function(res) { 59 // setTimeout( () => { 60 // console.log("this is createJob"); 61 // resolve(res); 62 // }, 3000); 63 // }); 64 65 }) 66 .catch(errObj => {console.log("何も表示されない・・・");} //ここに追加するとブラウザのエラーは解消されるがここに入らない 67 ); 68}; 69const disableButton = value => { 70 return new Promise(resolve => { 71 $('#listing_smart_lock__lock_btn').prop('disabled', value); 72 $('#listing_smart_lock__unlock_btn').prop('disabled', value); 73 resolve(); 74 }); 75};

試したこと

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

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

html

1<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script> 2<script src="/assets/admin/adjustment_sales.self-3760686aa0da4f901772fa3ecb330bff9c22e71f23de5b9bda30269cea58ab73.js?body=1"></script> 3<script src="/assets/smart_lock/lock.self-fc1de6b8dff82a9e86c5aba3d75dfa87b44c7a84815e9b6bb56e9f319160e0c3.js?body=1"></script> 4<script src="/assets/smart_lock/unlock.self-19ca2cf82c9aaf26ff28af4b738e90a265c73925664c6f7747c777e48f7ec277.js?body=1"></script> 5<script src="/assets/admin.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script> 6<script src="/assets/rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1"></script> 7<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script> 8<script src="/assets/jquery-ui/core.self-93be4d22eda916787802a64d8f88b52db8a9027d4ccbbc0942625324a7d12d44.js?body=1"></script> 9<script src="/assets/jquery-ui/widget.self-c1602241ddc51216b58391768667068867b8e15b9efc722befcd25771eda6819.js?body=1"></script> 10<script src="/assets/jquery-ui/accordion.self-c95f320275150a94241b004a91e21eef9c5ae9965a793cb3e2475f6078a1670d.js?body=1"></script> 11<script src="/assets/jquery-ui/position.self-e693ced4ecfa1a276f0b794f32c1d30d792764b08788bf68ecfa3b388c291333.js?body=1"></script> 12<script src="/assets/jquery-ui/menu.self-7abc1c9401509a7e4fc609b1e461be6fd17e8116e8fda19cc59d05ba79aefb68.js?body=1"></script> 13<script src="/assets/jquery-ui/autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1"></script> 14<script src="/assets/jquery-ui/button.self-4d4f21ba77bbf8cc08ae65e2b6329a7a1b952b32c3ba7bffca8313e7e8c93d0c.js?body=1"></script> 15<script src="/assets/jquery-ui/datepicker.self-6267be6d4d0f0e8665be3b4d6ac07f40ba23a32aff8eaa5d1bfc00f76a9eeae7.js?body=1"></script> 16<script src="/assets/jquery-ui/mouse.self-c513294e8da73f31f84ba3ef11e2a1180a47faea0eb2fea4a53fc26153dd21fd.js?body=1"></script> 17<script src="/assets/jquery-ui/draggable.self-debcca3d0d5d9afe2fe91a6fd1aebdb41ca0a55f2f6017352e6c02b6d8a6e64c.js?body=1"></script> 18<script src="/assets/jquery-ui/resizable.self-60b870565f3cd62982c1907828119bb51f42ec8228d5e23868153edc3abc685c.js?body=1"></script> 19<script src="/assets/jquery-ui/dialog.self-5a6c7980dfa3f6b74445b0f4b20eed799ee65363163500ed7f032e603d6b022d.js?body=1"></script> 20<script src="/assets/jquery-ui/droppable.self-a7a2b4c2cec8fc176f51e4e4291d92bfd3eec40b6a580b47fc54c16334d52882.js?body=1"></script> 21<script src="/assets/jquery-ui/effect.self-3acdb29e7da09c8f0195b994d2f04d73bfef50dc539c84fd2c835d964d33e5c1.js?body=1"></script> 22<script src="/assets/jquery-ui/effect-blind.self-ed102209d7aa0b7374f3db8478cc7dcff5f9980d3146e8bf9fbfab959c6d5d8a.js?body=1"></script> 23<script src="/assets/jquery-ui/effect-bounce.self-bfcb9288797ecd234ddeedf4fbc5b4c9de94a4e6d8d44e6faa5b5e9836fad9fd.js?body=1"></script> 24<script src="/assets/jquery-ui/effect-clip.self-7368e4597c32360b162d264ff8bbd0cf9fb1535eb9b4564e6eb7c1db3c774bf3.js?body=1"></script> 25<script src="/assets/jquery-ui/effect-drop.self-294aaa72126ad9c94d6558cca792eb3716754713aca98f18a9dd7c493150ed92.js?body=1"></script> 26<script src="/assets/jquery-ui/effect-explode.self-68e74dc114a52f3f4d7033e40c39196961bdcf439652daa2e98baa115c7bb44b.js?body=1"></script> 27<script src="/assets/jquery-ui/effect-fade.self-42d542a5253e0a610717460102ee6bee339c656cc188e491d89eb0779043c963.js?body=1"></script> 28<script src="/assets/jquery-ui/effect-fold.self-ad9967f153423916300dbf1104b00f7ad7bbd6a222a0fcc1012ebe251bcb13c8.js?body=1"></script> 29<script src="/assets/jquery-ui/effect-highlight.self-f922b7179ab8ccfa7865141f38865bba0a3d2bdceba7561c27ca14544dbfd996.js?body=1"></script> 30<script src="/assets/jquery-ui/effect-size.self-368aecefa09656a2be5c72dc8e685b120363a3df812134cbd2dd998bafa179fd.js?body=1"></script> 31<script src="/assets/jquery-ui/effect-scale.self-884a5abcb6d90fcd9f9a071aa8329638184df688afced1b1d3b6be6c69f4dd7f.js?body=1"></script> 32<script src="/assets/jquery-ui/effect-puff.self-93415831093923a70f671d73e8d0b3d94deb37ac7472a036a4add545f565c166.js?body=1"></script> 33<script src="/assets/jquery-ui/effect-pulsate.self-eb107c0d136eccdfbd8a2f0f2ee71e0f6911cb300c6b63cc2fe4f6532e6a9a97.js?body=1"></script> 34<script src="/assets/jquery-ui/effect-shake.self-63bcc14897aac5b84e10690be94d64d5724f864aa14c913b4d1030c461a256ad.js?body=1"></script> 35<script src="/assets/jquery-ui/effect-slide.self-c93054a4a80d1f986760806d81ab067e4a4120bf103337e152ecc24d36e785f6.js?body=1"></script> 36<script src="/assets/jquery-ui/effect-transfer.self-181245634ec522320fc1081f6dbf94fd982f34eefa03555f76817dedfcdea336.js?body=1"></script> 37<script src="/assets/jquery-ui/progressbar.self-a259ff5a2a5e7aef0ec21bda94edd0f6bc1e9821128d901de415956edf212b0d.js?body=1"></script> 38<script src="/assets/jquery-ui/selectable.self-42e53fc2f95211314e36a8094c42560f869c207f16d68cfc206aa37201dcdc03.js?body=1"></script> 39<script src="/assets/jquery-ui/selectmenu.self-09dbcac573f0e508194bd9deff254db090889b380d030261857860309c0918e8.js?body=1"></script> 40<script src="/assets/jquery-ui/slider.self-8af8d2a0661743ba88b4cfb99d5c8c874cfa3fc6528ae4e9252366b388def0b7.js?body=1"></script> 41<script src="/assets/jquery-ui/sortable.self-df2d80a36f9dfbe0facc596ccd92af83ca50d38e4cd6a84810aaf5d40b8cd181.js?body=1"></script> 42<script src="/assets/jquery-ui/spinner.self-3c8c95a7bc9c877d0f9c16789246bbedda6b8e8fbf5927951babdab775aed02e.js?body=1"></script> 43<script src="/assets/jquery-ui/tabs.self-dc07b44bf1b926c8d28ccd2658e30933881e5329348caf70cf305c3943f6bbd7.js?body=1"></script> 44<script src="/assets/jquery-ui/tooltip.self-38f04ac3a6c8fb2391ec6832b68845671cc9013a94371b7eb239478f4835eb73.js?body=1"></script> 45<script src="/assets/jquery-ui.self-52111578aa54225c9ebfe06f78a62771020ee548bb27d62228ee3f5e6633969d.js?body=1"></script> 46<script src="/assets/lib/moment.min.self-2c95f4f25e28459d41620f0cc995d299b9ed5c4cf6e5f6da8d5f3976afdb5bfc.js?body=1"></script> 47<script src="/assets/lib/gps_search_utils.self-239a05bdd562183b8b5f5778e79f899e30b387c121bb176ee5fb01b0cf786719.js?body=1"></script> 48<script src="/assets/vendor/ajaxzip3-https.self-df894ab07a67b451d086dda93d9e5a7fad47580930570b1b1cb88ea3c29f603e.js?body=1"></script> 49<script src="/assets/vendor/placeholder.self-06336b4d713fd99859c945feeac482cd06dfe8d6135b7d655f898b31be9c1a80.js?body=1"></script> 50<script src="/assets/vendor/arg.self-008e18100c2d098fa1b29193991069662210e4da0c0cab5139a43dac6cff9cde.js?body=1"></script> 51<script src="/assets/vendor/flipsnap.self-317ed0d33cc0e593ffe7c51441a6472208bc811ed38143317dad1bfc94b3ec62.js?body=1"></script> 52 53 54<script src="/assets/jquery.fileupload/main.self-2b4e7da4b0a8f50cfeae47d4fae460834a999594f77ed3949db0214f195ebb5b.js?body=1"></script> 55<script src="/assets/telecube/jsQR.self-42e35a41a7293fdfe6c7b7bb95c1283997ca8fd8bd16b46cc36e8e6d4696283f.js?body=1"></script> 56<script src="/assets/list_map.self-25067e1d37fa3ae49efd220aa6b0e51a0c67b2b45c56bfefa99022476175fd89.js?body=1"></script> 57<script src="/assets/application.self-03c7393062d8eea5b22704871289c413c2a7a43263051aeb60f9db29752e6b81.js?body=1"></script> 58<script data-main='/assets/provider_app' src='/assets/require.js'></script> 59

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/04/29 00:41

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

2023/04/29 00:55

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

2023/04/29 03:11

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

2023/04/29 03:49

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

2023/04/29 03:51

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

2023/04/29 04:02 編集

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

2023/04/29 04:02

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

2023/04/29 04:17 編集

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

回答2

0

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

javascript

1$(function(){ 2 $.ajax({ 3 url:"test.php", 4 success:function(data){ 5 console.log("sccess:"); 6 console.log(data); 7 }, 8 error:function(xhr,err){ 9 console.log("error:") 10 console.log(xhr.status); 11 console.log(err); 12 }, 13 }).done(function(data){ 14 console.log("done:"); 15 console.log(data); 16 }).then(function(data){ 17 console.log("then:"); 18 console.log(data); 19 }).fail(function(xhr,err){ 20 console.log("fail:"); 21 console.log(xhr.status); 22 console.log(err); 23 }).catch(function(xhr,err){ 24 console.log("catch:"); 25 console.log(xhr.status); 26 console.log(err); 27 }); 28});

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

投稿2023/04/30 09:57

yambejp

総合スコア115280

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

置き換えは断念しました

投稿2023/05/02 22:13

pecchan

総合スコア591

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問