第一个 jQuery ajax 调用与第二个冲突

Posted 2023-05-09

【中文标题】第一个 jQuery ajax 调用与第二个冲突

【英文标题】：First jQuery ajax call collides with the second

【发布时间】：2016-05-05 04:24:19

【问题描述】：

我有一个名为 loadPosts 的 jQuery 函数，它接受三个参数：skip、take 和 container。 Skip 告诉 MVC Json 调用要跳过多少个帖子，take 表示要接受多少个帖子，而 container 是写入帖子的元素。

function loadPosts(skip, take, container) 
    $.ajax(
        url: '/Ajax/LoadPosts',
        type: 'POST',
        dataType: 'json',
        data:  skip: skip, take: take ,
        success: function (posts) 
            if (posts == null) 
                return;
            
            var items = '';
            $.each(posts, function (p, post) 
                items += ...;
            );

            alert(items);

            var $itemBlock = $(items);
            container.append($itemBlock);
            container.imagesLoaded(function () 
                container.masonry('appended', $itemBlock);
            );

            return;
        ,
        error: function (xhr, ajaxOptions, thrownError) 
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(thrownError);
            return;
        
    );

该方法在页面加载时被调用两次；首先加载最新的帖子（skip = 0，take = 10），然后加载完整的帖子集（skip = pageIndex * pageSize，take = pageSize）。

$(document).ready(function () 
    if ($('#post-container') && $('#recent-container')) 
        var skip = (pageIndex * pageSize);
        var take = pageSize;

        var $postContainer = $('#post-container');
        loadPosts(skip, take, $postContainer);

        var $recentPostContainer = $('#recent-container');
        loadPosts(0, 10, $recentPostContainer);

    

每个函数本身（如果我注释掉其中一个）都可以正常工作。只有当我同时运行这两个函数时，我才会遇到两个异常之一。

1. ExecuteReader requires an open and available Connection. The connection's current state is connecting.
2. There is already an open DataReader associated with this Command which must be closed first.

这是那个函数

public static bool Get(int skip, int take, ListSortDirection direction, out List<Post> posts)

    try
    
        posts = Db.Posts.OrderBy(p => p.DateTimeCreated, direction).Skip(skip).Take(take).ToList();
        return true;
    
    catch (Exception ex)
    
        posts = new List<Post>();
        return false;
    

我认为正在发生的是，第二个实例在第一个实例有机会完成之前就开始了。我想做的是找到一种方法，等到第一个完成后再开始另一个。

任何帮助将不胜感激。 谢谢！

【参考方案1】：

返回$.ajax内部返回的promise。

function loadPosts(skip, take, container) 
   return $.ajax( /* options left out for brevity */)

然后可以使用第一个实例的 promise 回调来初始化第二个实例

loadPosts(skip, take, $postContainer).done(function()
    loadPosts(0, 10, $recentPostContainer);
);

【讨论】：

简单无痛！很高兴它有帮助

请注意，如果 first 失败...second 不会被调用，但函数中有错误处理程序。如果你想第二次开火，可以使用finally 而不是done