javascript - Javascript Promise 未按正确顺序执行

问题描述

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

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

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

}

这是我得到的错误：

我怎样才能解决这个问题？

标签： javascriptes6-promise

javascript - Javascript Promise 未按正确顺序执行

问题描述

解决方案

推荐阅读