Javascript 在JS模块模式中使用承诺的xmlhttprequest

我有一个POST xmlhttprequest包在一个承诺中，它在一个iLife中，因为我试图使用揭示模块模式。基本上，我正在成功地将一个值传递给我的脚本，该脚本将返回一个响应。响应是来自我数据库的NBA球员列表。但是，在单独的IIFE全局控制器模块中访问此响应时，我遇到了一些问题

我有三个模块，一个dataController模块，一个UIController模块和一个名为Controller的全局模块。我希望全局控制器将UI和数据缝合在一起，以便将UI和数据完全分开

我在代码中留下了几个以//**开头的注释，它们详细说明了我要做的事情

我希望这是有道理的

谢谢

// dataController module
const dataController = (() => {
    return {
        ajaxRequestLoadPlayer: (data) => {
            const promise = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'resources/loadPlayers.php', true);
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        resolve(response);
                    }
                    else {
                        reject(xhr.statusText);
                    }
                };
                xhr.send(data);
            });
           promise.then((response) => {
           // **if I console log the response here I can see the 
           // response  **
              return response;
           });
        },
    }
})();


// UI module
const UIController = (() => {
    // get the value of the select option
    // var playerLoadSelect = document.querySelector('#load-players-select');
    // var playerLoadSelectValue = playerLoadSelect.options[playerLoadSelect.selectedIndex].value;
    return {
        getPlayerFormInput: () => {
            return document.querySelector('#load-players-select').value;
        }
    }
})();


// controller module
const controller = ((dataCtrl, UICtrl) => {
    // add event listeners
    const setupEventListeners = () => {
        document.querySelector('.load-players').addEventListener("submit", loadPlayersForm);
    };
    // 1. get input value
    const loadPlayersForm = e => {
        e.preventDefault();
        const inputLoadPlayers = UICtrl.getPlayerFormInput();
        dataCtrl.ajaxRequestLoadPlayer(inputLoadPlayers);
    };
    // ** I would like to be able to access the response here so that I 
    // can use it with some functionality from the UIController above 
    return {
        init: () => {
            console.log('app started');
            setupEventListeners();
        }

    }
    // bridge the data from dataController to the ui update code
})(dataController, UIController);

controller.init();

---

您需要返回ajaxRequestLoadPlayer的承诺，并在调用时使用另一个承诺

const dataController = (() => {
    return {
        ajaxRequestLoadPlayer: (data) => {
            // return promise
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'resources/loadPlayers.php', true);
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        resolve(response);
                    }
                    else {
                        reject(xhr.statusText);
                    }
                };
                xhr.send(data);
            });           
        }
    }
})();


// usage    
dataController.ajaxRequestLoadPlayer(inputData).then(data=>{
   // consume the response data
   console.log(data)
}) 

---

您需要返回ajaxRequestLoadPlayer的承诺，然后在调用时使用另一个承诺。现在，该函数没有返回，也比XMLHttpRequest更易于使用更现代的获取API，它是基于promise的hanks@charlietfl。真不敢相信我居然没发现！！请提交您的评论作为答复，我可以投票表决。