等待 returns 太早了

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 并收到预期结果。

我是否错误地使用了 await 语法？

旁注：该站点使用 Crowd HTML 元素（用于 Ground Truth 和 Mechanical Turk），因此我不得不在我的 crowd-bounding-box 中显示 src= 属性标签，它必须是一个非零值。我正在加载默认图片并将其替换为另一张图片。

Answer 1

您的 async/await 代码似乎是正确的，但在承诺得到解决之前呈现您的页面是正常的。 API 电话经常是这样。

您应该在 imageslist 函数

的末尾调用一个函数来动态替换所有图像的 src

Answer 2

任何时候使用 await 关键字，都必须在函数定义（您已经完成）之前使用 async 关键字。问题是，任何时候调用异步函数时，它总是 return 一个 Promise 对象，因为它期望一些异步任务将在函数内发生。

因此，您需要await imageslist 函数的结果并使周围函数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>

等待 returns 太早了

Await returns too soon

javascript

mechanicalturk

promise

async-await

amazon-sagemaker