Fetch() 乱序运行

Question

我正在尝试让 API 提取一个词并将其设置为状态。然后一个函数将读取该状态并完成其设计目的。然而，我最初编码它的方式称它为乱序。第三个代码片段允许代码成功运行，但我不确定为什么。有人能解释一下有什么区别或者为什么原来的方法不起作用吗？下面是第二个函数后面的 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,            });        });    };

Answer 1

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

const resetGame = async()=>{

...

await this.wordNikApi()

...

}

Answer 2

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

在您的新版本中，函数内部有代码.then()，当提取请求调用数据并返回时调用该函数，因此您的代码在此处等待完成，this.wordNikApi()然后在第三个代码段中运行。

希望这有助于更清楚地了解 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)

}