{"id":29346,"date":"2018-10-24T00:00:00","date_gmt":"2018-10-23T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/il-nuovo-httpclient-in-angular\/"},"modified":"2021-05-20T19:31:36","modified_gmt":"2021-05-20T17:31:36","slug":"the-new-httpclient-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/","title":{"rendered":"The new HttpClient in Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Starting from the 5th version of Angular, the @angular\/http module was deprecated for the new @angular\/common\/http module. Now we have a new object to call our backend, which basically introduces a generic type on the result to omit the classical .map(res:Response => res.json())<\/em>.<\/p>\n\n\n\n

The module import changes as follow:<\/p>\n\n\n

\nimport { BrowserModule } from '@angular\/platform-browser'; \nimport { NgModule } from '@angular\/core'; \nimport { HttpClientModule } from '@angular\/common\/http'; \nimport { AppComponent } from '.\/app.component'; \n\u00a0\n@NgModule({ \n\u00a0\u00a0\u00a0\u00a0declarations: [ AppComponent ], \n\u00a0\u00a0\u00a0\u00a0imports: [ BrowserModule, HttpClientModule ], \n\u00a0\u00a0\u00a0\u00a0providers: [], \n\u00a0\u00a0\u00a0\u00a0bootstrap: [AppComponent] \n}) \nexport class AppModule { }\n<\/pre><\/div>\n\n\n
A backend integration service can be rewrite as follows:<\/p>\n\n\n
\nimport { Injectable } from '@angular\/core'; \nimport { HttpClient } from '@angular\/common\/http'; \nimport { Event } from '..\/events\/events.model'; \n\u00a0\n@Injectable() \nexport class BackendService { \n\u00a0\n\u00a0\u00a0\u00a0\u00a0constructor(private httpClient: HttpClient) {}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0getData() { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.httpClient.get< Event[] >('http:\/\/localhost:3000\/api\/');\n\u00a0\u00a0\u00a0\u00a0} \n}\n<\/pre><\/div>\n\n\n
The syntax is very concise and more expressive, great! But the most interesting feature is the possibility to introduce your code in the pipeline of the request: now you can do something previously and after the effective HTTP call with one or more interceptors. You can then create your pipeline of HTTP Request and the possibilities are endless. To make some examples:<\/p>\n\n\n\n
  • Add something to the header request previous the HTTP invocation, for example, the authentication token or whatever you want;<\/li>
  • Transform the response as you prefer after the HTTP invocation;<\/li>
  • Logging the HTTP activities;<\/li>
  • Centralize the HTTP error management;<\/li>
  • Redirect to login if receive a 401 error, or try again the operation.<\/li><\/ul>\n\n\n\n
    The limit is your fantasy or, maybe, your requirements.<\/p>\n\n\n\n
    Thanks to Typescript is very simple to create an Interceptor:<\/p>\n\n\n\n
    • Create a class that implements the interface Interceptor;<\/li>
    • Implement the intercept method to do what you want;<\/li>
    • Register the class in the module providers section.<\/li><\/ul>\n\n\n\n
      If you use Visual Studio Code and you have installed the John Papa snippets, you can use a snippet to create an interceptor:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n
      \nimport { Injectable } from '@angular\/core';\nimport { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular\/common\/http';\nimport { Observable } from 'rxjs\/Observable';\n\u00a0\n@Injectable()\nexport class MyFirstInterceptor implements HttpInterceptor {\n\u00a0\n\u00a0\u00a0intercept(req: HttpRequest, next: HttpHandler): Observable> {\n\u00a0\u00a0\u00a0\u00a0return next.handle(req);\n\u00a0\u00a0}\n\u00a0\n}\n<\/pre><\/div>\n\n\n
      You can add all the interceptors that you need, they will be evaluated in the registration order:<\/p>\n\n\n
      \nimport { BrowserModule } from '@angular\/platform-browser'; \nimport { NgModule } from '@angular\/core'; \nimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular\/common\/http'; \nimport { AppComponent } from '.\/app.component';\n\u200bimport { MyFirstInterceptor } from '.\/shared\/myfirstinterceptor'; \n\u200bimport { MySecondInterceptor } from '.\/shared\/mysecondinterceptor';\n<\/pre><\/div>\n\n
      \n@NgModule({ \n\u00a0\u00a0\u00a0\u00a0declarations: [ AppComponent ], \n\u00a0\u00a0\u00a0\u00a0imports: [ BrowserModule, HttpClientModule ], \n\u00a0\u00a0\u00a0\u00a0providers: [\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0provide: HTTP_INTERCEPTORS,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0useClass: MyFirstInterceptor,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0multi: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0provide: HTTP_INTERCEPTORS,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0useClass: MySecondInterceptor,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0multi: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}], \n\u00a0\u00a0\u00a0\u00a0bootstrap: [AppComponent] \n}) \nexport class AppModule { }\n<\/pre><\/div>\n\n\n
      In the Raptor Framework, we use interceptor for more activities, one of this is the authorization error management: if I receive a 401 HTTP error code I will redirect the user to login:<\/p>\n\n\n
      \nimport { Injectable } from '@angular\/core'; \nimport { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular\/common\/http'; \nimport { Observable } from 'rxjs\/Observable'; \nimport { Router, ActivatedRoute } from '@angular\/router'; \nimport 'rxjs\/add\/operator\/do'; \n\u00a0\n@Injectable()\nexport class RaptorInterceptor implements HttpInterceptor { \n\u00a0\u00a0\u00a0\u00a0constructor( private router: Router) { }\n\u00a0\n\u00a0\u00a0\u00a0\u00a0intercept(req: HttpRequest, next: HttpHandler): Observable> { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return next.handle(req)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.do((event: HttpEvent) => { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event instanceof HttpResponse) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ TODO: logging \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, (err: any) => { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (err instanceof HttpErrorResponse) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (err.status === 401) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.router.navigate(['login']); \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \n\u00a0\u00a0\u00a0\u00a0\u00a0} \n} \n<\/pre><\/div>\n\n\n
      I will show you this case at my session about Raptor Framework, on November 29th at WPC 2017, don\u2019t miss out!<\/p>\n\n\n\n
      See you soon<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
      More simple HTTP Call and Interceptors to centralize all<\/p>\n","protected":false},"author":196716248,"featured_media":29337,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637524],"tags":[688637390,688637443,688637448],"class_list":["post-29346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en","tag-raptor-en","tag-vscode-en"],"yoast_head":"\nThe new HttpClient in Angular - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The new HttpClient in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"More simple HTTP Call and Interceptors to centralize all\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-23T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-20T17:31:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"422\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michele Aponte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"The new HttpClient in Angular\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-05-20T17:31:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/\"},\"wordCount\":323,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1\",\"keywords\":[\"Angular\",\"Raptor\",\"VScode\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/\",\"name\":\"The new HttpClient in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-05-20T17:31:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1\",\"width\":750,\"height\":422},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/the-new-httpclient-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The new HttpClient in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"caption\":\"Michele Aponte\"},\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The new HttpClient in Angular - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"The new HttpClient in Angular - Blexin","og_description":"More simple HTTP Call and Interceptors to centralize all","og_url":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/","og_site_name":"Blexin","article_published_time":"2018-10-23T22:00:00+00:00","article_modified_time":"2021-05-20T17:31:36+00:00","og_image":[{"width":750,"height":422,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","type":"image\/jpeg"}],"author":"Michele Aponte","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Michele Aponte","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"The new HttpClient in Angular","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-05-20T17:31:36+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/"},"wordCount":323,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","keywords":["Angular","Raptor","VScode"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/","url":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/","name":"The new HttpClient in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-05-20T17:31:36+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","width":750,"height":422},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/en\/blog-en\/the-new-httpclient-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"The new HttpClient in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","caption":"Michele Aponte"},"url":"https:\/\/blexin.com\/en\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/2ae1f179-6193-4355-a731-74d5495dae07.jpg?fit=750%2C422&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7Dk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=29346"}],"version-history":[{"count":2,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29346\/revisions"}],"predecessor-version":[{"id":32021,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29346\/revisions\/32021"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/29337"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=29346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=29346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=29346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}