javascript - Javascript 中的异步和等待问题

Question

这是我在这里的第一个问题，我一直在尝试环顾四周，看看是否找到了有意义的东西，但到目前为止，我还无法真正想出如何做到这一点。

好的，所以我的问题是，我目前正在制作一个脚本，该脚本将从 API 抓取(卡片的)图片并将它们显示在 Canvas 上，到目前为止一切正常。

this.drawCard = function() 
{
    img.src = this.card_pic;
    img.onload = () => {
        c.drawImage(img, x, y, crdwid, crdhei); // Draws the card.
    }
}

我遇到的问题是我允许用户单击图像以将其更改为不同的版本，当他们单击该图像时，我会通过 API 发送查询来列出其他类似图像.这有时需要一些时间，因此会出现 GET net::ERR_FILE_NOT_FOUND 错误，但如果您再次单击它确实有效。所以我想在尝试更改图片之前等待代码完成数组的制作。

this.grabPics = function()
{
    if(pics.length == 0)
    {
        console.log('Making Array of pics.');
        postData(this.prints).then((data) => { 
            // This .then works fine, and does the job correctly. 
            // It calls a function based on the cache fetched from this tutorial. https://www.sitepoint.com/cache-fetched-ajax-requests/
            for(var i = 0; i < data.total_cards; i++)
            {
                pics.push(data.data[i].image_uris.large);
            }
        });
    }
}

this.nextPic = function()
{
    if (this.reprint)
    {
        this.grabPics(); // I believe I need a await, or .then here.
        this.card_pic = pics[picNum]; // Because this uses the array from grabPics.
        this.drawCard(); // And this draws the next picture.
        picNum++; // Should probably do this earlier.
        if (picNum >= pics.length)
        {
        picNum = 0;
        }
    }
}

我试过几种方法:

• 我尝试使 nextPic 成为异步函数并使用 await grabPics();以几种不同的方式，使用 promise 等，甚至声明自定义 promise 。

我遇到的问题是，当我做这些事情时，我避免了使用代码生成的错误消息，但它永远不会改变图片，而且它似乎永远不会执行 nextPic 函数再次点击时再次……我错过了什么？

我似乎无法真正思考将 async、await 或 then() 东西放在哪里。

编辑:我的尝试:

尝试 1:

this.grabPics = async function()
{
    return new Promise(resolve => {
        if(pics.length == 0)
        {
            console.log('Making Array of pics.');
            postData(this.prints).then((data) => {
                for(var i = 0; i < data.total_cards; i++)
                {
                    pics.push(data.data[i].image_uris.large);
                }
                console.log(pics);
                resolve('true');
            });
        }
    });
}

this.nextPic = function() 
{
    if (this.reprint)
    {
        this.grabPics().then(resolve => {
            this.card_pic = pics[picNum];
            this.drawCard();
            picNum++;
            if (picNum >= pics.length)
            {
                picNum = 0;
            }
        });
    }
}

尝试 2:

this.grabPics = function()
{
    return new Promise(resolve => {
        if(pics.length == 0)
        {
            console.log('Making Array of pics.');
            postData(this.prints).then((data) => {
                for(var i = 0; i < data.total_cards; i++)
                {
                    pics.push(data.data[i].image_uris.large);
                }
                resolve('go');
            });
        }
    }); 
}
    
this.nextPic = async function() 
{
    if (this.reprint)
    {
        const result = await this.grabPics();
        this.card_pic = pics[picNum];
        this.drawCard();
        picNum++;
        if (picNum >= pics.length)
        {
            picNum = 0;
        }
    }
}

Answer 1

好的，我想我找到并解决了我的问题。

正如 Aleksey 指出的那样，在 postData 之前添加 return 似乎可行。

但是，它不起作用的原因是因为返回值包含在 if(pics.length == 0) 检查中。所以我添加了一个 else 并返回它自己的，这似乎允许 nextPic 在重复点击时继续。