时间戳

首页 > 解决方案 > 从 Http 请求转换响应的问题

angular - 从 Http 请求转换响应的问题

问题描述

我有这个 HTTP 请求：

storeCategory(file: File, category: CategoryModel): Observable<HttpEvent<{}>> {
    const formdata: FormData = new FormData();
    console.log("1")
    formdata.append('file', file);
    formdata.append('category', new Blob([JSON.stringify({ "category_name": category.category_name, "category_description": category.category_description })], { type: "application/json" }))
    const url = `api/cateogry/saveCategory`;
    const req = new HttpRequest('POST', url, formdata, {
      reportProgress: true,
      responseType: 'text'
    });
    return this.http.request<CategoryModel>(req);
  }

从这个方法我发送数据和图像，我的后端方法返回一个 JSON 对象，但我想将该对象绑定为CategoryModel，但现在它绑定到HttpEvent.

我的回调： 在此处输入图像描述 另一张图片： 在此处输入图像描述

另一张图片： 在此处输入图像描述

标签： angularhttp

解决方案

从您发布的图像来看，请求似乎不是 a CategoryModel，而是-objectCategoryModel内的 s列表。HttpResponse既然你在使用http.request，你会得到很多回复，而且每一个在这里都有不同的HttpEventType 发现。您需要过滤每种类型的响应，并根据类型（例如event.type === HttpEventType.Response）获取您想要的内容。

尝试这个：

storeCategory(file: File, category: CategoryModel): Observable<CategoryModel[]> {
    const formdata: FormData = new FormData();
    console.log("1")
    formdata.append('file', file);
    formdata.append('category', new Blob([JSON.stringify({ "category_name": category.category_name, "category_description": category.category_description })], { type: "application/json" }))
    const url = `api/cateogry/saveCategory`;
    const req = new HttpRequest('POST', url, formdata, {
      reportProgress: true,
      responseType: 'text'
    });
    return this.http.request<any>(req).pipe(map(event => {
     console.log("event",event);
     if(event.type == HttpEventType.Response){ // try different event types based on desired result.
      event.body = event.body.replace(/\\/g,"/"); // replace all double backslashes with slash.
      return <CategoryModel[]>JSON.parse(event.body); // try to parse the data if it is a string
     }
    }));
  }

我将方法的返回类型更改为Observable<CategoryModel[]>，并更改了 return 语句以转换结果以反映这一点。

记住import {map} from 'rxjs/operators'在你的组件中记住import {HttpEventType} from '@angular/common/http'在你的组件中

并查看Angular 文档中的示例

不同HttpEventType的 s 可以在这里找到

推荐阅读