如何在異步等待的幫助下從獲取的 api 中顯示/呈現數據

Question

我有一個函數，可以從 API 獲取數據並將其解析為 json。

在第二個函數中，我嘗試將數據插入到 DOM 元素中。

請問問題出在哪里，我們如何正確呈現這些數據？

第一功能：

// GET PUBLIC IP
const getIp = async () => {

    const reqIp = await fetch("https://ipinfo.io/json?token=xxx")
    return reqIp.json()

}

第二個功能：

document.addEventListener("DOMContentLoaded", async () => {
    const dataIp = await getIp()
    let ipAdress = document.querySelectorAll('.ip p')
    ipAdress.innerHTML = dataIp.ip
})

getIp()

DOM：

<div class="ip">
  <h5>Your IP Adress:</h5>
  <p></p>
</div>

令牌OK，數據在控制台正確顯示。

Answer 1

哦，紅牛太多，睡眠太少。

非常感謝你們。

正如他們在評論中所寫，問題出在選擇器中。

document.addEventListener("DOMContentLoaded", async () => {
    const dataIp = await getIp()
    let ipAdress = document.querySelector('.ip p')
    ipAdress.innerHTML = dataIp.ip
})

getIp()

這是它沒有問題的工作方式