强制 JQuery $(document).ready 等待 promise 解决答案

【问题标题】：force JQuery $(document).ready to wait for promise to resolve强制 JQuery $(document).ready 等待 promise 解决
【发布时间】：2020-04-24 19:03:01
【问题描述】：

所以我在为获取请求的响应分配变量时遇到了一些麻烦。我本质上想对我的 API 运行一个获取请求，这将返回一个值。然后我想将该值分配给 html 中的一个元素。

当我运行我拥有的东西时，我可以看到该值被分配为Promise {<pending>}

我见过的一些解决方案是我可以运行多个$(document).ready(function(){});，但我认为在继续下一个$(document).ready(function(){});之前它仍然无法解决承诺

这是我目前所拥有的

            var bal;
            $(document).ready(function(){
                function getCookie(name){
                    var value = "; " + document.cookie;
                    var parts = value.split("; " + name + "=");
                    if(parts.length == 2) return parts.pop().split(";").shift();
                }
                var decoded = jwt_decode(getCookie("JWT"));
                console.log(decoded.email);
                const url = "http://localhost:3001/wallets/" + decoded.email;
                bal = fetch(url).then((resp) => {
                    return resp.json();
                }).then((data) => {
                    console.log(data[0].balance);
                    return data[0].balance;
                }).catch((error) => {
                    console.log(error);
                });
                $(document).trigger("my-event");
            });
            $(document).on("my-event", function(){
                    console.log(bal);
                    console.log(parseFloat(bal));
                     var oMain = new CMain({
                                    win_occurrence:30,        //WIN PERCENTAGE.SET A VALUE FROM 0 TO 100.
                                    slot_cash: 100,          //THIS IS THE CURRENT SLOT CASH AMOUNT. THE GAME CHECKS IF THERE IS AVAILABLE CASH FOR WINNINGS.
                                    min_reel_loop:0,          //NUMBER OF REEL LOOPS BEFORE SLOT STOPS  
                                    reel_delay: 6,            //NUMBER OF FRAMES TO DELAY THE REELS THAT START AFTER THE FIRST ONE
                                    time_show_win:2000,       //DURATION IN MILLISECONDS OF THE WINNING COMBO SHOWING
                                    time_show_all_wins: 2000, //DURATION IN MILLISECONDS OF ALL WINNING COMBO
                                    money:bal,               //STARING CREDIT FOR THE USER
...

对于 promise 的工作原理以及如何强制让事情等待它们解决，我仍然有些困惑。

【问题讨论】：

bal 将永远是一个承诺，即使它已经解决。
如何将整个 $(document).ready() 东西完全包装在另一个函数中，然后从你的 promise 的 .then() 调用该函数？ -- promises 的 .then() 特性以一种或另一种方式意味着你可以确定它会在 promise 解决后发生。参见例如MDN on promises
@Yishmeray 这会确保承诺在继续之前得到解决吗？
是的，这就是 .then() 的全部意义所在！请参阅该 MDN 部分。显然还有其他关于 Promise 的资源，我承认这有点棘手。我当然不是大师。

标签： javascript jquery fetch es6-promise

【解决方案1】：

只是为了提供更新并结束这个问题。这是我最终解决问题的方法。

const finishedPromise = fetch(url).then(r=r.json()).then(data => {
    return data[0].balance'
});

然后在我分配我简单使用的值的函数中

money: await finsihedPromise

【讨论】：