javascript - 待つ - jquery 非同期処理




非同期のAjaxリクエストではなく、同期的にjQueryを実行する方法を教えてください。 (9)

jQueryのAjax設定を同期モードにするには、

jQuery.ajaxSetup({async:false});

そして、 jQuery.get( ... );を使ってあなたのAjax呼び出しを実行してくださいjQuery.get( ... );

その後、もう一度オンにするだけです

jQuery.ajaxSetup({async:true});

私は@Adamの提案と同じことが起こっていると思いますが、 jQuery.get()jQuery.post()をより洗練されたjQuery.ajax()構文に再構成したい人にとっては役立つかもしれません。

標準の拡張ポイントを提供するJavaScriptウィジェットがあります。 それらの1つは、 beforecreate関数です。 アイテムが作成されないようにするには、 falseを返す必要があります。

私はこの関数にjQueryを使ってAjax呼び出しを追加しました:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

しかし、私はウィジェットがアイテムを作成しないようにしたいので、コールバックではなく母関数でfalseを返すべきです。 jQueryやその他のインブラウザAPIを使用して同期AJAXリクエストを実行する方法はありますか?


jQueryのドキュメントから、 非同期オプションをfalseに指定して、同期Ajaxリクエストを取得します。 その後、あなたのコールバックはあなたの母関数が進む前にいくつかのデータを設定することができます。

あなたのコードは次のように変更されています。

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

async: falseを指定すると、ブロックされたブラウザが表示されます。 非ブロッキング同期ソリューションの場合は、以下を使用できます。

ES6 / ECMAScript2015

ES6では、ジェネレータとcoライブラリを使用できます。

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

ES7を使用すると、asyc awaitを使用できます。

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}

まず、$ .ajaxをいつ使うのか、$ .get / $を使うのかを理解する必要があります。

要求ヘッダー設定、キャッシュ設定、同期設定などのような、ajax要求に対する低レベルの制御が必要なときは、$ .ajaxに行ってください。

$ .get / $ post:私たちがajaxリクエストに対する低レベルの制御を必要としないときは、サーバーにデータを簡単に取得/ポストするだけです。 それは、

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

したがって、$ .get / $ postと他の機能(同期、キャッシュなど)を使用することはできません。

したがって、ajaxリクエストに対する低レベルの制御(sync、cacheなど)では、$ .ajax

 $.ajax({
     type: 'GET',
      url: url,
      data: data,
      success: success,
      dataType: dataType,
      async:false
    });

これは例です:

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});

これらの答えはすべて、async:Ajaxを使ってAjax呼び出しを行うと、Ajax要求が完了するまでブラウザがハングしてしまうという点を忘れてしまいます。 フロー制御ライブラリを使用すると、ブラウザをハングアップすることなくこの問題が解決されます。 Frame.js例をFrame.jsます。

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

優れたソリューション! 成功句で値を返すと、定義されていないものが戻ってくることに気がつきました。 私は変数にそれを格納し、その変数を返さなければなりませんでした。 これは私が思いついた方法です:

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}

注:これにより、asyncを使用しないでください。

Gecko 30.0(Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)以降、メインスレッドの同期要求は、ユーザーエクスペリエンスへの悪影響により非推奨になりました。

Chromeはこれについてコンソールで警告します:

メインスレッド上の同期XMLHttpRequestは、エンドユーザーの経験に有害な影響を与えるため、非推奨です。 詳細については、 https://xhr.spec.whatwg.org/

このようなことをしていると、これはあなたのページを破壊する可能性があります。これは、いつでも働くことができなくなる可能性があります。

同期しているがまだブロックしていないような気分になるようにしたい場合は、async / awaitと、新しいFetch APIのような約束に基づいたajaxを使うべきです

async function foo() {
  var res = await fetch(url)
  console.log(res.ok)
  var json = await res.json()
  console.log(json)
}

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);






asynchronous