API 调用导致页面重新加载

Question

I'm using JS to make API calls in my HTML website. But the page is refresh with DELETE method

    async function delete(param) {
        const response = await fetch(`${api_Url}/products${param}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `bearer ${token}`
            },
        }).then((response) => {
            console.log(response);
        })
    };

Response:

body: (...)
bodyUsed: false
headers : heders {}
ok: true
redirect: false
state: 204
statusText : « No content »
type: « CORS »
url : « http://localhost:5678/api/products/9 »
[[Prototype]] : response

And after the request, the page is refreshed

This function is called by this code:

    const deleteBtn = document.querySelectorAll('.delete_icon');

    deleteBtn.forEach(element => {
        element.addEventListener('click', event => {
            event.preventDefault();

            const Id = event.currentTarget.id;
            delete(Id);
        });
    });

But this code is not the reason for the refresh. One thing worked:

window.addEventListener('beforeunload', (event) => {
    event.preventDefault();
    event.returnValue = '';
});

But there is a popup (I can't use package and library)

And it is only the Delete API call that causes this refresh because from the console by calling delete(1), the page is refreshed

Any help would be greatly appriciated.

Answer 1

To fix the issue use: async/await . First,return the promise from the fetch request and then use await to wait for the request to complete before calling the event.preventDefault()

Issue is in you code is: the fetch request is async, so before completes the request page is refreshed

 async function deleteProduct(param) {
      event.preventDefault();
      const response = await fetch(`${api_Url}/products${param}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `bearer ${token}`
        },
      });
      console.log(response);
    }

click event listner is like this

element.addEventListener('click', async (event) => {
    const Id = event.currentTarget.id;
    await deleteProduct(Id);
});

Try this