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

Question

我有一個 AlpineJS function 從 URL 檢索圖像，但僅在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上調用 function 來檢索圖像

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 “等待” function 完成？

注意：navigator.share 僅適用於安全上下文 (HTTPS)

Answer 1

您的異步 function 需要等待圖像響應。 嘗試這個

       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 await images;
        }

Answer 2

解決方案：在 javascript function 中獲取圖像時缺少等待

它應該是

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)