尝试缓存 HttpClient 响应但获取“HttpResponse<Blob>”不可分配给“响应”类型的参数答案

【问题标题】：Trying to Cache HttpClient Response but getting 'HttpResponse<Blob>' is not assignable to parameter of type 'Response'尝试缓存 HttpClient 响应但获取“HttpResponse<Blob>”不可分配给“响应”类型的参数
【发布时间】：2021-07-25 22:03:17
【问题描述】：

所以，基本上在我的 Angular 项目中，我试图通过以下代码行使用 Cache API 缓存 HttpClient 的请求和响应：

from(caches.open(this.getCacheName(this.chatAttachmentsCache)))
  .pipe(map(cache => {
    cache.put(request, response);
  }));

请求参数是请求的 URL，响应参数是请求的响应。

我将从成功的 HttpClient GET 请求中获得的 HttpResponse 对象作为响应传递给 cache.put 调用。但是，我在文本编辑器中不断收到此错误。

Argument of type 'HttpResponse<Blob>' is not assignable to parameter of type 'Response'.
  Type 'HttpResponse<Blob>' is missing the following properties from type 'Response': redirected, trailer, bodyUsed, arrayBuffer, and 4 more

我从下面的代码行中获得了 HttpResponse 对象：

    return this.httpClient.get(url, { responseType: "blob", observe: "response" });

我真的不知道如何解决这个问题。这是否意味着我不能在 Angular 中将缓存 API 与 HttpClient 一起使用？还是有一些解决方法来处理这样的问题？

提前致谢。

【问题讨论】：

标签： angular caching httpclient httpresponse cachestorage

【解决方案1】：

我设法解决了这个问题。

对于遇到相同问题的任何人。我通过构造函数创建了一个新的 Response 对象，并根据文档here 将 HttpResponse 中的正文、状态和状态文本传递给它。这是一个例子：

const responseAsResponseType = new Response(response.body, {
  "status": response.status,
  "statusText": response.statusText,
});

【讨论】：