Ajax 调用请求需要更长的时间来执行

Question

在 MVC 和 knockout.js 应用程序调用中使用以下函数进行

GetCalendar: function (monthYear) {
    var html = '';
    $.ajax({
        url: baseURL + 'ajax/GetCalendarHTML',
        type: 'GET',
        cache: true,
        data: {
            month: monthYear.month, year: monthYear.year
        },
        success: function (cal) {
            $('#cal' + monthYear.month + monthYear.year).html(cal);
        },
        error: function (data) {

        }
    });
    return html;
}

这会以 json 形式将数据转换为 HTML，如下所示

<table cellspacing='0' class='calendar'><thead> <tr class='month-year'><th colspan='7'><span class='month'>March</span><span class='year'>2023</span></th></tr><tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td></tr></thead><tbody border='1'><tr><td class='premonth'></td><td class='premonth'></td><td class='premonth'></td><td style='background-color:#886B29'>1</td><td style='background-color:#886B29'>2</td><td style='background-color:#886B29'>3</td><td style='background-color:#886B29'>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr><tr><td style='background-color:#FEF200'>12</td><td style='background-color:#FEF200'>13</td><td style='background-color:#FEF200'>14</td><td style='background-color:#FEF200'>15</td><td style='background-color:#FEF200'>16</td><td style='background-color:#FEF200'>17</td><td style='background-color:#FEF200'>18</td></tr><tr><td style='background-color:#FEF200'>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td style='background-color:#a02647'>25</td></tr><tr><td style='background-color:#a02647'>26</td><td style='background-color:#a02647'>27</td><td style='background-color:#a02647'>28</td><td style='background-color:#a02647'>29</td><td style='background-color:#a02647'>30</td><td style='background-color:#a02647'>31</td></tr></tbody></table>

但是这些请求每个月都会发送，并且由于某种原因需要很长时间。一些用户报告长达 5-7 分钟，但对我来说，它在 1 分钟内下载，这仍然很慢。

功能可以换成新的可以更快下载数据的东西

ajax/GetCalendarHTML?month=2&year=2023

这是6-7年前开发的老应用

我将其转换为 Fetch 请求，但这不起作用

async function GetCalendar(monthYear) {
  try {
    const response = await fetch('${baseURL}ajax/GetCalendarHTML?month=${monthYear.month}&year=${monthYear.year}', {
      cache: 'default',
      method: 'GET'
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const cal = await response.text();
    $('#cal' + monthYear.month + monthYear.year).html(cal);
    return cal;
  } catch (error) {
    console.error('Error fetching calendar:', error);
  }
}

您可以在下面的屏幕截图中看到状态仍处于待处理状态，在我的情况下大约需要 1 分钟，一些客户说显示所有日历项目需要大约 5 分钟

一直没能找到延迟的原因

Answer 1

我不认为客户端会延迟几分钟。这通常是服务器端问题，或者需要优化数据库服务器查询。所以继续使用 Ajax ，只是可能通过完全删除它来明确

 cache: true,
        data: {
            month: monthYear.month, year: monthYear.year
        },

并将数据添加到 url

 url: '${baseURL}ajax/GetCalendarHTML?month=${monthYear.month}&year=${monthYear.year}'