Жду возвращения слишком рано

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 ?

Side примечание: на этом сайте используются элементы толпы HTML (для Ground Truth и Mechanical Turk), поэтому я вынужден иметь атрибут src= в моем теге crowd-bounding-box, и он должен быть ненулевым значением. Я загружаю изображение по умолчанию и заменяю его другим изображением.

Answer 1

Каждый раз, когда вы используете ключевое слово await, вы должны использовать ключевое слово async перед определением функции (что вы сделали). Дело в том, что каждый раз, когда вызывается асинхронная функция c, она всегда будет возвращать объект 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 функции