@QuayS1de

Как сделать последовательный вывод данных ajax по нажатию на одну кнопку?

Хочу вывести данные из 2-х разных файлов последовательно (сначала с 1-го, затем со 2-го), нажимая на кнопку.
В данном случае получается что 2-й выводится быстрее, а 1-й не выводится во все.

let result = document.getElementById('result');
    let button = document.getElementById('button');

    button.addEventListener('click', function() {
        let promise = fetch('ajax/first-p');
        let promise2 = fetch('ajax/second-p');

        promise.then(
            function(response){
            return response.text();     
            }).then(
                function(text){
                    result.innerHTML = text;
                }
            )
        
        promise2.then(
            function(response){
                    return response.text();
            }).then(
                function(text){
                    result.innerHTML = text;
                }
                
            )
    });
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
@zkrvndm
Боты, парсеры, расширения
Используйте асинхронные функции:
let result = document.querySelector('#result');
let button = document.querySelector('#button');

button.addEventListener('click', async function() {
    result.innerHTML = await (await fetch('ajax/first-p')).text();
    result.innerHTML = await (await fetch('ajax/second-p')).text();
});

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

let result = document.querySelector('#result');
let button = document.querySelector('#button');

button.addEventListener('click', async function() {
    result.innerHTML = await (await fetch('ajax/first-p')).text();
    await wait(2000); // Ждём 2 секунды, только потом продолжаем
    result.innerHTML = await (await fetch('ajax/second-p')).text();
});

// Функция для выставления задержек:

function wait(ms) {
    return new Promise(function(success) {
        setTimeout(function() {
            success(true);
        }, ms);
    });
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы