Angular HttpClient возвращает строковые данные вместо проанализированного JSON - PullRequest
0 голосов
/ 24 октября 2019

Я занимался миграцией кодовой базы с 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, вот функция снова, используя HttpClient из @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<>().

Что я здесь не так делаю? не должен ли он уже быть проанализирован?

Образец данных ответа A'la Network Tools в Chrome Dev Tools: enter image description here

Образец тела ответа:

enter image description here

Снимок экрана Dev Tools со значением response enter image description here

Бэкэнд (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>

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Вот как должен выглядеть необработанный ответ для ваших данных :

[{"Id":1234,"Name":"Chris Rutherford"}]

Но вот как это на самом деле выглядит:

"[{\"Id\":1234,\"Name\":\"Chris Rutherford\"}]"

Итак, где-то в коде вашего сервера вы дважды применили кодировку JSON. Как только вы исправите это, HttpClient поступит правильно.

0 голосов
/ 24 октября 2019

Я бы процитировал ответ от этой темы . Надеюсь, что он пролил некоторый свет на то, как все работает, прочитайте его полностью, он просветил меня, хотя его нелегко найти.

TypeScript проверяет только интерфейс объекта во время компиляции. Любой объект, который код извлекает во время выполнения, не может быть проверен с помощью TypeScript.

Если это так, то такие вещи, как HttpClient.Get не должны возвращать Observable типа T. Он должен возвращать Observable типа Object, потому что это то, чтона самом деле возвращается. Попытка установить, что он возвращает T, когда возвращает Object, вводит в заблуждение.

В документации клиентский раздел возврата говорит следующее:

@ возвращает Observable тела как типT.

На самом деле в документации должно быть сказано:

@ вернуть Observable тела, которое может быть T. Вы не получите T обратно. Если вы вернете T, это будет фактически T, но это не так.

...