axios 获取请求在第一次点击时不获取数据答案

【问题标题】：axios get request not fetch data on first clickaxios 获取请求在第一次点击时不获取数据
【发布时间】：2021-11-23 15:34:43
【问题描述】：

我正在尝试在单击按钮时获取数据。问题是当我第一次单击按钮时数据未获取。但是当我第二次单击时，数据正在正确获取。

这是我的代码

const learnMores = document.querySelectorAll('.learnMoreId');
const readmoreImg = document.querySelector('#readmoreImg');
const readMoreTitle = document.querySelector('#readMoreTitle');
const readMoresubTitle = document.querySelector('#readMoresubTitle');
const readmoreBody = document.querySelector('#readmoreBody');
learnMores.forEach((learnMore) => {
    learnMore.addEventListener('click', (e) => {
        e.preventDefault();
        if (e.currentTarget) {
            const { reamoreid } = e.target.dataset;
            axios.get(`/single-readmore/${reamoreid}`).then((response) => {
                readmoreImg.src = `/upload/readmore/${response.data.readMoreImage}`;
                readMoreTitle.innerText = response.data.title;
                readMoresubTitle.innerText = response.data.subTitle;
                readmoreBody.innerHTML = response.data.desciption;
            }).catch((error)=>{
                console.log(error);
            })
        }
    });
});

【问题讨论】：

所以e.currentTarget不是在第一次点击时定义的？是否有任何错误/警告？
不，它显示 readmoreImg.src 没有加载图像。

标签： javascript node.js ajax axios fetch-api

【解决方案1】：

尝试使用async/await。还有你为什么用e.preventDefault()？

learnMore.addEventListener('click', async (e) => {
        e.preventDefault();
        if (e.currentTarget) {
            const { readmoreid } = e.target.dataset;
            await axios.get(`/single-readmore/${readmoreid}`).then((response) => {
                readmoreImg.src = `/upload/readmore/${response.data.readMoreImage}`;
                readMoreTitle.innerText = response.data.title;
                readMoresubTitle.innerText = response.data.subTitle;
                readmoreBody.innerHTML = response.data.desciption;
            }).catch((error) => {
                console.log(error);
            })
        }
    });

【讨论】：

它在点击a标签时在URL上抛出#。这就是我使用e.preventDefault();的原因。
如果异步等待没有解决它，我猜问题是 preventDefault。您可以尝试使用按钮而不是标签吗？
我会尽快尝试
它正在工作。谢谢

【解决方案2】：

我在您的代码中没有看到任何错误，但请确保“e.target.dataset”具有值并且 api 没有返回任何错误

【讨论】：