Bagaimana saya bisa mendapatkan jQuery untuk melakukan permintaan Ajax yang sinkron, bukan asinkron?

Saya memiliki widget JavaScript yang menyediakan titik ekstensi standar. Salah satunya adalah beforecreatefungsinya. Itu harus kembali falseuntuk mencegah barang tidak dibuat.

Saya telah menambahkan panggilan Ajax ke fungsi ini menggunakan jQuery:

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);
  });
}

Tapi saya ingin mencegah widget saya membuat item, jadi saya harus kembali falsepada fungsi ibu, bukan di callback. Apakah ada cara untuk melakukan permintaan AJAX sinkron menggunakan jQuery atau API di browser lainnya?

Dari dokumentasi jQuery : Anda menentukan opsi asynchronous menjadi false untuk mendapatkan permintaan Ajax yang sinkron. Kemudian panggilan balik Anda dapat mengatur beberapa data sebelum fungsi ibumu berlanjut.

Ini akan terlihat seperti apa kode Anda jika diubah seperti yang disarankan:

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
    });
}

Anda dapat menempatkan pengaturan Ajax jQuery dalam mode sinkron dengan memanggil

jQuery.ajaxSetup({async:false});

Dan kemudian lakukan panggilan Ajax Anda menggunakan jQuery.get( ... );

Kemudian cukup nyalakan sekali lagi

jQuery.ajaxSetup({async:true});

Saya kira itu bekerja sama dengan yang disarankan oleh @Adam, tetapi mungkin bermanfaat bagi seseorang yang ingin mengkonfigurasi ulang jQuery.get()atau sintaks yang jQuery.post()lebih rumit jQuery.ajax().

Solusi yang sangat baik! Saya perhatikan ketika saya mencoba menerapkannya bahwa jika saya mengembalikan nilai dalam klausa keberhasilan, itu kembali sebagai tidak terdefinisi. Saya harus menyimpannya dalam variabel dan mengembalikan variabel itu. Ini adalah metode yang saya buat:

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;
}

Semua jawaban ini kehilangan titik bahwa melakukan panggilan Ajax dengan async: false akan menyebabkan browser hang sampai permintaan Ajax selesai. Menggunakan pustaka kontrol aliran akan menyelesaikan masalah ini tanpa menutup browser. Berikut ini adalah contoh dengan 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 getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


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

Catatan: Anda tidak boleh menggunakan async: falsekarena pesan peringatan ini:

Dimulai dengan Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), permintaan sinkron pada utas utama telah ditinggalkan karena efek negatif terhadap pengalaman pengguna.

Chrome bahkan memperingatkan tentang hal ini di konsol:

Sinkronisasi XMLHttpRequest pada utas utama sudah usang karena efeknya yang merugikan bagi pengalaman pengguna akhir. Untuk bantuan lebih lanjut, periksa https://xhr.spec.whatwg.org/ .

Ini dapat merusak halaman Anda jika Anda melakukan sesuatu seperti ini karena itu bisa berhenti bekerja setiap hari.

Jika Anda ingin melakukannya dengan cara yang masih terasa seperti itu sinkron tetapi masih tidak memblokir maka Anda harus menggunakan async / tunggu dan mungkin juga beberapa ajax yang didasarkan pada janji-janji seperti yang baru Ambil API baru

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

Sunting chrome bekerja pada Menonaktifkan sinkronisasi XHR dalam pemecatan halaman saat halaman sedang dinavigasi atau ditutup oleh pengguna. Ini melibatkan sebelumunload, unload, menyembunyikan halaman dan perubahan visibilitas.

jika ini adalah use case Anda maka Anda mungkin ingin melihat navigator.sendBeacon sebagai gantinya

Dimungkinkan juga untuk menonaktifkan req sinkronisasi dengan header http atau atribut iframe yang memungkinkan

Perlu diingat bahwa jika Anda melakukan panggilan Ajax lintas-domain (dengan menggunakan JSONP ) - Anda tidak dapat melakukannya secara sinkron, asyncbendera akan diabaikan oleh jQuery.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

Untuk panggilan JSONP Anda bisa menggunakan:

1. Ajax-panggilan ke domain Anda sendiri - dan lakukan sisi server panggilan lintas-domain
2. Ubah kode Anda untuk bekerja secara tidak sinkron
3. Gunakan pustaka "sequencer fungsi" seperti Frame.js ( jawaban ini )
4. Blokir UI alih-alih menghalangi eksekusi ( jawaban ini ) (cara favorit saya)

Dengan async: falseAnda mendapatkan sendiri browser yang diblokir. Untuk solusi sinkron yang tidak menghalangi Anda dapat menggunakan yang berikut:

ES6 / ECMAScript2015

Dengan ES6 Anda dapat menggunakan generator & perpustakaan bersama :

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

Dengan ES7 Anda bisa menggunakan asyc menunggu:

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
    })(); 
}

Saya menggunakan jawaban yang diberikan oleh Carcione dan memodifikasinya untuk menggunakan JSON.

 function getUrlJsonSync(url){

    var jqxhr = $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}    

function testGetUrlJsonSync()
{
    var reply = getUrlJsonSync("myurl");

    if (reply.valid == 'OK')
    {
        console.dir(reply.data);
    }
    else
    {
        alert('not valid');
    }    
}

Saya menambahkan dataType dari 'JSON' dan mengubah .responseText untuk responseJSON .

Saya juga mengambil status menggunakan properti statusText dari objek yang dikembalikan. Perhatikan, bahwa ini adalah status respons Ajax, bukan apakah JSON valid.

Bagian belakang harus mengembalikan respons dalam JSON yang benar (terbentuk dengan baik), jika tidak objek yang dikembalikan akan tidak terdefinisi.

Ada dua aspek yang harus dipertimbangkan ketika menjawab pertanyaan awal. Seseorang memberitahu Ajax untuk melakukan secara sinkron (dengan mengatur async: false ) dan yang lainnya mengembalikan respons melalui pernyataan pengembalian fungsi panggilan, alih-alih menjadi fungsi panggilan balik.

Saya juga mencobanya dengan POST dan berhasil.

Saya mengubah GET menjadi POST dan menambahkan data: postdata

function postUrlJsonSync(url, postdata){

    var jqxhr = $.ajax({
        type: "POST",
        url: url,
        data: postdata,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}

Perhatikan bahwa kode di atas hanya bekerja dalam kasus di mana async adalah palsu . Jika Anda menetapkan async: true objek yang dikembalikan jqxhr tidak akan valid pada saat panggilan AJAX kembali, hanya nanti ketika panggilan asinkron telah selesai, tetapi itu terlalu terlambat untuk mengatur variabel respons .

Ini adalah contoh:

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

Pertama-tama kita harus mengerti kapan kita menggunakan $ .ajax dan kapan kita menggunakan $ .get / $. Post

Ketika kita membutuhkan kontrol level rendah atas permintaan ajax seperti pengaturan header permintaan, pengaturan caching, pengaturan sinkron dll. Maka kita harus mencari $ .ajax.

$ .get / $. post: Ketika kita tidak memerlukan kontrol level rendah atas permintaan ajax. Hanya sederhana dapatkan / posting data ke server. Ini adalah singkatan

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

dan karenanya kami tidak dapat menggunakan fitur lain (sinkronisasi, cache, dll.) dengan $ .get / $. post.

Karenanya untuk kontrol level rendah (sinkronisasi, cache, dll.) Atas permintaan ajax, kita harus menggunakan $ .ajax

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

ini adalah implementasi sederhana saya untuk permintaan ASYNC dengan jQuery. Saya harap ini membantu siapa pun.

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();

Karena XMLHttpReponseoperasi sinkron sudah usang saya datang dengan solusi berikut yang membungkus XMLHttpRequest. Ini memungkinkan permintaan AJAX yang dipesan sementara masih bersifat asiknron, yang sangat berguna untuk token CSRF sekali pakai.

Ini juga transparan sehingga perpustakaan seperti jQuery akan beroperasi dengan lancar.

/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
  var xhr   = new _XMLHttpRequest();
  var _send = xhr.send;

  xhr.send = function()
  {
    /* queue the request, and if it's the first, process it */
    XHRQueue.push([this, arguments]);
    if (XHRQueue.length == 1)
      this.processQueue();
  };

  xhr.processQueue = function()
  {
    var call = XHRQueue[0];
    var xhr  = call[0];
    var args = call[1];

    /* you could also set a CSRF token header here */

    /* send the request */
    _send.apply(xhr, args);
  };

  xhr.addEventListener('load', function(e)
  {
    /* you could also retrieve a CSRF token header here */

    /* remove the completed request and if there is more, trigger the next */
    XHRQueue.shift();
    if (XHRQueue.length)
      this.processQueue();
  });

  return xhr;
};

Karena pertanyaan aslinya adalah tentang jQuery.get, perlu disebutkan di sini bahwa (seperti yang disebutkan di sini ) orang dapat menggunakan async: falsedalam $.get()tetapi idealnya menghindarinya karena asinkron XMLHTTPRequestsudah usang (dan browser dapat memberikan peringatan):

$.get({
  url: url,// mandatory
  data: data,
  success: success,
  dataType: dataType,
  async:false // to make it synchronous
});

Setel asyn:falsedalam permintaan ajax untuk membuatnya sinkron.

Berikut ini contoh kode:

 $.ajax({
    url: 'some_url',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

Ini dapat membuat layar tidak responsif.