如何中止来自 Observable 的 Ajax 请求？

我的代码包含这个简单的函数，我用它来将文件上传到我的 PHP 服务器（有一个xhr请求嵌套在RxJS/Observable):

fileUpload(file: File): Observable<any> {
    return new Observable( observer => {
        let xhr:XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(<any>JSON.parse(xhr.response));
                } else {
                    observer.error(xhr.response);
                    observer.complete();
                }
            }
        };

        xhr.open('POST', '__BACKEND__?action=file-upload', true);
        var formData = new FormData();
        formData.append('file', file, file.name);
        xhr.send(formData);
    });
}

它功能齐全，但现在我还想为其添加某种取消机制。

仅仅取消订阅 Observable 是行不通的，因为我需要以某种方式调用xhr.abort()或者我会因为大量上传而浪费宝贵的资源。

是否可以通过修改此代码获得一个优雅的解决方案，或者我做错了，因为我正在使用RxJS/Observable为了这个任务？

当您创建一个Observable您可以通过返回指定取消订阅行为Subscription or a function来自构建器函数：

fileUpload(file: File): Observable<any> {
    return new Observable( observer => {
        let xhr:XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(<any>JSON.parse(xhr.response));
                    observer.complete();
                } else {
                    observer.error(xhr.response);
                }
            }
        };

        xhr.open('POST', '__BACKEND__?action=file-upload', true);
        var formData = new FormData();
        formData.append('file', file, file.name);
        xhr.send(formData);

        //Return the tear down logic. 
        //You may also want to check here that it has not already completed
        //Since this gets called in all cases when the `Subscription` terminates
        return () => xhr.abort();
    });
}