可观察的 forkjoin 从不执行可观察的 angular2

Question

我正在尝试执行多个 XHR 请求（在 getImages 函数内），每个请求都包含在一个可观察对象中（在 getImage 函数内），使用 forkJoin。然而，none 的请求被执行，即 observer.next() 从未被执行。我试过使用 zip 而不是 forkJoin 但这也不起作用。我确保我可以 complete 我正在创建的所有可观察对象。

getImages(urls: string[]) {
    Observable.forkJoin(...urls.map(url => {return this.getImage(url)}))
           .subscribe(
               (result) => {console.log(result)}, 
               (err) => {console.log(err)},
               () => {});
}

private getImage(url: string): Observable<string> {
    let xhr = new XMLHttpRequest();
    return Observable.create((observer => {
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(xhr.response);
                } else {
                    observer.error(xhr.response);
                }
                observer.complete();
            }
        }
        xhr.responseType = "blob";
        xhr.open("GET", url, true);
    }))
}

Answer 1

对 XMLHttpRequest 不够熟悉，但是根据您的诊断和我看到的关于它的用法的示例，我想您没有达到 readyState 4 (DONE)，因为您没有调用 xhr.send( ).

来自 @https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

列出的示例

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

所以我想您可能想将代码修改为：

return Observable.create((observer => {
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                observer.next(xhr.response);
            } else {
                observer.error(xhr.response);
            }
            observer.complete();
        }
    }
    xhr.responseType = "blob";
    xhr.open("GET", url, true);
    xhr.send();
}))

可观察的 forkjoin 从不执行可观察的 angular2

observable forkjoin never executes the observable angular2

reactive-programming

rxjs

rxjs5

angular