客户端 javascript 从异步调用中解压值

Question

我的客户端服务器上有以下代码，连接到 node.js 服务器：

async function updateHTML(text){
    const response = await ServerHandshake(text);
    console.log("done");
    let script = document.createElement("script");
    script.text = response;
    document.body.appendChild(script);
}


async function ServerHandshake(text){
    // POST
    fetch('/text', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            text: text
        })
    })
        .then(function(response){
            if(response.ok){
                console.log('POST success.');
                return;
            }
            throw new Error('POST failed.');
        })
        .catch(function(error){
            console.log(error);
        });

    // GET
    fetch('/processed', {method: 'GET'})
        .then(function(response){
            if(response.ok){
                console.log("GET success.");
                return response.json();
            }
            throw new Error('GET failed.');
        })
        .then(function(data){
            let returnValue = data.result;
            console.log(returnValue);
            return returnValue;
        })
        .catch(function(error) {
            console.log(error);
        });

}

(async function(){
    await updateHTML("hello, world!");
})();

控制台记录 serverHandshake 的 return 值，但异步调用后的 html 文件显示 undefined.

"Done"也是最先打印的；似乎应该稍后打印，但不知何故 await 无法正常工作。

执行此操作的正确方法是什么？

注意我问的是客户端，而不是服务器端

Answer 1

您混淆了回调风格（.then()）和等待风格，这就是它不起作用的原因。

删除所有 .then() 并以这种方式使用它：

async function updateHTML(text){
    const response = await ServerHandshake(text);
    
    if(response.ok){
        console.log('POST success.');
    }

}


function ServerHandshake(text){
    return fetch( ... ); // this can be awaited
}

客户端 javascript 从异步调用中解压值

Clientside javascript unpack value from asynchronous call

javascript

client-server

http