javascript - 一次立即发出两个请求。 ASP MVC + JQuery Ajax

Question

MVC 应用程序(ASP.NET MVC，客户端:jquery)。

问题:当第一个 ajax 请求完成时，第二个 ajax 请求等待。

我需要，当第一个和第二个 ajax 请求同时立即执行时。

页面发送到服务器以确定记录数(第一个 ajax 请求)，非常长(~5-7 秒)。 运算符(operator)单击按钮打开卡片进行编辑(第二个 ajax 请求，快速获取 Dto 模型)。 用户不需要等待第一个请求，他想立即工作。

因此，在网络页面的 Chrome 中，有两个请求处于“待定”状态。第二个等待第一个。

问题，如何发送请求，异步执行？

第一个 ajax 请求:

`window.jQuery`.ajax({
type: 'POST',
url: Url.Action("GetCountBooks", "Book");
contentType: "application/json; charset=utf-8",          
dataType: 'json',
data: JSON.stringify({ typeBook: "...", filter: "..." };),
success: function (data) {
    // show in UI page the count of books by filter and params
},
error: function (data) {
    //show error
}});

public class BookController : Controller
{   
    [HttpPost]
    public NJsonResult GetCountBooks(string typeBook, Filter filter)
    {
        var data = DbProvider.GetCountBooks(typeBook, filter)
        if (data.Result == ResultType.Success)
        {
            var count = data.Data;

            return new NJsonResult
            {
                Data = new { Data = count }
            };          
        }

        return new NJsonResult
        {
            Data = new { Error = "Error while counting the books." }
        };
    }
}

第二个 ajax 请求:

`window.jQuery`.ajax({
type: 'POST',
dataType: 'json',
contentType: "application/json",
url: Url.Action("GetBookById", "Book"),
data: JSON.stringify({ id: bookId }),
success: function (data) {
   // show jquery dialog form to edit dto-model.
},
error: function (data) {
   //show error
}});

public class BookController : Controller
{   
    [HttpPost]
    public NJsonResult GetBookById(int id)
    {
        var data = DbProvider.GetBookById(id)
        if (data.Result == ResultType.Success)
        {
            var book = data.Data;               
            return new NJsonResult
            {
                Data = new { Data = book }
            };
            return new NJsonResult
            {
                Data = new { Error = "The book is not found." }
            };
        }    
        return new NJsonResult
        {
            Data = new { Error = "Error while getting the book." }
        };
    }
}

我无法将 ajax 请求合并为一个!用户可以发送各种二次请求。

Answer 1

您需要一个 fork-join 拆分器来 fork 2 个任务并根据某些条件加入。

例如这是我的实现:

function fork(promises) {
  return {
    join: (callback) => {
        let numOfTasks = promises.length;
        let forkId = Math.ceil(Math.random() * 1000);
        fork_join_map[forkId] = {
            expected: numOfTasks,
            current: 0
        };
        promises.forEach((p) => {
            p.then((data) => {
                fork_join_map[forkId].current++;
                if (fork_join_map[forkId].expected === fork_join_map[forkId].current) {
                    if (callback) callback(data)
                }
            })
        });
    }
}}

将任意数量的异步任务(promises)传递到 fork 方法中，并在所有完成后传递到 join 中。这里的 done 条件由简单的全局对象 fork_join_map 管理，它跟踪你的 fork-join 过程的结果(全局不是很好，但它只是一个例子)。特定的 fork-join 由 forkId 标识，在此示例中为 0..1000，这又不太好，但我希望你明白了。

使用 jQuery，您可以使用 $.when( $.ajax(..your ajax call) ) 创建 promise

最后你可以这样加入你的 promise

fork([
  $.when( $.ajax(..your ajax call 1) ),
  $.when( $.ajax(..your ajax call 2) )
]).join(() => {
  // do your logic here when both calls are done
});

这是我自己的实现，jQuery 中可能已经为此编写了库函数 - 我不知道。希望这至少能给你一个正确的方向。