如何同步编写fetch?

Posted

技术标签:

【中文标题】如何同步编写fetch?【英文标题】:How to write fetch synchronously? 【发布时间】:2020-11-28 15:51:51 【问题描述】:

我是 javascript/typescript 的新手,我使用 typescript 编写二十一点应用程序,在一个玩家游戏中,我将机器人作为第二个玩家。 他的脚本是这样的:

        const botTurn = (bot : Player) =>
            while(bot.Points < 21)
            
                if(bot.Points < 18)
                
                    hitMe();
                
                else
                
                    var random = Math.random();
                    if(random < 0.5)
                    
                        hitMe();
                    
                    else
                        break;
                    
                
            

            stay();
        

hitMe 看起来像这样:

        const hitMe = () =>
        
            fetch('https://deckofcardsapi.com/api/deck/' + deckId + '/draw/?count=1')
            .then(response => response.json())
            .then(data => 
                deckLenght = data.remaining;
                for(let card of data.cards)
                
                    var newCard = getCardData(card);
                    players[currentPlayer].Hand.push(newCard);
                    renderCard(newCard, currentPlayer);
                    updatePoints();
                    updateDeckLenght();
                    check();
                
            );
        

所以 botTurn 不会等待 hitMe 完成并且我的浏览器挂起 如何解决?

【问题讨论】:

你不能把异步函数写成同步的。考虑使用 async/await。 怎么做,就像我说的我是 ts 的新手? typescriptlang.org/docs/handbook/release-notes/… 这能回答你的问题吗? How do I return the response from an asynchronous call? 【参考方案1】:

您可以使用 Async/await,它会更适合您的情况并且更容易

const hitMe = async () =>
        
         let response = await fetch('https://deckofcardsapi.com/api/deck/' + deckId + '/draw/?count=1');
              let data = await response.json();
                deckLenght = data.remaining;
                for(let card of data.cards)
                
                    var newCard = getCardData(card);
                    players[currentPlayer].Hand.push(newCard);
                    renderCard(newCard, currentPlayer);
                    updatePoints();
                    updateDeckLenght();
                    check();
                
            );
        

【讨论】:

是的,但不是,async/await 的相关用法将在 botTurn 中而不是在 hitMe 中(其中 OP 可以只是 return 承诺链)跨度> 当我使用异步时,我得到了这个错误:ES5/ES3 中的异步函数或方法需要 'Promise' 构造函数。确保您有“Promise”构造函数的声明或在您的 --lib 选项中包含“ES2015”。 但我没有在哪里更改此选项 @Dante 这可能会让你感兴趣:***.com/q/45422573/1915893 这是一个缺失的属性而不是缺失的对象,但解决方案是一样的。【参考方案2】:

您不能期望通过将异步操作包装为同步操作来获得基于同步的作用域值。

虽然你可以尝试在解析器中完成你的逻辑,即:then(result)

【讨论】:

以上是关于如何同步编写fetch?的主要内容,如果未能解决你的问题,请参考以下文章

如何同步master的代码到fork分支代码

JavaScript 中的 Promises/Fetch:如何从文本文件中提取文本

如何在 React 中使用 fetch() API 来设置状态

如何使用 fetch 在 javascript 中获取 php 错误消息

如何从 Haneke 的异步 fetch 方法返回值

如何从 fetch 中获取 JSON 数据(react-native)