【发布时间】：2020-06-13 17:24:24
【问题描述】：
我需要异步/等待实现方面的帮助。在我的代码中，我想要一个清除按钮来清除所有内容并重新加载页面。我想将此设置为一个承诺，只有当它完成时，它才会向 JSON 服务器发送一个 get 请求并从 JSON 服务器获取帖子并将它们存储在本地存储中。
我已经设置了一个console.log 消息，以便在承诺解决时弹出。现在我遇到的问题是出现此消息并首先获取数据，然后页面重新加载。我认为页面重新加载会首先发生，然后才会出现消息并获取数据。这使代码无法按我的意愿运行。我不知道这是否是我设置 Promise 的方式。我希望我的问题能被理解。有人帮忙，我保证会支持你的答案和帐户:)
const UISelectors =uisetup.getSeletor(); //gets html classes and ids from another module
document.querySelector(UISelectors.clearBtn).addEventListener('click', clearAll); //calls event
const clearAllData = async function(){
//This is the promise supposed to be waited on
const clears = new Promise((resolve)=>{
itemsetup.clearAll();
uisetup.clearEverything()
storagesetup.clearAllfromStorage()
const addAllItems = 0
uisetup.theTotaldatas(addAllItems)
uisetup.clearEditState()
location.reload()
resolve('Finished clearing')
})
const storagedata = await clears
return storagedata
}
//Function for the clear button event
function clearAll(e){
e.preventDefault()
//Calls the function after it has been completed
clearAllData()
.then(clearmessage=> {
http.get('http://localhost:3000/posts')
.then(posts => {
storagesetup.storeinStorage(posts)
uisetup.populateItems(posts)
let datas=null
posts.forEach(post =>{
datas += post.datas
})
uisetup.theTotaldatas(datas)
console.log(posts)
})
.catch(err=>console.log(err))
console.log(clearmessage)
})
}
【问题讨论】：
-
页面重新加载会阻止当前页面执行任何操作，包括暂停和停止所有 Javascript。因此，您不能在页面的 Javascript 中将重新加载页面作为一组连续操作的一部分。您可以执行其他所有操作，然后在最后一步触发重新加载。否则，您将不得不在加载新页面时以某种方式使脚本恢复。这意味着您必须将一些状态传递给新页面重新加载，这通常作为查询参数完成，您的脚本可以在新页面加载时看到该参数，并告诉脚本从哪里开始执行。
-
同样将一堆同步操作包装在一个 Promise 中并没有什么用处。 Promise 用于监视异步操作，它们必须显式连接到异步完成事件/回调中才能执行任何有用的操作。此外，他们没有神奇的能力以某种方式知道异步操作何时完成。相反，当异步操作通过回调或事件完成时，他们必须被告知。而且，它们不适用于页面重新加载，因为在页面重新加载之前创建的任何承诺都会在新页面出现时被浏览器破坏。
-
感谢您的解释。它为这个问题带来了新的曙光。我显然没有很好地理解这些概念。我使用承诺的唯一原因是因为页面重新加载，但根据你的解释，我想我将不得不重写代码。谢谢
标签： javascript promise async-await