Я не кодер javascript, но пытался найти решение с использованием веб-форм HTML и Javascript... Однако я использую цикл while для проверки статуса отправленного задания, но поскольку я это делаю, страница зависает. Есть ли способ проверить статус без зависания страницы?

<!DOCTYPE html>
<html>
<body>

<p><span style="background-color:{color}; border-radius:3px; color:#ffffff; float:right; font-size:16px; padding:2px 4px 2px 4px"><a id='downLoad' href="" download='file' style='display:none' target='_blank'>Save file As</a></span><span style="font-size:24px"><span style="color:#d52b40">Print Survey Report&nbsp;</span></span></p>
<p>Enter the project <b>Print ID</b> and <b>File Name</b> then submit the report for print. Repot may take a few minutes, but a <b>Save File As link</b> will show when ready for download. Right click and select <b>Save Link As</b></p>
<form id='printSurvey'>
  <input type="hidden" id="portalUrl" name="portalUrl" value="https://transportation.bd.esri.com/portal">
  <input type="hidden" id="templateItemId" name="templateItemId" value="a19dc0354ade4e9da65086453d89aa4a">
  <input type="hidden" id="surveyItemId" name="surveyItemId" value="901946f3a7f940f4bab7bbda9d7595e3">
  <input type="hidden" id="featureLayerUrl" name="featureLayerUrl" value="https://transportation-rh.bd.esri.com/server/rest/services/Geotech/GeotechProjectInfoPointSDE/FeatureServer/2">
  <input type="hidden" id="token" name="token" value="toekn was removed">
  <input type="hidden" id="outputFormat" name="outputFormat" value="docx">
  
  <input type="hidden" id="uploadInfo" name="uploadInfo[type]" value="arcgis">
  <input type="hidden" id="uploadInfo" name="uploadInfo[parameters][folderId]" value="6128cd36706f40ddaaa387e9296032a9">
  <input type="hidden" id="uploadInfo" name="uploadInfo[parameters][conflictBehavior]" value="rename"> 
  
  
  <label for="queryParameters">Print ID:</label>
  <input type="text" id="queryParameters" name="queryParameters[objectIds]" placeholder="i.e 1"><br><br>
  
  <label for="outputReportName">Report Name:</label>
  <input type="text" id="outputReportName" name="outputReportName" placeholder="Logging Report Name"><br><br>

  <input type="hidden" id="outputPackageName" name="outputPackageName" >
  
  <input type="submit" type="buton" value="Submit">
   
</form>

<script>
document.getElementById("outputReportName").addEventListener('focusout',function () { 
    document.getElementById("outputPackageName").value = this.value;
});   
const downLoadTag = document.getElementById('downLoad');


function httpGet(url){
    let xmlHttpReq = new XMLHttpRequest();
    var url = url +'?portalUrl=https://transportation.bd.esri.com/portal&token=token was removedenter code here'
    xmlHttpReq.open("GET", url, false); 
    xmlHttpReq.send(null);
    return JSON.parse(xmlHttpReq.responseText);
}



        
window.addEventListener("load", () => {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData(form);

    // Define what happens on successful data submission
    setTimeout(XHR.addEventListener("load", (event) => {
      //alert(event.target.responseText['jobId']);
      var responseArray = JSON.parse(event.target.responseText);
      var jobID = responseArray['jobId'];
      var urlPath = 'https://survey123.arcgis.com/api/featureReport/jobs/'+jobID
      var status = 'esriJobExecuting'
      alert('Report is being generated... This may take several minutes');
      var countEnd = 0
      while (status != 'esriJobSucceeded') {
        var getRep = httpGet(urlPath)
        if (getRep['jobStatus'] == 'esriJobSucceeded'){
            var itemID = getRep['resultInfo']['resultFiles'][0]['id'];
            var urlBeg = 'https://transportation.bd.esri.com/portal/sharing/rest/content/items/';
            var urlEnd = '/data?token=token was removed';
            downLoadTag.href = urlBeg +itemID+urlEnd;
            //console.log(getRep['resultInfo']);
            status = getRep['jobStatus'];
            //console.log(getRep);
            alert('Report is ready for download')
        };
      };
      downLoadTag.style='display:show';
      
    }), 5);

    // Define what happens in case of error
    XHR.addEventListener("error", (event) => {
      alert('Oops! Something went wrong.');
    });

    // Set up our request
    XHR.open("POST", 'https://survey123.arcgis.com/api/featureReport/createReport/submitJob');

    // The data sent is what the user provided in the form
    XHR.send(FD);
  };

  // Get the form element
  const form = document.getElementById("printSurvey");

  // Add 'submit' event handler
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    sendData();
    
  });
});
</script>

</body>
</html>
0
ian mcintosh 4 Окт 2022 в 21:52
Таким образом, использование цикла while приводит к зависанию вашей страницы, и вам приходится ее заменять. setInterval было бы лучшим решением практически во всех случаях. Также я бы порекомендовал вам использовать fetch вместо очень устаревшего XMLHttpRequest.
 – 
Jaood_xD
4 Окт 2022 в 22:06
Вы могли бы убрать петлю и вместо этого использовать таймер? Это уменьшит количество запросов, которые вы делаете (если несколько минут точно, вы будете делать МНОГО httpGet) и сделаете документ пригодным для использования.
 – 
NickSlash
4 Окт 2022 в 22:07

1 ответ

Я недавно боролся с той же проблемой. Существует API веб-воркеров. Он делает все в фоновом режиме и не блокирует основной поток. Это легко узнать и понять. Просто используйте Google Web Workers API, и вы его получите!

0
Marat 4 Окт 2022 в 22:01