JavaScript如何将异步函数返回的结果存入kvp对象中

hashData是用async声明的异步函数，所有异步函数默认返回Promise对象，而非函数内部return的实际值：

• 你在GetClubData中直接执行kvp['picture'] = hashData()时，赋值给picture字段的是pending状态的Promise实例，不是哈希计算完成后的base16字符串
• GetClubData没有做异步等待逻辑，执行到JSON.stringify时，哈希计算还没完成，序列化Promise对象只会得到空对象，自然看不到正确的picture值

把GetClubData也改为异步函数，调用hashData时用await等待异步计算完成后再赋值，修改后的代码如下：

async function hashData() {
    let base64 = 'sertyuiopnbv58426931';
    let hash = await window.crypto.subtle.digest('SHA-256',  _base64ToArrayBuffer(base64));
    const hashArray = Array.from(new Uint8Array(hash));         
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); 
    console.log(hashHex);
    return hashHex;
}

function _base64ToArrayBuffer(mybase64) {
    let binary_string = window.atob(mybase64);
    let len = binary_string.length;
    let bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

// 改为async异步函数
async function GetClubData () {
    let kvp = {};
    // 加await等待哈希计算完成，拿到实际返回值再赋值
    kvp['picture'] = await hashData();

    let kvp2 = {};
    kvp2['Club'] = kvp;
    
    var json = JSON.stringify(kvp2,null," ");
    console.log(json);
}

HTML代码不需要做任何修改，绑定的onclick事件可以正常执行异步函数。如果要捕获可能的异步报错，可以在GetClubData内部加try...catch包裹逻辑即可。

内容的提问来源于stack exchange，提问作者Laura Bossy