Экран загрузки зависает при обработке HTTP-запроса - PullRequest
Новая
       5

Экран загрузки зависает при обработке HTTP-запроса

1 голос
/ 09 июля 2019

У меня есть код JavaScript, который получает некоторый контент с другой веб-страницы для отображения (используя HTTP GET). После некоторых тестов, поскольку реализация процесса занимает некоторое время, я решил добавить загрузочную анимацию, которая запускается до тех пор, пока код не завершится, чтобы получить контент с другой веб-страницы. Как и предполагалось, анимация загрузки исчезает, когда содержимое полностью загружено. Моя единственная проблема заключается в том, что при запуске процесса анимация загрузки застревает. Это происходит даже после того, как я определил процесс как асинхронный. Это мой код: 

window.addEventListener('load', function() {
  setTimeout(function() {
    var response = httpGet("https://pub.s7.exacttarget.com/akduztal2rq");
  }, 2000); // the GET method executes 2 seconds after the loading animation is loaded
});
async function httpGet(theUrl) {
  xmlhttp = new XMLHttpRequest();
  await xmlhttp.open("GET", theUrl, false);
  await xmlhttp.send();
  var r = xmlhttp.responseText;
  document.getElementById("h").innerHTML = r;
  document.getElementById("preloader").style.display = "none";
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://pub.s7.exacttarget.com/yqekxmddlvd">
</head>

<body>
  <svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120"> <!--The animation -->
    
    
          <style type="text/css" >
            <![CDATA[
    
            #plug,
            #socket { fill:#D9E4E8 }
    
            #loop-normal { fill: none; stroke: #D9E4E8; stroke-width: 12 }
            #loop-offset { display: none }
    
            ]]>
          </style>
    
          <path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
                                                L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
            <animate attributeName="stroke-dasharray" attributeType="XML"
                     from="500, 50"  to="450 50"
                     begin="0s" dur="2s"
                     repeatCount="indefinite"/>
            <animate attributeName="stroke-dashoffset" attributeType="XML"
                     from="-40"  to="-540"
                     begin="0s" dur="2s"
                     repeatCount="indefinite"/>  
          </path>
    
          <path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
                                    L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
                                    L146.48,87.02z"/>
    
          <path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>  
    
          <path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
    
          <animateMotion
                         xlink:href="#plug"
                         dur="2s"
                         rotate="auto"
                         repeatCount="indefinite"
                         calcMode="linear"
                         keyTimes="0;1"    
                         keySplines="0.42, 0, 0.58, 1">
            <mpath xlink:href="#loop-normal"/>
          </animateMotion>
    
          <animateMotion             
                         xlink:href="#socket"
                         dur="2s"
                         rotate="auto"
                         repeatCount="indefinite"
                         calcMode="linear"
                         keyTimes="0;1"
                         keySplines="0.42, 0, 0.58, 1">
            <mpath xlink:href="#loop-offset"/>
          </animateMotion>  
        </svg>
  <div id="h">

  </div>
</body>

</html>

Как видите, тег svg отвечает за генерацию анимации, а функция setTimeout заставляет метод HTTP GET выполняться через 2 секунды после загрузки анимации загрузки. в любом случае, в первые 2 секунды анимация работает нормально, но через 2 секунды, когда начинается процесс GET, она застревает. Есть идеи, как это исправить?

Ответы [ 4 ]

1 голос
/ 09 июля 2019

Глядя на ваш код, я заметил, что вы используете async / await в XMLHttpRequest.Я не думаю, что они возвращают обещания, которые будут использоваться с await.

Если вы хотите использовать async / await, попробуйте использовать fetch api https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.mocky.io/v2/5d249d172f0000736f241b00', true);
  xhr.send();
  xhr.onload = function () {
    console.log('hi 1')
  };
1 голос
/ 09 июля 2019

Это потому, что вы пытаетесь получить доступ к ресурсам из исходного домена, который отличается от вашего. Короче говоря, причина этого составляет около CORS.

Для обеспечения возможности такого рода запросов заголовки ответа должны содержать следующие заголовки:

Accept-Control-Allow-Origin: yourdomain.com Access-Control-Allow-Headers: GET

Подробнее о: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0 голосов
/ 09 июля 2019 

   
  setTimeout(function() {
    var response = httpGet("https://jsonplaceholder.typicode.com/todos/1");
  }, 3000);
function httpGet(theUrl) {    
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', 'theUrl', true);
  		xmlhttp.send();
  xmlhttp.onload = function () {
    var r = xmlhttp.responseText;
    document.getElementById("h").innerHTML = r;
    document.getElementById("preloader").style.display = "none";
  }
};
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://pub.s7.exacttarget.com/yqekxmddlvd">
</head>

<body>
  <svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120"> <!--The animation -->
    
    
          <style type="text/css" >
            <![CDATA[
    
            #plug,
            #socket { fill:#D9E4E8 }
    
            #loop-normal { fill: none; stroke: #D9E4E8; stroke-width: 12 }
            #loop-offset { display: none }
    
            ]]>
          </style>
    
          <path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
                                                L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
            <animate attributeName="stroke-dasharray" attributeType="XML"
                     from="500, 50"  to="450 50"
                     begin="0s" dur="2s"
                     repeatCount="indefinite"/>
            <animate attributeName="stroke-dashoffset" attributeType="XML"
                     from="-40"  to="-540"
                     begin="0s" dur="2s"
                     repeatCount="indefinite"/>  
          </path>
    
          <path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
                                    L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
                                    L146.48,87.02z"/>
    
          <path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>  
    
          <path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
    
          <animateMotion
                         xlink:href="#plug"
                         dur="2s"
                         rotate="auto"
                         repeatCount="indefinite"
                         calcMode="linear"
                         keyTimes="0;1"    
                         keySplines="0.42, 0, 0.58, 1">
            <mpath xlink:href="#loop-normal"/>
          </animateMotion>
    
          <animateMotion             
                         xlink:href="#socket"
                         dur="2s"
                         rotate="auto"
                         repeatCount="indefinite"
                         calcMode="linear"
                         keyTimes="0;1"
                         keySplines="0.42, 0, 0.58, 1">
            <mpath xlink:href="#loop-offset"/>
          </animateMotion>  
        </svg>
  <div id="h">

  </div>
</body>

</html>
0 голосов
/ 09 июля 2019

Вы получаете сетевую ошибку, поэтому Javascript вызывает исключение, и код, с которого вы удаляете загрузку, никогда не достигается, попробуйте это: 

async function httpGet(theUrl) {
  xmlhttp = new XMLHttpRequest();
  try{
    await xmlhttp.open("GET", theUrl, false);
    await xmlhttp.send();
  }catch(error){
    console.log(error)
  }finally {
    var r = xmlhttp.responseText;
    document.getElementById("h").innerHTML = r;
    document.getElementById("preloader").style.display = "none";
  }
}

Узнайте больше о try / catch / finally: https://www.w3schools.com/jsref/jsref_try_catch.asp

Это очень распространенный способ использования блока finally для удаления загрузок, поскольку вы всегда хотите удалить его, либо он вышел из строя, либо преуспел.

...