原生 onprogress 事件

XMLHttpRequestEventTarget.onprogress 是在 XMLHttpRequest 完成之前周期性调用的函数。

  • 语法

XMLHttpRequest.onprogress = callback;

  • 值

callback 在请求完成之前周期性调用的函数。

  • 事件

    • event.loaded 已传输的数据量
    • event.total 总共的数据量
      1. XMLHttpRequest.onprogress = function (event) {
      2. event.loaded;
      3. event.total;
      4. };

  • 示例 ```javascript var xmlhttp = new XMLHttpRequest(), method = ‘GET’, url = ‘https://developer.mozilla.org/‘;

xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send();

  1. [MDN相关资料](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequestEventTarget/onprogress)
  3. <a name="hVsOF"></a>
  4. ### axios的进度事件
  5. ```javascript
  6. axios({
  7.     url: "",
  8.     method: "",
  9.   data: "",
  10.   // ...
  12.   // `onUploadProgress` 允许为上传处理进度事件
  13.   onprogress(progress) {
  14.     console.log(Math.round(progress.loaded / progress.total * 100) + '%');
  15.   },
  17.   // `onDownloadProgress` 允许为下载处理进度事件
  18.   onDownloadProgress: function (progressEvent) {
  19.     // 对原生进度事件的处理
  20.   },
  21. })

axios文档