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

Question

我正在尝试获取按钮点击时的数据。问题是当我点击按钮时，第一次数据没有被获取。但是当我第二次点击时，数据正在正确获取。

这是我的代码

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);
            })
        }
    });
});

Answer 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);
            })
        }
    });

Answer 2

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

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

axios get request not fetch data on first click

javascript

ajax

node.js

fetch-api

axios