如何在 AlpineJS 事件中使用“等待”？答案

【问题标题】：How can I use "await" inside of AlpineJS events?如何在 AlpineJS 事件中使用“等待”？
【发布时间】：2022-08-19 23:20:05
【问题描述】：

我有一个从 URL 检索图像的 AlpineJS 函数，但仅在 x-data 上工作，而不是在 @click 事件内

async function loadPostImageForShare() {
            let images = [];
            const imgUrl = \'https://res.cloudinary.com/worldpackers/image/upload/c_fill,f_auto,q_auto,w_1024/v1/guides/article_cover/dtceexjjoji0w1ikkp2k\';
            if (imgUrl) {
                fetch(imgUrl)
                    .then(res => res.blob()).catch(err => {
                    console.log(err);
                }).then(blob => {
                    const file = new File([blob], \'Post.png\', blob)
                    images.push(file)
                }).catch(err => {
                    console.log(err);
                });
            }
            return images;
        }

<script defer src=\"https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js\"></script>
<script src=\"https://cdn.tailwindcss.com\"></script>
<li class=\"justify-start items-center inline-flex\">
      <button class=\"inline-flex\" id=\"share-btn\"
              x-data=\"{tooltip : false, tooltipText : \'\'},
                      images = await loadPostImageForShare();\"
              @click=\"if (navigator.share) {
                      navigator.share({
                         title: \'Share a post\',
                         text: \'Test, share post using alpineJS!\',
                         url: \'https://stackoverflow.com\',
                         files: images,
                      }).catch((error) => {
                         tooltipText = \'Something went wrong\'
                         tooltip = true;
                         setTimeout(() => tooltip = false, 4000)
                         console.log(error);
                      });
                    } else {
                        tooltipText = \'Something went wrong\'
                        tooltip = true;
                        setTimeout(() => tooltip = false, 4000)
                    }\">
      <img class=\"w-6 h-6\" src=\"https://cdn.jsdelivr.net/npm/heroicons@1.0.6/outline/share.svg\" alt=\"Heroicons\">
            <p class=\"px-1 cursor-pointer text-left w-full\">
                Share button
            </p>
      </button>
</li>
<div x-show=\"tooltip\"
     class=\"fixed md:right-0 bottom-8 md:absolute text-sm text-white bg-primary rounded-lg w-64 max-w-xs p-2 cursor-default md:-mr-32 md:-mb-8\"
     x-transition:enter=\"transition ease-out duration-500\"
     x-transition:enter-start=\"opacity-0 scale-90\"
     x-transition:enter-end=\"opacity-100 scale-100\"
     x-transition:leave=\"transition ease-in duration-500\"
     x-transition:leave-start=\"opacity-100 scale-100\"
     x-transition:leave-end=\"opacity-0 scale-90\">
      <p class=\"text-center md:text-left\" x-text=\"tooltipText\">
      </p>
</div>

此示例通过调用x-data 上的函数来检索图像来工作

x-data=\"{tooltip : false, tooltipText : \'\'},
images = await loadPostImageForShare();\"

但是如果我将该行移动到 alpineJS @click 事件，则在共享操作之后检索图像，因此共享操作没有图像

 @click=\"images = await loadPostImageForShare();

async function loadPostImageForShare() {
            let images = [];
            const imgUrl = \'https://res.cloudinary.com/worldpackers/image/upload/c_fill,f_auto,q_auto,w_1024/v1/guides/article_cover/dtceexjjoji0w1ikkp2k\';
            if (imgUrl) {
                fetch(imgUrl)
                    .then(res => res.blob()).catch(err => {
                    console.log(err);
                }).then(blob => {
                    const file = new File([blob], \'Post.png\', blob)
                    images.push(file)
                }).catch(err => {
                    console.log(err);
                });
            }
            return images;
        }

<script defer src=\"https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js\"></script>
<script src=\"https://cdn.tailwindcss.com\"></script>
<li class=\"justify-start items-center inline-flex\">
      <button class=\"inline-flex\" id=\"share-btn\"
              x-data=\"{tooltip : false, tooltipText : \'\'}\"
              @click=\"images = await loadPostImageForShare();
                      if (navigator.share) {
                      navigator.share({
                         title: \'Share a post\',
                         text: \'Test, share post using alpineJS!\',
                         url: \'https://stackoverflow.com\',
                         files: images,
                      }).catch((error) => {
                         tooltipText = \'Something went wrong\'
                         tooltip = true;
                         setTimeout(() => tooltip = false, 4000)
                         console.log(error);
                      });
                    } else {
                        tooltipText = \'Something went wrong\'
                        tooltip = true;
                        setTimeout(() => tooltip = false, 4000)
                    }\">
      <img class=\"w-6 h-6\" src=\"https://cdn.jsdelivr.net/npm/heroicons@1.0.6/outline/share.svg\" alt=\"Heroicons\">
            <p class=\"px-1 cursor-pointer text-left w-full\">
                Share button
            </p>
      </button>
</li>
<div x-show=\"tooltip\"
     class=\"fixed md:right-0 bottom-8 md:absolute text-sm text-white bg-primary rounded-lg w-64 max-w-xs p-2 cursor-default md:-mr-32 md:-mb-8\"
     x-transition:enter=\"transition ease-out duration-500\"
     x-transition:enter-start=\"opacity-0 scale-90\"
     x-transition:enter-end=\"opacity-100 scale-100\"
     x-transition:leave=\"transition ease-in duration-500\"
     x-transition:leave-start=\"opacity-100 scale-100\"
     x-transition:leave-end=\"opacity-0 scale-90\">
      <p class=\"text-center md:text-left\" x-text=\"tooltipText\">
      </p>
</div>

我怎样才能让 alpinejs \"wait\" 函数完成？

注意：navigator.share 仅适用于安全上下文 (HTTPS)

你需要内联那么多 JavaScript 吗？为什么不创建一个异步事件处理程序并处理其中的所有内容。您的问题是您尝试使用无效的顶级等待。它需要在异步函数范围内。

标签： javascript alpine.js

【解决方案1】：

解决方案：在 javascript 函数中获取图像时缺少 Await

它应该是

await fetch(imgUrl)

async function loadPostImageForShare() {
            let images = [];
            const imgUrl = 'https://res.cloudinary.com/worldpackers/image/upload/c_fill,f_auto,q_auto,w_1024/v1/guides/article_cover/dtceexjjoji0w1ikkp2k';
            if (imgUrl) {
                await fetch(imgUrl)
                    .then(res => res.blob()).catch(err => {
                    console.log(err);
                }).then(blob => {
                    const file = new File([blob], 'Post.png', blob)
                    images.push(file)
                }).catch(err => {
                    console.log(err);
                });
            }
            return images;
        }

<script defer src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<li class="justify-start items-center inline-flex">
      <button class="inline-flex" id="share-btn"
              x-data="{tooltip : false, tooltipText : ''}"
              @click="images = await loadPostImageForShare();
                      if (navigator.share) {
                      navigator.share({
                         title: 'Share a post',
                         text: 'Test, share post using alpineJS!',
                         url: 'https://stackoverflow.com',
                         files: images,
                      }).catch((error) => {
                         tooltipText = 'Something went wrong'
                         tooltip = true;
                         setTimeout(() => tooltip = false, 4000)
                         console.log(error);
                      });
                    } else {
                        tooltipText = 'Something went wrong'
                        tooltip = true;
                        setTimeout(() => tooltip = false, 4000)
                    }">
      <img class="w-6 h-6" src="https://cdn.jsdelivr.net/npm/heroicons@1.0.6/outline/share.svg" alt="Heroicons">
            <p class="px-1 cursor-pointer text-left w-full">
                Share button
            </p>
      </button>
</li>
<div x-show="tooltip"
     class="fixed md:right-0 bottom-8 md:absolute text-sm text-white bg-primary rounded-lg w-64 max-w-xs p-2 cursor-default md:-mr-32 md:-mb-8"
     x-transition:enter="transition ease-out duration-500"
     x-transition:enter-start="opacity-0 scale-90"
     x-transition:enter-end="opacity-100 scale-100"
     x-transition:leave="transition ease-in duration-500"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-90">
      <p class="text-center md:text-left" x-text="tooltipText">
      </p>
</div>

注意：navigator.share 仅适用于安全上下文 (HTTPS)

【讨论】：