How to write fetch synchronously?

Question

I'm new in javascript/typescript I write blackjack app using typescript and in one player game I have bot as second player. His script looks like this:

        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();
        }

and hitMe looks like this:

        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();
                }
            });
        }

So botTurn doesn't wait for hitMe to finish and my browser hangs How to fix that?

you cant write an asynchronous function as synchronous. consider using async/await. — Daniel A. White, Aug 08 '20 at 14:33
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-7.html — Daniel A. White, Aug 08 '20 at 14:39
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Kunal Mukherjee, Aug 08 '20 at 15:11

score 2 · Accepted Answer · answered Aug 08 '20 at 14:56

2

you can use Async/await it will be better for your case and easier

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();
                }
            });
        }

answered Aug 08 '20 at 14:56

Aly Abd El Rahman

281
1
6

Yes, but no, the relevant usage of `async`/`await` will be in `botTurn` not in `hitMe` (where the OP can just `return` the promise chain) – Bergi Aug 08 '20 at 15:01
When I use async, then I got this error: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option. – Dante Aug 08 '20 at 15:05
But I don't have where to change this options – Dante Aug 08 '20 at 15:06
1

@Dante this might interest you: https://stackoverflow.com/q/45422573/1915893 It's a missing property rather than a missing object, but the solution is the same. – Aluan Haddad Aug 08 '20 at 21:54

score 0 · Answer 2 · answered Aug 08 '20 at 15:08

0

you cannot expect a synchronous-based scoped value by wrapping an asynchronous operation with a synchronous operation.

although you can try to finalize your logic inside resolver, ie: then(result)

answered Aug 08 '20 at 15:08

cagcak

3,894
2
21
22

How to write fetch synchronously?

2 Answers2