Javascript 未按正确顺序执行承诺

Question

我有问题。我正在尝试执行以下操作：
我首先检查 url 是否包含 agentId 参数。然后，如果给定的 agentId 属于有效代理，我想检查我的数据库。如果是这样，那么我想将该代理的整个对象存储在一个名为 selectedAgent 的变量中。然后我想在接下来的 2 个函数中使用 selectedAgent。

问题是它在第 106 行给我错误：Uncaught TypeError: Cannot read property 'active' of null。这是由于链中的最后一个函数先于其余函数执行而造成的。这是代码：

const urlString = window.location.search;
const urlParams = new URLSearchParams(urlString);
let selectedAgentId = urlParams.get('agentId');
let selectedAgent = null;


document.addEventListener('DOMContentLoaded', function(event) {

    getStartupAgentData().then(fillAgentComboBox()).then(setToggleButtonContent());

});


function getStartupAgentData() {

    return new Promise(function(resolve, reject) {
        $.ajax({
            type: 'POST',
            url: 'overview_get_agent_ajax.php',
            data: 'agentid=' + selectedAgentId, 
            dataType: 'text', 
            success: function(data) {
                selectedAgent = JSON.parse(data)[0];
                console.log(selectedAgent);
                resolve(true);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("Failed receiving agents")
                reject(true);
            }
        });
    });

}


function fillAgentComboBox() {

    console.log(selectedAgent);

    return new Promise(function(resolve, reject) {
        getAllAgentData().then(function(agents) {
            
            let comboBoxAgent = document.getElementById("comboBoxAgent");

            for (let i = 0; i < agents.length; i++) {
                let option = document.createElement("option");
                
                // Agent data
                let id = agents[i].id;
                let owner = agents[i].owner;
                let exchange = agents[i].exchange;
                let remark = agents[i].remark;

                let text = "Agent " + id.toString().padStart(4, "0") + " - " + owner + " - " + exchange + " - " + remark;
                option.text = text;
                option.value = id;
                comboBoxAgent.add(option);

                if (selectedAgent === null) {
                    option.selected = true;
                    selectedAgent = agents[i];
                }
                else if (id === selectedAgentId) {
                    option.selected = true;
                    selectedAgent = agents[i];
                }
            }

            // Add agent id to url for other javascripts
            window.history.replaceState(null, null, "?agentId=" + selectedAgent.id);

            resolve(true);

        });

    });

}


function getAllAgentData() {

    return new Promise(function(resolve, reject) {
        $.ajax({
            type: 'POST',
            url: 'overview_get_agents_ajax.php',
            data: '', 
            dataType: 'text', 
            success: function(data) {
                resolve(JSON.parse(data));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                reject(true);
            }
        });
    });

}


function setToggleButtonContent() {

    let btnToggleAgent = document.getElementById("btnToggleAgent");

    if (selectedAgent.active == true) {
        btnToggleAgent.style.background = "#EE4141";
        btnToggleAgent.innerHTML = "Stop";
    }
    else {
        btnToggleAgent.style.background = "#44B642";
        btnToggleAgent.innerHTML = "Start";
    }

}

这是我得到的错误：

我该如何解决这个问题？

Answer 1

您希望 then(fillAgentComboBox) 没有 ()，它会在适当的位置调用您的函数并立即启动它。你也可以做 then(() => fillAgentComboBox())

Answer 2

将函数传递给 .then 而不是调用它们并传递它们的 return 值。

getStartupAgentData().then(fillAgentComboBox).then(setToggleButtonContent);

Javascript 未按正确顺序执行承诺

Javascript Promises are not executed in the correct order

javascript

es6-promise