具有完成阶段的多个 ajax 请求的进度条。是否可以？

Question

我有一个简单的表单，提交时通过 ajax 请求进行验证。如果表单检查正常，则发出另一个 ajax 请求来处理最初提交的数据。

我想为此建立一个进度条。我发现将此代码添加到每个 ajax 请求会分别返回每个调用的进度。这使得进度条加载到 100%，两次，很快。

是否有可能例如两个 ajax 请求每个填充进度条的 50%？...所以 ajax 请求 1 将填充到 50%，第二个将从 51% 填充到 100%？还是疯了？

或者如果三个 ajax 调用各占总百分比的 33.33%？

我想我们更多地关注完成的阶段以及进度。

有什么想法可以在不过多伪装的情况下实现这一点吗？

var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log('percent uploaded: ' + (percentComplete * 100));
    }
}, false);
//Download progress
xhr.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log('percent downloaded: ' + (percentComplete * 100));
    }
}, false);
return xhr;

Answer 1

好吧，我创建这样一个进度条的方式是，因为您希望一个接一个地调用您的每个函数，即一个完成应该触发另一个，XMLHttpRequest 具有 onreadystate 更改事件。您可以使用该事件来确认第一个请求是否成功执行，然后触发第二个请求，在每次更改时，进度条都会增加您想要的任何百分比。

function postdata()
{
    var xhr = new XMLHttpRequest();
    xhr.open
        (
            "POST",
            Url,
            true
        );
    xhr.send();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
            //Call next function here and increment progressbar
        }
    }
}

希望对你有帮助

Answer 2

是的，这是可能的。您可以创建一个包含每个 ajax 调用的数组。将<progress> 元素max 属性设置为100/array.length。将单个progress 事件的evt.loaded / evt.total 除以数组.length 以设置value 的<progress> 元素。您还可以使用 Promise.all()、.then() 处理从 ajax 调用返回 Promise 的函数数组并更新 <progress> 元素。

---

html

<label></label>
<progress value="0" min="0" max="100"></progress>

javascript

var progress = document.querySelector("progress");
var url = "/echo/html/";

function request(url) {
var len = arr.length;
return new Promise(function(resolve, reject) {
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", function(evt) {
    if (evt.lengthComputable) {   
      var percentComplete = ((evt.loaded / evt.total) * (progress.max / len)) 
                            / len;
      progress.value += percentComplete;
      console.log(progress.value, percentComplete);
      if (evt.total === evt.loaded) {
        requests += 1;
      }
      if (progress.value == progress.max && requests === len) {
        progress.previousElementSibling.innerHTML = "upload complete";
        // you could call `resolve()` here if only interested in
        // `upload` portion of request
        alert("upload complete");
      }
    }
  }, false);
  xhr.onload = function() {
     resolve(this.responseText)
  };
  xhr.onerror = reject;
  xhr.open("POST", url, true)
  xhr.send("html=" + Array(100000).fill(1).join(""));
  })
}

var arr = [], requests = 0;
arr.push(request, request, request);
Promise.all(arr.map(function(req) {
  return req(url)
}))
.then(function(data) {
  console.log(data);    
})
.catch(function(err) {
  console.log(err)
})

jsfiddle https://jsfiddle.net/v2msL7hj/3/