ホーム>source

編集-なぜこれが重複した質問だと思わないかについては、下部のメモを参照してください

jquery 3.2.1およびBootstrap 3.3.7の使用

アプリケーションの一部には次のフローがあります。

  1. ユーザーがIDが #notifierModal のモーダルウィンドウ内のアンカーをクリックする

  2. これにより最初のajaxリクエスト ユーザーが行った選択に関する設定を保存するデータベースに書き込みます(各選択はステップ1のアンカーです-クリックすると、設定のオン/オフが切り替わります)。このajaxリクエストからの応答は、次の形式のJSONです。

    {result: "success", message: "Notification preference has been updated"}

エラーが発生した場合-データベースの更新に関して-JSONは  同様の構造ですが、 {result: "error"} があります  および適切なメッセージ。

  1. A2番目のajaxリクエスト モーダル( #notifierModal の内容を更新する )。これは、ステップ2でデータベースの設定を更新した後、モーダルに表示されるデータを効果的に「更新」することです。

  2. ステップ2からの応答によって得られた結果(成功またはエラーメッセージ)は、 #notifierModal 内で更新されます。 。

私の質問-私は次のajaxで上記を実装しました:

// Step 1
$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
    e.preventDefault();
    // Step 2
    $.ajax({
        url: $(this).attr('href'),
        method: 'get'
    }).then(function(response2) {
        // Step 3
        $.ajax({
            url: '/notifier-modal',
            method: 'get'
        }).then(function(response3) {
            $('#notifierModal .modal-body').html(response3);
        }).done(function() {
            // Step 4
            if (response2.result == 'error') {
                $('#notifierModal .modal-body .outcome').html(response2.message); 
            }
            if (response2.result == 'success') {
                $('#notifierModal .modal-body .outcome').html(response2.message); 
            }
        });       
    }); 
});

ただし、 .then() の両方のインスタンスを置き換えた場合   .done() と  まったく同じように機能します。

2番目のajaxリクエスト(ステップ3)を続行する前に、最初のajaxリクエスト(ステップ2)が完了したことを確認しようとしています。私は約束と情報について読んだことがありますjQuery Promiseを使用して3つの非同期呼び出しをチェーンするにはどうすればよいですか?

.done() を使用する理由がわかりません  同じ結果が得られ、正しいアプローチはどれですか?私はjsにできる他の改善があるかもしれないことを感謝しますが、ここでの私の質問は .done() を使用することの違いに関するものです  それ自身で対 .then()/.done()  アプローチ?

私のアプリケーションは「機能しています」-両方の方法で同じ結果が得られるという意味で-しかし、これらのアプローチの違いを理解していないので、間違いを犯しているように感じます。誰かがこれを明確にすることができますか?

重複していない: 誰かがこれはjQueryの遅延と約束-.then()vs .done()。私はそれが言うからだとは思わない:

There is also difference in way that return results are processed (its called chaining, done   then の間に連鎖しない  呼び出しチェーンを生成します)

コールバックの変数を response2 に更新しました  および response3  js内のどのステップにいるかを表示します。ただし、 response2 を使用できます  (ステップ2から) .done() を使用するかどうかに関係なく、ステップ4内  または .then() 。そんなことがあるものか?結果は私が望むものですが、それがどのように機能しているのか理解できません。

あなたの答え
  • 解決した方法 # 1

    この質問は重複しています。 jquery-deferreds-and-promises-then-vs-done

    要するに:

    promise.then( doneCallback, failCallback )
    // was equivalent to
    promise.done( doneCallback ).fail( failCallback )
    
    

  • 解決した方法 # 2

    あなたがやろうとしていることを正しく理解していた場合、ステップ3のコンテンツをロードした後にのみ、ステップ2の応答でモーダルコンテンツを更新する必要があるようです。 それが問題である場合:

    $('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
        e.preventDefault();
        // Step 2
        $.ajax({
            url: $(this).attr('href'),
            method: 'get'
        }).then(function(outcome) {
            // Step 3
            $.ajax({
                url: '/notifier-modal',
                method: 'get'
            }).then(function(response) {
                $('#notifierModal .modal-body').html(response);
                // Step 4
                if (outcome.result == 'error') {
                    $('#notifierModal .modal-body .outcome').html(outcome.message); 
                }
                if (outcome.result == 'success') {
                    $('#notifierModal .modal-body .outcome').html(outcome.message); 
                }
            });       
        }); 
    });
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ VBNETを使用したMongoDBのBulkWrite動的ドキュメント