Làm cách nào tôi có thể khiến jQuery thực hiện một yêu cầu Ajax đồng bộ, thay vì không đồng bộ?

Tôi có một tiện ích JavaScript cung cấp các điểm mở rộng tiêu chuẩn. Một trong số đó là beforecreatechức năng. Nó sẽ trở lại falseđể ngăn chặn một mục được tạo ra.

Tôi đã thêm một lệnh gọi Ajax vào hàm này bằng 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);
  });
}

Nhưng tôi muốn ngăn widget của tôi tạo mục, vì vậy tôi nên quay lại falsetrong chức năng mẹ, không phải trong hàm gọi lại. Có cách nào để thực hiện yêu cầu AJAX đồng bộ bằng jQuery hoặc bất kỳ API trong trình duyệt nào khác không?

Từ tài liệu jQuery : bạn chỉ định tùy chọn không đồng bộ là sai để nhận yêu cầu Ajax đồng bộ. Sau đó, cuộc gọi lại của bạn có thể thiết lập một số dữ liệu trước khi chức năng mẹ của bạn tiến hành.

Đây là mã của bạn sẽ trông như thế nào nếu được thay đổi như được đề xuất:

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

Bạn có thể đặt thiết lập Ajax của jQuery ở chế độ đồng bộ bằng cách gọi

jQuery.ajaxSetup({async:false});

Và sau đó thực hiện các cuộc gọi Ajax của bạn bằng cách sử dụng jQuery.get( ... );

Sau đó chỉ cần bật lại một lần nữa

jQuery.ajaxSetup({async:true});

Tôi đoán nó hoạt động tương tự như được đề xuất bởi @Adam, nhưng nó có thể hữu ích cho ai đó muốn cấu hình lại jQuery.get()hoặc jQuery.post()theo jQuery.ajax()cú pháp phức tạp hơn .

Giải pháp tuyệt vời! Tôi nhận thấy khi tôi cố gắng thực hiện nó rằng nếu tôi trả về một giá trị trong mệnh đề thành công, nó sẽ trở lại là không xác định. Tôi đã phải lưu nó trong một biến và trả về biến đó. Đây là phương pháp tôi nghĩ ra:

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

Tất cả các câu trả lời này đều bỏ lỡ điểm thực hiện cuộc gọi Ajax với async: false sẽ khiến trình duyệt bị treo cho đến khi yêu cầu Ajax hoàn thành. Sử dụng thư viện kiểm soát luồng sẽ giải quyết vấn đề này mà không cần treo trình duyệt. Dưới đây là một ví dụ với 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);

Lưu ý: Bạn không nên sử dụng async: falsedo các thông báo cảnh báo này:

Bắt đầu với Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), các yêu cầu đồng bộ trên luồng chính đã không được chấp nhận do ảnh hưởng tiêu cực đến trải nghiệm người dùng.

Chrome thậm chí còn cảnh báo về điều này trong bảng điều khiển:

XMLHttpRequest đồng bộ trên luồng chính bị phản đối vì những tác động bất lợi của nó đối với trải nghiệm của người dùng cuối. Để được trợ giúp thêm, hãy kiểm tra https://xhr.spec.whatwg.org/ .

Điều này có thể phá vỡ trang của bạn nếu bạn đang làm một cái gì đó như thế này vì nó có thể ngừng hoạt động bất cứ ngày nào.

Nếu bạn muốn thực hiện theo cách vẫn có cảm giác như nếu nó đồng bộ nhưng vẫn không chặn thì bạn nên sử dụng async / await và có lẽ một số ajax dựa trên lời hứa như API Fetch mới

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

Chỉnh sửa chrome đang hoạt động trên Không cho phép đồng bộ hóa XHR khi loại bỏ trang khi trang đang bị người dùng điều hướng đi hoặc đóng. Điều này liên quan đến tải trước, dỡ, trang da và khả năng hiển thị.

nếu đây là trường hợp sử dụng của bạn sau đó bạn có thể muốn có một cái nhìn tại navigator.sendBeacon thay

Trang cũng có thể vô hiệu hóa req đồng bộ hóa với các tiêu đề http hoặc thuộc tính cho phép của iframe

Hãy nhớ rằng nếu bạn đang thực hiện một cuộc gọi Ajax tên miền chéo (bằng cách sử dụng JSONP ) - bạn không thể thực hiện đồng bộ hóa, asynccờ sẽ bị jQuery bỏ qua.

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

Đối với các cuộc gọi JSONP bạn có thể sử dụng:

1. Gọi Ajax đến miền của riêng bạn - và thực hiện phía máy chủ cuộc gọi tên miền chéo
2. Thay đổi mã của bạn để làm việc không đồng bộ
3. Sử dụng thư viện "chuỗi trình tự chức năng" như Frame.js ( câu trả lời này )
4. Chặn UI thay vì chặn thực thi ( câu trả lời này ) (cách yêu thích của tôi)

Với async: falsebạn có được cho mình một trình duyệt bị chặn. Đối với một giải pháp đồng bộ không chặn, bạn có thể sử dụng như sau:

ES6 / ECMAScript2015

Với ES6, bạn có thể sử dụng trình tạo và thư viện đồng :

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

Với ES7, bạn có thể sử dụng 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
    })(); 
}

Tôi đã sử dụng câu trả lời do Carcione đưa ra và sửa đổi nó để sử dụng 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');
    }    
}

Tôi được thêm vào datatype của 'JSON' và thay đổi .responseText để responseJSON .

Tôi cũng đã lấy trạng thái bằng cách sử dụng thuộc tính statusText của đối tượng được trả về. Lưu ý rằng đây là trạng thái của phản hồi Ajax, không phải là liệu JSON có hợp lệ hay không.

Back-end phải trả về phản hồi trong JSON chính xác (được định dạng tốt), nếu không, đối tượng được trả lại sẽ không được xác định.

Có hai khía cạnh để xem xét khi trả lời câu hỏi ban đầu. Một người đang bảo Ajax thực hiện đồng bộ (bằng cách đặt async: false ) và người kia đang trả lời phản hồi thông qua câu lệnh trả về của hàm gọi, thay vì vào hàm gọi lại.

Tôi cũng đã thử nó với POST và nó hoạt động.

Tôi đã thay đổi GET thành POST và thêm dữ liệu: 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;
}

Lưu ý rằng đoạn mã trên chỉ có tác dụng trong trường hợp async là sai . Nếu bạn đã đặt async: true , đối tượng được trả về jqxhr sẽ không hợp lệ tại thời điểm cuộc gọi AJAX trả về, chỉ sau đó khi cuộc gọi không đồng bộ kết thúc, nhưng đã quá muộn để đặt biến phản hồi .

Đây là ví dụ:

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

Đầu tiên chúng ta nên hiểu khi nào chúng ta sử dụng $ .ajax và khi chúng ta sử dụng $ .get / $.

Khi chúng tôi yêu cầu kiểm soát mức độ thấp đối với yêu cầu ajax, chẳng hạn như cài đặt tiêu đề yêu cầu, cài đặt bộ đệm, cài đặt đồng bộ, v.v. chúng tôi nên sử dụng $ .ajax.

$ .get / $. post: Khi chúng tôi không yêu cầu kiểm soát mức độ thấp đối với yêu cầu ajax. Chỉ đơn giản là nhận / đăng dữ liệu lên máy chủ. Nó là viết tắt của

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

và do đó chúng tôi không thể sử dụng các tính năng khác (đồng bộ hóa, bộ đệm, v.v.) với bài đăng $ .get / $.

Do đó, để kiểm soát mức độ thấp (đồng bộ hóa, bộ đệm, v.v.) theo yêu cầu ajax, chúng ta nên sử dụng $ .ajax

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

đây là cách triển khai đơn giản của tôi cho các yêu cầu ASYNC với jQuery. Tôi hy vọng điều này sẽ giúp bất cứ ai.

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

Bởi vì XMLHttpReponsehoạt động đồng bộ không được chấp nhận, tôi đã đưa ra giải pháp sau đây kết thúc tốt đẹp XMLHttpRequest. Điều này cho phép các truy vấn AJAX được đặt hàng trong khi vẫn có tính chất đơn phương, rất hữu ích cho các mã thông báo CSRF sử dụng một lần.

Nó cũng trong suốt nên các thư viện như jQuery sẽ hoạt động trơn tru.

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

Vì câu hỏi ban đầu là về jQuery.get, điều đáng nói ở đây là (như đã đề cập ở đây ) người ta có thể sử dụng async: falsemột cách $.get()nhưng lý tưởng là tránh nó vì không đồng bộ XMLHTTPRequestbị phản đối (và trình duyệt có thể đưa ra cảnh báo):

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

Đặt asyn:falsetrong yêu cầu ajax để làm cho nó đồng bộ.

Đây là mẫu mã:

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

Điều này có thể làm cho màn hình không phản hồi.