WebApi 2

时间:2015-09-09 10:44:06

标签: javascript ajax multithreading web-services xmlhttprequest

我有一个webApi 2应用程序。我以这种方式Ajax多次使用async:false,因为有时候

  

我调用的语句必须在我的函数中的下一个语句被调用之前完成

我得到一个浏览器警告

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。

据我所知,同步调用Web服务会产生诸如漫长的等待,浏览器压缩等问题。但是我需要在继续下一个语句之前得到结果。

我需要知道

  1. 我怎样才能避免这种警告,并使呼叫异步?
  2. 为什么Synchronous XMLHttpRequest on the main thread is deprecated?这句话是什么意思?

1 个答案:

答案 0 :(得分:1)

您可以将同步调用移至网络工作者。但同样,你会成功async

最好将当前同步调用服务器作为异步调用。

示例(伪同步呼叫代码):

var dataFromServer = makeSyncCallToServer();
//use dataFromServer

示例(伪异步调用代码):

makeAsyncCallToServer(function(dataFromServer) {
  //use dataFromServer here
});

如果您想对服务器进行多次调用,那么async便可在此处使用。

例如,您可以使用async.series

async.series([yourAsnycFunctionOne, yourAsnycFunctionTwo, yourAsnycFunctionThree], finalFunctionToCall)

因此系列会调用yourAsnycFunctionOne, yourAsnycFunctionTwo, yourAsnycFunctionThree,系列结束时会调用finalFunctionToCall

在您的情况下,您可以执行以下操作:

function getCustomerList(callback) {
   //make the async http call and call "callback" with the customer data
}
function postFormDataToServer(formdata, callback) {
  //send form data server and call "callback" after successful post
}
function hideGrid() {}
function hideForm() {}
function showForm() {}
function showGrid() {}
$('#add-button').on('click', function() {
  showForm();
  hideGrid();
});
$('#form-id').on('submit', function(e) {
  e.preventDefault();
  var formdata = {/**populate form data**/};
  hideForm();
  postFormDataToServer(formdata, function() {
    getCustomerList(function(customerList) {
      //populate grid with new data
      showGrid();
    });
  });
});