[Angular] Set Metadata in HTTP Headers with Angular HttpHeaders

Besides sending (or requesting) the actual data to the server API, there’s also often the need to send further metadata that helps the server to correctly interpret our request. Such data is most often sent using HTTP headers. In this lesson we learn how to leverage Angular’s HttpClient to set such headers. Note that when you have to continuously send certain application headers to the backend, for each single HTTP call that is being made, you may be better served by placing them in an HTTP interceptor.

import { Injectable } from ‘@angular/core‘;
import { Observable } from ‘rxjs/Observable‘;
import { HttpClient, HttpErrorResponse, HttpHeaders } from ‘@angular/common/http‘;

@Injectable()
export class PeopleService {

  constructor(private http: HttpClient) {}

  fetchPeople(): Observable<Object> {
    return this.http
      .get(‘data/people.json‘, {
        headers: new HttpHeaders().set(‘app-language‘, ‘en‘)
      });
  }

}

原文地址:https://www.cnblogs.com/Answer1215/p/8448884.html

时间: 2024-11-09 01:53:40

[Angular] Set Metadata in HTTP Headers with Angular HttpHeaders的相关文章

@野兽的Angular Api 学习、翻译及理解 - - angular.module

@野兽的 ng api 学习 -- angular.module angular.module 创建一个全局的可用于检索和注入的Angular模块.所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制. 格式:angular.module(name,[requires],[configFn]); name :  string  创建的模块名称. [requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组.

angular.module()创建、获取、注册angular中的模块

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只有一个参数(模块名),代表获取模块 // 如果模块不存在,angular框架会抛异常 var getModule = angular.module("myModule"); // true,都是同一个模块 alert(createModule == getModule); 该函数既可以创建

[Angular Directive] Combine HostBinding with Services in Angular 2 Directives

You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Ser

[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer

By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you

Angular.js 学习二---$scope和$rootScope,Angular模块的run方法,依赖注入中代码压缩

一.$scope和$rootScope的区别 一句话总结: $rootScope针对全局的作用域生效 $scope只针对当前的controller作用域生效 二.AngularJS模块的run方法 run方法初始化全局的数据,只对全局作用域起作用 如$rootScope <script type="text/javascript"> var m1 = angular.module('myApp', []); m1.run(['$rootScope', function ($

【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular JS抛出Warning: Tired to load angular more than once. 前端使用的就是Angular JS,同时前端脚本中我也使用了JQuery.以下是二者Script的最初调用顺序, 在public文件夹下的index.html中: 1 <body ng-view>

Angular学习笔记(工具篇)----Angular CLI

Angular CLI 的作用   首先安装npm 和node    详情:http://www.cnblogs.com/gorgeous/p/8074180.html 在安装    npm install -g @angular/cli 验证 创建Angular项目ng new my-app 进入Angular项目cd my-app 启动项目ng serve 优化项目创建方法(优化点:npm速度较慢) ng new my-app --skip-installcd my-appcnpm inst

[Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor

If you're coming from AngularJS (v1.x) you probably remember the ng-true-value and ng-false-value directive which allowed to map custom boolean values like "yes" or "no" or whatever other value you had, onto your HTML form. In this les

[Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s HttpRequest object has a property reportProgress which