Fetch() 乱序运行

Question

我正在尝试让 API 提取一个单词并将其设置为状态。然后一个函数将读取该状态并完成其设计目的。然而，我最初编码它的方式称它是乱序的。第三个代码 sn -p 可以让代码成功运行，但我不知道为什么。有人能解释一下有什么区别或为什么原来的方法不起作用吗？

下面是API函数，后面是第二个函数。

wordNikApi = () => {
        fetch("http://api.wordnik.com:80/v4/words.json/randomWords?hasDictionaryDef=true&minCorpusCount=0&minLength=5&maxLength=15&limit=1&api_key=/* Removed */")
            .then( res => res.json() )
            .then( ( result ) => {
                this.setState({
                    apiWord: result[0].word,
                });
                console.log("wordNikApi: ", this.state.apiWord);
            })
            .catch( ( error ) => {
                console.log("API ERROR: ", error);
            })
    };

resetGame = () => {

        console.log("resetGame");

        this.wordNikApi();

        this.setState({ 
            word: [],
            count: 0,
            allAttempts: [],
            letterIndex: [],
            numberOfBadAttempts: 0,
            remainingAttempts: 6,
            repeat: false,
            pageLock: false,
            invalidKey: false,
        }, () => {

            console.log("resetGame: function 1");

            console.log(this.state.apiWord);

            let fullWord = "word";
            let wordArray = fullWord.split("");
            let wordLength = wordArray.length;

            // Send wordObj to state with value and index
            let wordObj = wordArray.map((value, index) => {
                return {
                    found: false,
                    val: value,
                    id: index,
                }
            })

            this.setState({ 
                word: wordObj,
                wordLength: wordLength,
                remainingAttempts: 6,
            });
        });


    };

功能代码：

resetGame = () => {

        console.log("resetGame");

        // this.wordNikApi();

        fetch("http://api.wordnik.com:80/v4/words.json/randomWords?hasDictionaryDef=true&minCorpusCount=0&minLength=5&maxLength=15&limit=1&api_key=/* Removed */")
            .then( res => res.json() )
            .then( ( result ) => {
                this.setState({
                    apiWord: result[0].word,
                }, ()=> {
            
                    let fullWord = this.state.apiWord;
                    let wordArray = fullWord.split("");
                    let wordLength = wordArray.length;
        
                    // Send wordObj to state with value and index
                    let wordObj = wordArray.map((value, index) => {
                        return {
                            found: false,
                            val: value,
                            id: index,
                        }
                    })
        
                    this.setState({ 
                        word: wordObj,
                        wordLength: wordLength,
                        remainingAttempts: 6,
                        count: 0,
                        allAttempts: [],
                        letterIndex: [],
                        numberOfBadAttempts: 0,
                        repeat: false,
                        pageLock: false,
                        invalidKey: false,
                    });
                });
            })
            .catch( ( error ) => {
                console.log("API ERROR: ", error);
            })
    };

Answer 1

造成你的问题是JS异步，当你在resetGame函数中调用wordNikApi函数时，你必须使用await关键字，这样才能先生成对wordNijApi函数的更改，然后再继续工作流程。尝试像这样修改 resetGame 函数：

const resetGame = async()=>{
...

await this.wordNikApi()
...
}

Answer 2

Fetch 是一个异步函数，这意味着它将与您的其他代码一起运行，调用 this.wordNikApi() 会设置 fetch 请求，但不会阻止您的脚本继续。

在您的新版本中，您的代码位于 .then() 函数中，该函数在获取请求已调用数据并返回时调用，因此您的代码在此处等待 this.wordNikApi() 完成，然后再运行第三个sn-p。

希望这有助于更清楚地了解 Async 和 Sync，但是有更好的文档可以解释这一点。

Answer 3

我知道这是一篇旧帖子，但我认为其他人可以使用它。 我实现了一个队列，它在队列中的第一个项目上调用 fetch，然后使用 fetch().then 拉下一个项目，发布它，然后如果队列不为空则重复。这是我使用的代码：

var clientDataQueue = [];
function queueClientData(theData) {
    clientDataQueue.push(theData);
    console.log("++clientDataQueue.length:", clientDataQueue.length)
    if (clientDataQueue.length == 1){
        postFromQueue();
    }
}

function postFromQueue() {
    console.log("--clientDataQueue.length:", clientDataQueue.length)
    if (clientDataQueue.length > 0) {
        postClientdata(clientDataQueue[0]).then( () => {
            clientDataQueue.shift();
            postFromQueue();
        });
    }
}

function postClientdata(theData) {
    var htmlData = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(theData)
    };
    return fetch('/api/clientData', htmlData)
}