等候太早回来

Question

我正在从DynamoDB中检索图像文件名列表，并使用这些图像文件名替换默认的 src= 图片在网站的一部分。

我是一个JS新手，所以我肯定漏掉了什么，但是我的函数返回文件名列表的时间太晚了。

我的内联脚本是

<script>
        customElements.whenDefined( 'crowd-bounding-box' ).then( () => {  
        var imgBox = document.getElementById('annotator');
        newImg = imageslist();
        console.log("Result of newImg is: " + newImg);
        imgBox.src = "https://my-images-bucket.s3.amazonaws.com/" + newImg;
    } )
</script>

我的JS函数是：

async function imageslist() {
    const username = "sampleuser";
    const params = {
        TableName: "mytable",
        FilterExpression: "attribute_not_exists(" + username + ")",
        ReturnConsumedCapacity: "NONE"
    };
    try {
        var data = await ddb.scan(params).promise()
        var imglist = [];
        for(let i = 0; i < data.Items.length; i++) {
            imglist.push(data.Items[i].img.S);
        };
        imglist.sort();
        var firstimg = imglist[0];
        console.log(firstimg);
        return imglist
    } catch(error) {
        console.error(error);
    }
}

控制台的报告是 Result of newImg is: [object Promise] 之后不久，它就会报告预期的文件名。 在页面渲染后，我可以输入 newImg 控制台中，我收到了预期的结果。

我是否使用了 等待 语法不当？

侧面说明：这个网站使用了Crowd HTML Elements（用于Ground Truth和Mechanical Turk），所以我不得不将Crowd HTML Elements的 src= 我的 crowd-bounding-box 标签，而且它必须是一个非零值。 我正在加载一个默认的图片，并将其替换为另一个图片。

Answer 1

任何时候你使用 await 关键字，您必须使用 async 在函数定义前加上关键字（你已经这样做了）。问题是，任何时候调用一个异步函数，它总是会返回一个 Promise 对象，因为它期望在函数中发生一些异步任务。

因此，你需要在函数中使用 await 图像列表函数的结果，并使周围的函数 async.

<script>
    customElements.whenDefined( 'crowd-bounding-box' ).then( async () => {  
        var imgBox = document.getElementById('annotator');
        newImg = await imageslist();
        console.log("Result of newImg is: " + newImg);
        imgBox.src = "https://my-images-bucket.s3.amazonaws.com/" + newImg;
    } )
</script>

Answer 2

您的 async/await 代码似乎是正确的，但在承诺被解析之前，你的页面被渲染是正常的。在API调用中经常会出现这种情况。

你应该调用一个函数来替换 src 动态地对您的所有图像进行处理，在您的所有图像结束时，您的 imageslist 功能