针对长时间运行的服务器进程的Angular5.x进度报告

时间:2018-04-24 12:30:47

标签: angular xmlhttprequest angular5 angular-httpclient

我们在django / angular5.x应用程序中遇到了重复的设计模式 导致我们写了很多直接与XMLHttpRequest交互的代码,我们想知道是否有人提出了更好的解决方案。

这里是模式:向执行长时间运行的服务器发送请求(比如说5分钟)。在操作期间,服务器会在响应成功/失败之前发出一系列进度报告。

出于本场景的目的,让我们说服务器只是发出一系列进度报告,例如以下django / python代码:

def reports(request):
    return StreamingHttpResponse(stream())

def stream():
    for num in range(10):
        yield '%d of 10\n' % num
        # simulate random 10 - 30 second delay
        time.sleep(random.randint(10, 30))

在Angular5.x中,我们有使用观察者模式报告进度的服务:

@Injectable()
export class ProgressService {
  constructor() { }
  progress() {
    let seen: number = 0;
    return Observable.create(observer => {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 3 || xhr.readyState === 4) {
          observer.next(xhr.responseText.substring(seen);
          seen = xhr.responseText.length;
        }
      }
      xhr.open('POST', '/dosomething', true);
      xhr.send();
    });
  }
}

这段代码可以运行 - 但每次我们与长时间运行的服务进行交互时,写这样的东西感觉不对。

我们已经查看了angular2 HttpClient并看到它有reportProgress选项,但这似乎只提供了HttpEventType.DownloadProgress,但却无法访问{{3}} {1}}到目前为止看到了。我已经看到了一些对拦截器的引用,但是我们不清楚我们是如何操纵它们来提取进度报告中累积的响应主体的。

我们是否遇到了HttpClient基础设施的限制 - 我们是否已经开发出唯一可行的解​​决方案?或者我们错过了一些明显的东西?

0 个答案:

没有答案