在进行ajax调用后，为什么我无法浏览其他页面？

Question

在传统的MVC 5 Web应用程序中，我希望用户能够在单击按钮后继续浏览，该按钮会对长时间运行的操作进行ajax调用。

（注意：操作返回void - 我对回复不感兴趣）

  

当我点击按钮时，在动作完成之前我无法发出任何其他请求。

编辑：以下是ajax代码：

$('#EmailReport') //
    .click(function() {
        $.ajax({
            type: "POST",
            url: '/Home/EmailReport',
            complete: function() {console.log("done")},
            async: true
        });
    });

控制器

[HttpPost]
public async Task EmailReport()
{
   // for testing - sleep for 10 seconds
   await Task.Delay(TimeSpan.FromSeconds(10));
}

以下是Chrome开发工具中的屏幕截图：

EmailReport是ajax调用，底部的两个请求是我尝试浏览到另一个页面 - 因为您可以看到第一个请求是pending，任何后续请求都是{{1} }

有没有人有任何想法如何解决或解决此问题？

Answer 1

问题在于，您的操作等待完成任务。一旦开始任务，请不要让它等待并返回。

[HttpPost]
public void EmailReport()
{
   // for testing - sleep for 10 seconds
   var myTask = Task.Delay(TimeSpan.FromSeconds(10));
   myTask.Start();
}

您的请求被取消，因为它是页面重定向请求，并且在发布新请求时取消旧页面重定向请求（例如，当您单击链接2次，忽略第一次点击时）。这是浏览器实现它的方式。它与你问题的根源无关。

Answer 2

最简单的方法如下：

// install the plugin
Vue.use(VueI18n)

// load the `fr` locale dynamically
Vue.locale('fr',
  function () {
    // should return a promise
    return new Promise(function (resolve, reject) {
      $.ajax('../resources/i18n/locales.json').done(resolve).fail(reject)
    })
  },
  function () {
    vue.config.lang = lang
  }
)

与长线运行作业的线程相比，最好使用Task，以避免核心关联和更好的CPU利用率。

Answer 3

使用后台流程

[HttpPost]
public JsonResult EmailReport()
{
    Thread email= new Thread(delegate ()
   {
          generatereports();
   });
   email.IsBackground = true;
   email.Start();
   return null; 
}

Answer 4

似乎Navigator.sendBeacon() api将满足您的目的。它用于通过HTTP异步传输少量数据到Web服务器。虽然这是一项实验性技术，但在Chrome 39 +，Firefox 31 +，opera 26+支持下，其他浏览器都有polyfill。