按钮在单击时将文本更改为“[object promise]”。我该如何阻止它？

Question

我试图在单击按钮时从 json 文件调用表，并且工作正常。但是当我点击按钮时，它会将按钮内的文本更改为“[object Promise]”。我不希望按钮设计上的文字或任何其他内容发生变化。我如何阻止它这样做？

html 中的代码：

<button class="tableButton" id="drikker-btn" onclick="drikkeClick()">
    <p>Drikke</p>
</button>


    <div id="table">
        <table>
            <thead>
                <tr>
                    <th>Bilde</th>
                    <th>Produktnavn</th>
                    <th>Pris</th>
                </tr>
            </thead>
            <tbody id="data-output">
                <!-- Se script.js -->
            </tbody>
        </table>
    </div>

JS 中的代码：

function drikkeClick() {
    varbtnX = document.getElementById("drikker-btn").innerHTML = 
        fetch("drikker.json")
        .then(function(response){
            return response.json();
        })
        .then(function(drikker){
            let placeholder = document.querySelector("#data-output");
            let out = "";
            for(let product of drikker){
                out += `
                    <tr>
                        <td> <img src='${product.image}'> </td>
                        <td>${product.name}</td>
                        <td>${product.price}</td>
                    </tr>
                `;
            }
        
            placeholder.innerHTML = out;
        });
}

我曾尝试通过在“函数”前面写上“异步”来使函数异步，但这什么也没做。 我还尝试手动编写一个代码片段，将按钮中的文本更改回原来的内容，但这也没有任何效果。

Answer 1

(async function loadData() {
    const response = await fetch("https://fakestoreapi.com/products");
    // parse JSON (error handling omitted here)
    const parsed = await response.json();
    const placeholder = document.querySelector("#data-output");
    
    const productRows = parsed.map(product => {
      const row = document.createElement("tr");
      row.replaceChildren(
        createCell(product.id), 
        createCell(product.title));
      return row;
    });
    placeholder.replaceChildren(...productRows);
})();

function createCell(content){
  const cell = document.createElement("td");
  cell.innerText = content;
  return cell;
}

    <div id="table">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody id="data-output">
                <!-- Se script.js -->
            </tbody>
        </table>
    </div>

只是做一个功能

async

当你不在某处

await

它时并没有真正意义。如果你不等待

Promise

永远不会解决，你会得到你看到的输出

[object promise]

。所以在使用它来设置一些 UI 文本之前，你需要

await

Promise

。您也不想更改按钮，因此您可以摆脱这条线

varbtnX = document.getElementById("drikker-btn").innerHTML =

它将按钮设置为

fetch()

调用的结果，在您的情况下，因为您不等待它，所以是

 Promise

.

此外，您应该使用

innerHTML

 和 

createElement()

（或 

replaceChildren()

）来创建新的 DOM 元素并将它们附加到现有元素。

我已经使用

Fake Store API

给你一个工作示例，说明你需要做什么才能获得所需的输出。