javascript 我的异步函数正在返回fullfiled和pending

ct3nt3jp 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(152)

async function apiFetch() {
  let response = await fetch("https://dog.ceo/api/breeds/image/random");
  let success = await response.json();
  const img = document.createElement("img");
  img.src = success.message;
  div.append(img)
}

然后，当调用控制台apiFetch（）中的函数时，控制台将告知已满和挂起

JavaScript

来源：https://stackoverflow.com/questions/75259375/my-async-function-is-returning-both-fullfiled-and-pending

1条答案

按热度按时间

bq3bfh9z1#

从您的嗅探代码中，我猜您希望获得图像URL并显示为HTML。
我做了两个独立的函数和on click事件函数。
首先（getImageUrl()）是获取图像URL。
第二个（loadImage()）是将图像显示为HTML。
最后一个（updateImage()）是按顺序合并和调用的。
这个演示将工作。

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <h2>Dog picture</h2>
    <button onclick="updateImage()">Update Image</button>
    <dev id="container"></dev>

    <script>
        async function getImageUrl() {
            const response = await fetch("https://dog.ceo/api/breeds/image/random");
            const data = await response.json();
            return data.message;
        }
        async function loadImage(url) {
            const options = {
                method: "GET",
            };

            let response = await fetch(url, options);

            if (response.status === 200) {
                const imageBlob = await response.blob();
                const imageObjectURL = URL.createObjectURL(imageBlob);

                const image = document.createElement("img");
                image.src = imageObjectURL;

                const container = document.getElementById("container");
                //   remove existing image
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }
                //   update image
                container.append(image);
            } else {
                console.log("HTTP-Error: " + response.status);
            }
        }
        async function updateImage() {
            getImageUrl().then((imageURL) => {
                loadImage(imageURL);
            });
        }
    </script>
</body>

</html>

结果

参考文献

Downloading images with node.js
How to Use Fetch with async/await
How do I clear the content of a div using JavaScript?
The onclick Event
Fetch image from API

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 我的异步函数正在返回fullfiled和pending

1条答案

结果

参考文献

相关问题

热门标签

最新问答