title: XMLHttpRequest Progress Events within a Promise
body: <p>I'm having trouble finding any solutions for tracking the upload progress event of an <code>XMLHttpRequest</code> object inside of a <code>Promise</code>.</p>
  
  <p>Here is an example of the code that I'm using to create async requests:</p>
  
  <pre><code>var request = function(method, url, data) {
    return new Promise(function(resolve, reject) {
      xhr.open(method, url, true);
      xhr.onload = resolve;
      xhr.onerror = reject;
      xhr.send(data);
    });
  };
  </code></pre>
  
  <p>I'd like to have something like this:</p>
  
  <pre><code>  var r = request('POST', '/upload', data)
      .then(() =&gt; {
        console.log('completed');
      });
  
    r.upload.addEventListener('progress', (e) =&gt; {
      console.log('ProgressEvent: ', e);
    });
  </code></pre>
  
  <p>I'm trying to do this with vanilla JavaScript which is working well so far, but I'd like to figure out a clean way to do this without using any third party libraries.</p>