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

Question

[Nekio]

Хочу вывести данные из 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;
                }
                
            )
    });

Answer 1

[Надим]

Используйте асинхронные функции:

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);
    });
}

Comments

[Nekio]

При запуске выдаёт следующую ошибку:
Uncaught (in promise) TypeError: promise.then is not a function
at HTMLInputElement.

[Надим]

QuayS1de, вы свой старый код-то уберите. Это ошибка к вашему старому коду относится, а не к моему.

[Nekio]

Все работает, благодарю.