Почему мой асинхронный вызов jQuery ajax блокируется?

avatar
Peter F.
9 августа 2021 в 01:23
86
1
1

Я читал много вопросов, похожих на мой, но так и не нашел ответа на свою проблему, поэтому прошу прощения, если это звучит так знакомо.

У меня есть веб-приложение Laravel/PHP, которое загружает файл транзакций Excel. Они обрабатываются как успех или неудача. В разработке это занимает около двух секунд на транзакцию. Типичный файл содержит около 40 транзакций. Теперь я хочу использовать индикатор выполнения Bootstrap, чтобы предоставить пользователю обратную связь о том, как далеко идет обработка.

У меня есть страница с кнопкой для запуска импорта, ранее выбранный файл и другие вещи произошли, поэтому я могу просто вызвать внутренний URL-адрес (audit.import) с правильными параметрами, и загрузка произойдет и будет работать. Итак, что я сделал, так это создал URL-адрес для возврата статуса загрузки с сервера (loadprogress). План состоит в том, что loadprogress будет вызываться через ajax и магию js setTimeout, чтобы опросить серверную часть. Как только мы увидим, что все записи были успешными или нет, опрос может закончиться.

Проблема в том, что опрос loadprogress срабатывает регулярно, пока я не нажму кнопку, чтобы начать загрузку основного файла. Затем он не запустится снова, пока не завершится загрузка основного файла, что удалит запланированное использование индикатора выполнения.

Мой javascript выглядит следующим образом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    var fullname = '<?php echo $fullname; ?>';

                    $("#ajaxButton").click(function(event) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            url: '/audit.import/1/' + fullname,
                            type: 'POST',
                            async: true,
                        }).always(function(xhr, status) {
                            console.log("Import complete with status of " + status);
                        });
                        console.log("sent async call to perform audit");
                    });

                    (function loadProgress() {
                        $.ajax({
                            type: 'GET',
                            url: '/loadprogress',
                        }).done(function(result) {
                            console.log(result);
                        }).then(function() {
                            setTimeout(loadProgress, 100);
                        })
                    })();
                });
            </script>

Я работаю на Mac в Safari, но попробовал Chrome на Mac с теми же результатами.

Любая помощь будет приветствоваться.

Спасибо.

Источник
Phil
9 августа 2021 в 01:42
0

Не ответ на ваш вопрос, но вы можете добиться большего успеха с событиями, отправленными сервером.

Bravo
9 августа 2021 в 01:44
2

честно говоря, это, вероятно, проблема с кодом на стороне сервера

Phil
9 августа 2021 в 03:10
2

Как вы проверяете поведение, которое видите? Используете ли вы панель Сеть в инструментах разработки вашего браузера? Если да, то что именно вы видите?

Peter F.
9 августа 2021 в 06:15
0

@браво за победу. Спасибо, приятель, это действительно похоже на то, что я использую однопоточный сервер разработки. Спасибо.

Ответы (1)

avatar
Peter F.
13 августа 2021 в 10:46
0

Это действительно была проблема на стороне сервера. Я работал на тестовом сервере с одним потоком, что означает отсутствие второго потока для моего второго процесса. Отсюда блок. По умолчанию тестовый сервер Laravel, который поставляется вместе с установкой, является только однопоточным. Факт, который я упустил при настройке тестового сервера.