时间戳

首页 > 解决方案 > Angular HttpClient 返回字符串数据而不是解析的 JSON

json - Angular HttpClient 返回字符串数据而不是解析的 JSON

问题描述

我一直在将代码库从 Angular 4.x 迁移到 5.x，但遇到了一个奇怪的问题。我有一个服务功能，旨在将对象列表返回到前端，然后我将其按摩成特定的数据格式。我知道我需要保留映射，但我有点生气它只返回纯字符串数据。

原来的功能是这样的：（使用Http从@angular/http刚刚重命名为HttpClient）

    public GetVendors(showAll = true, screenArea: number = 0): Observable<Array<SelectModel>> {
        let link = AppSettings.API_COMMON_VENDORS;
        let params: URLSearchParams = new URLSearchParams();
        params.set('showAll', showAll.toString());
        params.set('screenArea', screenArea.toString());

        let requestOptions = new RequestOptions();
        requestOptions.search = params;

        return this.httpClient.get(link, requestOptions).map(response => {
            let result = JSON.parse(response.json());
            let list = new Array<SelectModel>();
            let vendors: Array<any> = result;

            vendors.forEach(vendor => {
                list.push(this.CreateSelectModel(vendor));
            });

            return list;
        });
    }

在撕掉所有的 Http 代码之后，这里的函数再次使用HttpClientfrom@angular/common/http

    public GetVendors(showAll = true, screenArea: number = 0): Observable<Array<SelectModel>> {
        let link = AppSettings.API_COMMON_VENDORS;
        let params: HttpParams = new HttpParams()
            .set('showAll', showAll.toString())
            .set('screenArea', screenArea.toString());

        return this.httpClient.get<Array<any>>(link, {params}).map(response => {
            let list = new Array<SelectModel>();

            response.forEach(vendor => {
                list.push(this.CreateSelectModel(vendor));
            });

            return list;
        });
    }

问题在于它有点违背了新​​客户端为我解析 json 的目的。该response对象是一个字符串，表示我请求的数据的 JSON，但它仍然是字符串形式，而不是get<>()调用中定义的类型。

我在这里做错了什么？不应该已经解析了吗？

Chrome 开发工具中的示例响应数据 A'la 网络工具： 在此处输入图像描述

示例响应正文：

在此处输入图像描述

具有值为的开发工具屏幕截图response 在此处输入图像描述

后端 (C#) 响应如下：

      [HttpGet]
        public JsonResult Vendors(bool showAll = false, int screenArea = 0)
        {
            var vendors = _commonBL.GetVendorsSlimForUser(UserModel, UserModel.CustomerId, showAll, screenArea);

            return GetJson(vendors);
        }

这是在 Http => HttpClient 迁移之前的工作方式，它与 ONE 一起工作JSON.parse()返回行中的数据只是一个标准List<T>

标签： jsonangularangular-httpclient

解决方案

我会从这个线程中引用一个答案。希望它能对事情的运作方式有所启发，彻底阅读它，它启发了我，很难找到它。

TypeScript 仅在编译时验证对象接口。TypeScript 无法验证代码在运行时获取的任何对象。

如果是这种情况，那么像 HttpClient.Get 这样的东西不应该返回 T 类型的 Observable。它应该返回 Object 类型的 Observable，因为这就是实际返回的内容。试图声明它在返回 Object 时返回 T 是一种误导。

在文档中，客户的退货部分是这样说的：

@return 一个Observablebody 作为 type T。

实际上，文档应该说：

@returnObservable可能是T. 你没有得到 T 回来。如果你把 T 找回来，它实际上是 T，但它不是。

推荐阅读