angular-httpclient | 易学教程

How to add headers to my Angular post request?

阅读更多关于 How to add headers to my Angular post request?

问题 For a school project I need to make a simple login page with Angular. When a login button is clicked I need to add an Authorization header with my post. I created a backend and when I post my Authorization value to that backend with postman it works so nothing wrong with the backend. When I try to post to the same backend with my frontend it doesn't work. What is the best way to add headers to your post? It seems that the opinions are divided. This is my code: export class LoginComponent{

HTTPClient POST tries to parse a non-JSON response

阅读更多关于 HTTPClient POST tries to parse a non-JSON response

问题 I'm trying to make a request in Angular and I know that the HTTP response will not be in JSON but in text. However, Angular seems to be expecting a JSON response since the error is the following: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.c As well as Http failure during parsing for http://localhost:9... This is the post method: return this.http.post(this.loginUrl, this.createLoginFormData(username, password), this.httpOptions) .pipe( tap( // Log

Angular 6 - HttpClient Keeping subscribe in the service but passing the result to the component

阅读更多关于 Angular 6 - HttpClient Keeping subscribe in the service but passing the result to the component

问题 I have a preject which contains a service (which gets the data) and a component (displays it). I would like the keep the code to the minimum on the app.component.ts. In the service I have: getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts', httpOptions).subscribe( result => { return result; this.theData = result; }, error => { return error; } ); } and in my app.component.ts: getPostsFromService() { this.myService.getPosts(); } But of course, I need to get the

How to send complex nested JSON from Angular Typescript to Web Api?

阅读更多关于 How to send complex nested JSON from Angular Typescript to Web Api?

问题 I have 2 issues with my json data as I am use to sending it "flat" Example typescript class model UserID: number; AppID: number; Key: string; HearingsAndEventsType: number In the past I would send above like this. { "UserID": 61525, "AppID": 15, "Key": "abc", "HearingsAndEventsType": 1 } NOT ANYMORE, I have to send as the nested object with 2 changes to the JSON object "PageQueryString": {... }, "HearingsAndEventsType": 1 THUS the mandatory structure that I need to send will look INSTEAD like

Chaining dependent Observables in RxJs

阅读更多关于 Chaining dependent Observables in RxJs

问题 What is "best practices" for chaining a sequence of HttpClient calls (assume the current call depends on the results of the previous calls)? The following solution is functional but apparently not recommended. Each get returns an Observable. Use of the "pipe" operator preferred in solution (the newer approach in RxJs). ngOnInit() { this.firstService.get().subscribe((first) => { this.secondService.get().subscribe(second => { this.thirdService.get().subscribe(third => { ... possibly more nested

angular http post send complex objects

阅读更多关于 angular http post send complex objects

My Service public submitBooking(createBooking: CreateBooking) { const body = this.getSaveBookingRequestBody(createBooking); //const json = JSON.Stringify(body) //It throws 415 error return this.httpClient.post(this.baseUrl + 'Save', body ) .subscribe(); } private getSaveBookingRequestBody(createBooking: CreateBooking): any { const body = { 'Booking': { 'Header': this.getBookingHeader(createBooking), //It works fine. 'Items': [this.getBookingItems(createBooking)], }, 'TestOnly': !environment.production, }; this.Logger.log(body); return body; } private getBookingItems(createBooking:

angular httpClientTestingModule httpMock giving error: found 2 requests

阅读更多关于 angular httpClientTestingModule httpMock giving error: found 2 requests

问题 I have written first test to test service class: service class: import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/common/http' import {IComment} from "../../models/comments"; import {Observable} from "rxjs/observable"; import { mergeMap } from 'rxjs/operators'; @Injectable() export class CommentsDataService { public _url:string = "../../../../assets/json/comments.json"; constructor(private http: HttpClient) { } /** * Return Sample json for * Comment listing. *

Angular handle for 500 server errors

阅读更多关于 Angular handle for 500 server errors

问题 How can I modify my http call to handle(catch) for 500 server errors. I try calling an API but receive a '500 (Internal server error' in the 'err' part of the function. I would like to be able to catch it if possible but am not sure how. Is there a simple way to do this? call_http() { this.http.get<any>('/api/goes/here').subscribe(data => { this.result = data; }, err => { console.log(err); }); } I am not using any headers, map, errorhandler etc. This is just a basic call. 回答1: If you want to

Poll API using Angular HTTP Observable

阅读更多关于 Poll API using Angular HTTP Observable

In my component html, I am using the asyncPipe to subscribe to this http service. The service maps the json response object to an array of class instances. This all works great, but I would like http service to poll every few seconds. I've tried a bunch of things (like interval), but it seems RXJS is a bit of a minefield at the moment. Has anyone implemented this kind of thing using Angular 6? fetch(command, params?) { return this.http.post(`http://localhost:4000/${command}`, params) .pipe( map((data: Data) => { const statuses: Status[] = []; for (const statusKey of Object.keys(data.statuses))

Overload request headers and params with HttpClient get

阅读更多关于 Overload request headers and params with HttpClient get

In HttpClientModule, is there a method to pass headers and params to get request. import { HttpHeaders, HttpParams, HttpClient } from @angular/common/http'; const headers = { headers: new HttpHeaders({}) } let params = new HttpParams({ }); get(url, {params}) // http client get with params get(url, {headers}); //http client get with headers I want something like requestoptions to hold both or a syntax to do httpClient get sending request headers and params. Currently building complete url with search params and sending headers along. Here is something that passes both headers and parameters in