약속 내 XMLHttpRequest 진행 이벤트

Question

안에있는 XMLHttpRequest 개체의 업로드 진행 상황을 추적하기위한 솔루션을 찾는 데 문제가 있습니다. 내가하려고 해요

var r = request('POST', '/upload', data) 
    .then(() => { 
     console.log('completed'); 
    }); 

    r.upload.addEventListener('progress', (e) => { 
    console.log('ProgressEvent: ', e); 
    }); 

을 : 같은 것을 가지고 내가 좋아하는 것

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); 
    }); 
}; 

: 여기

내가 비동기 요청을 만드는 데 사용하고 코드의 예입니다 지금까지 잘 작동하는 바닐라 자바 ​​스크립트를 사용하여이 작업을 수행 할 수 있지만 타사 라이브러리를 사용하지 않고도이 작업을 수행 할 수있는 확실한 방법을 찾고 싶습니다.

Answer 1

불행히도 기본 약속에는 어떤 종류의 진행 상황을 나타내는 방법이 없습니다. 그들은 단지 합격/불합격이며 하나의 결과 만 보낼 수 있습니다. 콜백이 아닌 지연 함수 반환이라고 생각할 수 있습니다. 아마도 당신의 기능에서 진보 콜백을 수락하고 그 정보를 대체 경로 밖으로 보낼 필요가있을 것입니다. 당신이 약속 라이브러리를 사용하는 경우, 그들 중 일부는 Promise 생성자를 확장하고 자신을 추가하기 위해 진행 콜백 옵션 ("진행 통지"에 대한 전. https://github.com/kriskowal/q 검색)

Answer 2

some caveats와

오래된 브라우저를 들어, ES6 클래스를 사용할 수 있나요 상단에 API가 있습니다.

다음은 Promise AJAX 래퍼에 onReadyStateChange 이벤트 처리기를 추가하는 기본 예제입니다.

'use strict'; 
 

 
const _onReadyStateChange = Symbol('onReadyStateChange'); 
 

 
class PromiseAJAX extends Promise { 
 
    constructor(func) { 
 
     let promise; 
 
     super((resolve, reject) => { 
 
      func(resolve, reject, function(event) { 
 
       // Constructor will not finish before readyState 1 event. 
 
       // That means we will not have access to promise in time. 
 
       // Could use a setTimeot of 0 if desired to capture. 
 
       let onReadyStateChange; 
 
       if (promise && (onReadyStateChange = promise.onReadyStateChange)) { 
 
        onReadyStateChange(event); 
 
       } 
 
      }); 
 
     }); 
 
     promise = this; 
 
     this[_onReadyStateChange] = undefined; 
 
    } 
 

 
    get onReadyStateChange() { 
 
     return this[_onReadyStateChange]; 
 
    } 
 

 
    set onReadyStateChange(value) { 
 
     this[_onReadyStateChange] = value; 
 
    } 
 
} 
 

 
//////////////////////////////////////////////////////////////////////////////// 
 

 
let pajax = new PromiseAJAX(function(resolve, reject, readyStateChange) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.onreadystatechange = readyStateChange; 
 
    xhr.onload = resolve; 
 
    xhr.onerror = reject; 
 
    xhr.open('GET', 'https://crossorigin.me/https://www.google.com/humans.txt', true); 
 
    xhr.send(); 
 
}); 
 

 
pajax.then(function(value) { 
 
    console.log(value.target.responseText); 
 
}); 
 
pajax.catch(function(reason) { 
 
    console.log(reason); 
 
}); 
 
pajax.onReadyStateChange = function(event) { 
 
    console.log('readyState: ' + event.target.readyState); 
 
};

그것은 전적으로 완벽한 건 아니지만, 원하는 경우 Promise을 확장하는 당신에게 기초를 제공해야합니다.