如何使用JavaScript异步函数阻止页面刷新

你的问题根源在于按钮类型是submit，点击后会触发表单的默认提交行为，导致页面刷新，和你用的async异步函数本身没有关系。以下是几种解决方法：

• 方法一：修改按钮类型为button
  直接把按钮的type属性从submit改成button，这样点击按钮就不会触发表单提交，自然不会刷新页面：

<input type="button" id="nft_forms" name="listing" class="btn btn-primary" value="Complete listing" onclick="completeListing(this)" >

• 方法二：阻止默认提交行为
  如果需要保留submit类型的按钮，可以在点击事件里阻止浏览器的默认提交动作：

1. 修改异步函数，添加事件参数并调用preventDefault()：

async function completeListing(elm, event){
    event.preventDefault(); // 阻止默认提交行为
    alert("Hello world");
    // 这里可以继续编写你的异步业务逻辑，比如await接口请求等
}

2. 修改按钮的onclick绑定，传入event对象：

<input type="submit" id="nft_forms" name="listing" class="btn btn-primary" value="Complete listing" onclick="completeListing(this, event)" >

• 方法三：使用事件监听绑定（更推荐）
  避免内联onclick属性，用addEventListener绑定事件，代码结构更清晰：

// 获取按钮元素
const completeBtn = document.getElementById('nft_forms');
// 绑定点击事件
completeBtn.addEventListener('click', async function(event){
    event.preventDefault(); // 阻止默认提交
    alert("Hello world");
    // 执行你的异步逻辑
});

对应的按钮代码可以去掉onclick属性：

<input type="submit" id="nft_forms" name="listing" class="btn btn-primary" value="Complete listing">

内容的提问来源于stack exchange，提问作者virat sharma