Question

我试图执行多个XHR请求（在getImages函数内），每个请求都使用getImage包装在一个可观察的（forkJoin}函数内）。但是，没有任何请求被执行，即永远不会执行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

1 个答案: