标签: angular-httpclient

我在显示 API 响应数据时遇到问题。我收到的数据是对象中的对象。我尝试显示数据，JSON.striginfy但数据不清楚。

我从 API 收到的数据：

JSON：

\n

{"102":{"173":"AX","175":"ZX","179":"Xantia","183":"XM","186":"回避","189": "C3","191":"盛宝","193":"Jumpy","194":"柏林戈","196":"Xsara","200":"C15","204":"跳线","206":"C8","208":"C5","216":"C2","218":"C4","222":"C1","224":"C6", "233":"C-Crosser"、"241":"尼莫"、"5007":"DS3"、"10194":"DS4"、"15270":"DS5"、"15382":"C-零","15411":"C-Elys\xc3\xa9e","16100":"SpaceTourer","16536":"型号","16693":"柏林戈电气"},"103":{"244" ：“Tico”，“245”：“Nexia”，“246”：“Espero”，“247”：“赛车手”，“248”：“Evanda”，“249”：“卡洛斯”，“250”：“努比拉","252":"莱甘扎","254":"拉诺斯","255":"卢布林 3","256":"马蒂斯","257":"科兰多","259":"穆索","262":"主席","263":"塔库马","264":"马蒂兹二世","265":"拉诺斯二世","1997":"FSO","2001":"卢布林II","16537":"型号"},"104":{"266":"Cinquecento","267":"Punto","269":"布拉沃","271":"布拉瓦"," 273":"Coup\xc3\xa9","274":"Barchetta","275":"尤利西斯","277":"派力奥","278":"Multipla","281":"Croma" ,"283":"Tempra","289":"Ducato","290":"Tipo","292":"Uno","294":"熊猫","295":"Marea"," 300":"126 P","301":"Dobl\xc3\xb3","304":"Stilo","308":"Seicento","310":"想法","312":"Scudo ","320":"Grande Punto","326":"Linea","329":"500","331":"Fiorino","333":"Sedici","1987":"Strada" ,"4936":"Punto Evo","4938":"Punto 实际","5011":"500C","5015":"Qubo","5102":"500 C","15202":"弗里蒙特","15274":"熊猫经典","15416":"500L","15509":"500 L","15830":"500X","16124":"124 Spider","16125":"塔伦托","16195":"后卫", "16538":"车型"},"105":{"336":"嘉年华","337":"焦点","339":"护航","340":"蒙迪欧","346": "天蝎座","352":"过境","359":"塞拉","361":"猎户座","369":"卡","370":"探索者","372":"融合","374":"StreetKa","375":"Galaxy","377":"Tourneo","385":"Maverick","392":"Puma","402":"S-MAX ","406":"C-MAX","415":"Kuga","2016":"Ranger","15418":"B-MAX","15878":"野马","16170": "Edge","16390":"EcoSport","16539":"MODEL","16655":"Grand Tourneo"},"106":{"421":"思域","422":"爵士乐" ,"423":"HR-V","424":"前奏","425":"传奇","426":"航天飞机","427":"流","430":"S2000" ,"432":"CR-V","434":"雅阁","439":"Integra","450":"FR-V","456":"城市","466":"洞察力","5018":"CR-Z","16540":"MODEL","17088":"e"},"107":{"467":"口音","468":"Lantra" ,"469":"索纳塔","471":"H100","472":"Getz","474":"S 轿跑车","475":"小马","477":"轿跑车", "478":"加洛珀","480":"H1","486":"阿托斯","489":"XG","490":"Trajet","494":"圣达菲"," 496":"伊兰特","497":"图森","499":"矩阵","501":"特拉肯","508":"宏伟","515":"i30","520" ：“i10”，“522”：“ix55”，“523”：“i20”，“4940”：“ix35”，“5220”：“ix20”，“5222”：“创世纪”，“5280”：“ Veloster","10198":"i40","15598":"大圣达菲","16171":"Ioniq","16307":"H350","16358":"科纳","16541":"型号”，“16677”："Kona Electric","16678":"Ioniq Electric"},"108":{"525":"Neon","526":"Stratus","527":"Vision","528":"新约克","529":"航行者号","531":"PT 巡洋舰","532":"大航行者号","533":"赛百灵","536":"萨拉托加","537":" Le Baron","539":"毒蛇","543":"300 M","551":"交火","554":"300 C","16542":"型号"},}

\n

我显示的原始数据JSON.striginfy：

我的代码：

组件.ts

vehicleModels;\ndataIsReady = false;\n\n constructor(\n    private vehicleService: VehicleService,\n  ) { }\n\n ngOnInit(): void {\n    this.getModels();\n}\n\n public getModels() {\n    this.vehicleService.getBrandsModels().subscribe(({ …

我正在尝试 POST 到一个端点，该端点需要将参数作为查询字符串参数传递，而不是通过 POST 正文传递。

const params = new HttpParams()
  .set('param1', '1')
  .set('param2', '2');

const url = environment.apiUrl + 'Service/Endpoint';

return this
  .httpClient
  .post<ServiceResponse>(url, { params })
  .pipe(map(res => res.httpStatusCodeSuccess));

这将返回 404，因为调用不包含任何查询字符串参数。我通过查看网络调用验证了这一点。

如果我正在使用但不针对 POST 端点，那么相同的代码确实可以针对 GET 请求对我起作用。.get().post()

我缺少什么？

当我从api得到一些东西时,我想让授权标题不要一次又一次地声明它.

每当我需要从api获取数据时,我需要附加授权标头.我目前在Angular 4中使用HTTPCLIENT.我的代码:

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { AppSettings } from '../app.constants';


@Injectable()
export class AuthService {
  private loggedIn = false;

  constructor(private httpClient: HttpClient) {
  }

  loginUser(email: string, password: string) {  
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json');

    return this.httpClient
    .post(
       GLOBAL_URL.LOGIN_URL + '/auth/login', 
       JSON.stringify({ email, password }), 
       { headers: headers }
    )
    .map(
        (response: any) => {
         localStorage.setItem('auth_token', response.token);
          this.loggedIn = true;
          return response;
        });
   } …

我有完全 angular 版本 4.3.2，由于依赖关系我无法更新。所以现在我坚持这个版本。我有一个带有动态参数的对象（里面可以有其他键和值）：

let query = {
    param1: 1,
    param2: 'a'
}

我想做类似的事情：

params = new HttpParams();
params = params.append(query);
return this.httpClient.get(this.config.apiUrl + '/items', {
            params: params,
            headers: headers
        });

但没有这样的 params.append(query) 方法。所以我需要遍历查询键并将它们一一添加到参数中。有没有更简单的解决方案？

编辑1：

根据这个答案，这可以从 angular 5.0.0-beta.6 (2017-09-03) 开始完成，但对我来说不是解决方案。 /sf/answers/3242253031/

我正在尝试将一些 HttpClient 调用（.get(...) 和 .post(...)）抽象到 BaseService 类中，因为如果我的服务没有，我必须复制标头和凭据等代码从基类继承。

在这样做时，出于某种原因，我的代码没有选择 get 上的通用重载。

以下方法调用成功选择了正确的 HttpClient.get(...) 重载：

但是，以下是选择不同的重载，我不知道如何解决它：

这是因为我错误地声明了私有选项字段吗？我在 API 文档中找不到更好/正确的声明方式，以便成功选择正确的重载。有人可以帮我让我的代码Observable<T>为 HttpClient.get(...)选择正确的（通用）重载吗？

这在Angular 4中有效。要使其在Angle 5中正常工作，我需要进行哪些更改？

 getGreeting(): Observable<string> {
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });

  //cant find requestoptions
  let options = new RequestOptions({ headers: headers });

    return this.http.
        get(Constant.ApiRoot + Constant.GreetingService, options).
        map((response: Response) => response.text());
}

我正从Http迁移到HttpClient， 我习惯将一些标头添加到我的http请求中，如下所示：

import { RequestOptions, Request, RequestMethod, Headers } from '@angular/http';


this.pass = btoa(cuid + ': ');
this.pass = "Basic " + this.pass;
this.header = new Headers();
this.header.set("Authorization", this.pass);
let options = new RequestOptions({
  headers: this.header
});

return this.http.post(myServiceUrl, {}, options)

现在，当迁移到httpClient时，我已经尝试过：

import {HttpClient, HttpHeaders} from '@angular/common/http';

    const header = new HttpHeaders();
    const pass = 'Basic ' + btoa(cuid + ': ');
    header.set('Authorization', pass);
    const options =  ({
      headers: header
    });
    return this.httpClient.post(myServiceUrl, {}, options); …

如果你看一下getData()方法,它会说this.http.get<Post>.是<Post>指定返回类型,检查响应类型或转换返回的内容

interface Post {
      title: string;
      body: string;
    };

    // ...

    constructor(private http: HttpClient) {}

    getData() {
      this.http.get<Post>(this.url).subscribe(res => {
        this.postTitle = res.title;
      });
    }

我想使用 angular 6 HttpClient (@angular/common/http) 向服务器发出非 json 请求以获取 Octet-stream 。下面是我的代码。

getFile(file: any) {
    let headers: new HttpHeaders({
        'Content-Type':  'application/octet-stream',
        'Accept':'application/octet-stream',
        'Authorization': 'Bearer ' + data.token
    })

    return this.http.get<any>(this.baseUrl + '/getfile/'+file, headers);
}

但这给了我 JSON 解析错误。

"HttpErrorResponse", message: "Http failure during paring for..... ERROR {...} ? error: {...} ?? error: SyntaxError: "JSON.parse: JSON 数据第 1 行第 1 列的意外字符"

将其读取为非 json 的方法是什么？

链接一系列HttpClient调用的“最佳实践”是什么（假设当前调用取决于先前调用的结果）？以下解决方案是有效的，但显然不建议这样做。每个get返回一个Observable。在解决方案（RxJs中的较新方法）中首选使用“管道”运算符。

ngOnInit() {
  this.firstService.get().subscribe((first) => {
    this.secondService.get().subscribe(second => {
      this.thirdService.get().subscribe(third => {
        ... possibly more nested calls ...
      })
    })
  })
}