我创建了一个从服务器上获取数据的承诺,当存在网络连接时,它可以完美地工作。
我添加了一个.catch(),以便在服务器不可用时显示DOM元素。触发后,.catch()会起作用,并且会显示DOM元素,但它会在2秒后消失。
我尝试在.catch()中添加DOM元素。我还尝试了将DOM添加到外部函数中并进行调用。我还尝试将外部函数传递给reject()函数。什么都没有。
---样式表---
#notice { width: 100vw; height: 100vh; opacity: 0; animation: fade-in 2s; background-color:white; z-index: 60; display:flex; align-items: center; text-align: center; } #notice h1 { font-size: 10vh; font-family: 'Verdana'; color: black; } #notice * { position: static; }
--- Javascript ---
getSolvedDeck = () => { let failed = false; new Promise((resolve, reject)=>{ let xhr = new XMLHttpRequest; xhr.open('GET', "https://mrlesbomar.com/solitaire/cgi-bin/get_solved_deck.php"); xhr.onload = () =>{ if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject(xhr.statusText); } } xhr.onerror = () => reject(xhr.statusText); xhr.send(); }).then(stuff=>{ console.log('Awesomeness'); }).catch(error=>{ //Create status screen let notice = document.createElement('div'); notice.id = 'notice'; notice.innerHTML = '<h1>Error Message</h1><br/>'; document.getElementsByTagName('main')[0].appendChild(notice); }); }
预期结果:出现Promise错误时,屏幕将使用附加的DOM对象填充并一直保留到用户采取措施为止。为用户提供阅读消息的机会。
实际结果:DOM对象被附加到<main>
上,充满了屏幕并显示了消息,但在2秒钟内消失了。
问题:如何使在.catch()中执行的操作持久化?
答案 0 :(得分:1)
该元素持续存在,是CSS导致其消失。动画运行一次,停止,然后我们回到不透明度:0。即使完全没有JS也会发生:
<div id="notice"></div>
#notice {
width: 100px;
height: 100px;
opacity: 0;
background: blue;
animation: fade-in 2s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
https://codepen.io/anon/pen/YMNaMv?&editable=true
要使#notice停留在屏幕上,请在其样式中添加animation-fill-mode: forwards;
。