在可观察流中间运行 HTTP 请求

Question

我有一个比较简单的 HTTP PUT 请求：

const req = new HttpRequest('PUT', payload.url, payload.file, {
  reportProgress: true,
  headers: new HttpHeaders().set('Content-Type', 'image/jpeg'),
});

return self.http.request(req).subscribe((event: HttpEvent<any>) => {
  switch (event.type) {
    case HttpEventType.Sent:
      console.log('Request sent!');
      break;
    case HttpEventType.ResponseHeader:
      console.log('Response header received!');
      break;
    case HttpEventType.DownloadProgress:
      const kbLoaded = Math.round(event.loaded / 1024);
      console.log(`Download in progress! ${kbLoaded}Kb loaded`);
      break;
    case HttpEventType.UploadProgress:
      const kbUploaded = Math.round(event.loaded / 1024);
      console.log(`Upload in progress! ${kbUploaded}Kb loaded`);
      break;
    case HttpEventType.Response:
      console.log('???? Done!', event.body);
      return payload;
  }
});

如何将其插入可观察的流中，以便我可以将之前的响应通过管道传输到其中并等待发送下一个响应，直到上传完成？我尝试了以下方法：

1. 将整个内容包装在 .do(payload => { ... } ) 中

这种工作——语句按预期触发，文件被上传——但下游的函数不会等到上传完成，所以我不能以任何方式传递结果。这也让人觉得很老套，因为文档暗示 .do() 更多地用于日志记录和次要实用程序，而不是整个功能的核心任务。

1. 使用map 和flatMap 尝试将其放入流中

我还尝试将请求功能拆分为如下几个函数：

...
.flatMap(payload => {
  const req = new HttpRequest('PUT', payload.url, payload.file, {
    reportProgress: true,
    headers: new HttpHeaders().set('Content-Type', 'image/jpeg'),
  });

  return self.http.request(req).map((event: HttpEvent<any>) => {
    return { ...payload, event };
  });
})
.map(payload => {
  switch (payload.event.type) {
    case HttpEventType.Sent:
      console.log('Request sent!');
      break;
    case HttpEventType.ResponseHeader:
      console.log('Response header received!');
      break;
    case HttpEventType.DownloadProgress:
      const kbLoaded = Math.round(payload.event.loaded / 1024);
      console.log(`Download in progress! ${kbLoaded}Kb loaded`);
      break;
    case HttpEventType.UploadProgress:
      const kbUploaded = Math.round(payload.event.loaded / 1024);
      console.log(`Upload in progress! ${kbUploaded}Kb loaded`);
      break;
    case HttpEventType.Response:
      console.log('???? Done!', payload.event.body);
      return [];
  }
})

上传有效，但 observable 最终会为每个 HttpEvent 发送响应，这不是我想要的。我只想在上传完成后发送回复，也就是HttpEventType.Response。

我做错了什么，我该如何做对？

Answer 1

如果您选择不从传递给 map 的函数返回值，它将执行任何其他 JavaScript 函数将执行的操作并返回 undefined。

所以除了HttpEventType.Response 之外的所有情况都会看到undefined 被发射到可观察的流中。

如果您想忽略其他情况下发出的值，请使用filter：

.map(payload => {
  switch (payload.event.type) {
    case HttpEventType.Sent:
      console.log('Request sent!');
      break;
    case HttpEventType.ResponseHeader:
      console.log('Response header received!');
      break;
    case HttpEventType.DownloadProgress:
      const kbLoaded = Math.round(payload.event.loaded / 1024);
      console.log(`Download in progress! ${kbLoaded}Kb loaded`);
      break;
    case HttpEventType.UploadProgress:
      const kbUploaded = Math.round(payload.event.loaded / 1024);
      console.log(`Upload in progress! ${kbUploaded}Kb loaded`);
      break;
    case HttpEventType.Response:
      console.log('? Done!', payload.event.body);
      return [];
  }
})
.filter(value => Boolean(value)) // filter undefined values

但是，如果你总是返回一个结果，而不是依赖一个隐含的undefined，那就更清楚了：

.map(payload => {
  switch (payload.event.type) {
    case HttpEventType.Sent:
      console.log('Request sent!');
      return payload;
    case HttpEventType.ResponseHeader:
      console.log('Response header received!');
      return payload;
    case HttpEventType.DownloadProgress:
      const kbLoaded = Math.round(payload.event.loaded / 1024);
      console.log(`Download in progress! ${kbLoaded}Kb loaded`);
      return payload;
    case HttpEventType.UploadProgress:
      const kbUploaded = Math.round(payload.event.loaded / 1024);
      console.log(`Upload in progress! ${kbUploaded}Kb loaded`);
      return payload;
    case HttpEventType.Response:
      console.log('? Done!', payload.event.body);
      return { ...payload, body: payload.event.body }; // or whatever
  }
})
.filter(payload => payload.event.type === HttpEventType.Response)