HTTP Angular 2？

Question

有谁知道如何使用 Angular 2 添加或创建自定义 HTTP header？如何注入 http 依赖以及如何使用我们在 jquery

中使用的 header

$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Answer 1

let headers = new Headers();
headers.append('x-my-custom-header', 'some value');

http.get('foo/bar', { headers: headers });

当然，您可以将 headers 与其余的 http 方法一起使用。

Answer 2

使用 Angular2 的 HTTP 支持有几个步骤：

在SystemJS配置中指定HTTP模块：

System.config({
  (...)
  map: {
    app: "./src",
   '@angular': 'https://npmcdn.com/@angular',
   'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
 },
 packages: {
   app: {
     main: './main.ts',
     defaultExtension: 'js'
   },
   '@angular/core': {
     main: 'core.umd.js',
     defaultExtension: 'js'
   },
   (...)
   '@angular/http': {
     main: 'http.umd.js',
     defaultExtension: 'js'
   },
   rxjs: {
     defaultExtension: 'js'
   }
  }
});

在引导您的应用程序时设置 HTTP_PROVIDERS 提供程序：
```
bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
```

在要执行 HTTP 请求的地方注入 Http class 的实例：

import {Http} from '@angular/http';

@Component({
  (...)
})
// It can also be @Injectable() in the case of a service
export class SomeComponent {
  constructor(private http:Http) {
  }
}

使用Http实例执行请求：

import {Http, Headers} from '@angular/http';

@Component({
  (...)
})
// It can also be @Injectable() in the case of a service
export class SomeComponent {
  (...)

  executeRequest() {
    let headers = new Headers();
    headers.append('x-my-custom-header', 'some value');

    this.http.get('foo/bar', { headers });
  }

订阅请求响应以获取响应

  executeRequest() {
    let headers = new Headers();
    headers.append('x-my-custom-header', 'some value');

    this.http.get('foo/bar', { headers }).map(res => res.json())
       .subscribe((data) => {
         this.data = data;
       });
  }

不要忘记这一步，因为可观察对象是惰性的。所以如果不订阅它们，请求将不会被执行

Answer 3

我建议您将 Http 服务包装在您自己的定义 REST 端点的服务中，如下所示：

    import { Injectable, } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { Headers, Http, Response, RequestOptionsArgs } from '@angular/http';


@Injectable()
export class RestService {
    constructor(private http: Http) {}
    get<T>(url: string): Observable<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.get(url, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
    post<T>(url: string, data: any): Observable<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.post(url, data, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
    put<T>(url: string, data: any): Observable<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.put(url, data, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
    patch<T>(url: string, data: any): Observable<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.patch(url, data, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
    delete<T>(url: string): Observable<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.delete(url, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData<T>(response: Response) {
        var resp: T;
        try {
            resp = response.json() as T;
        } catch (error) {
        }
        return resp;
    }

    private prepareRequestHeaders() {
        var headers = new Headers();
        headers.append('x-my-custom-header', 'some value');
        headers.append('Content-Type', 'application/json');
       // etc
        return headers;
    }


    private handleResponse<T>(response: any): T[] {
        var resp: T[];
        try {
            resp = response.json().data as T[];
        } catch (error) {
        }
        return resp;
    }
    private handleError(error: any): Promise<any> {
        return Promise.reject(error.message || error);
    }
}

或者如果你更喜欢承诺：

import { Injectable, } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Headers, Http, Response, RequestOptionsArgs } from '@angular/http';


@Injectable()
export class RestService {
    constructor(private http: Http) {}
    get<T>(url: string): Promise<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.get(url, options)
            .map(this.extractData)
            .catch(this.handleError).toPromise();
    }
    post<T>(url: string, data: any):Promise<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.post(url, data, options)
            .map(this.extractData)
            .catch(this.handleError).toPromise();
    }
    put<T>(url: string, data: any):Promise<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.put(url, data, options)
            .map(this.extractData)
            .catch(this.handleError).toPromise();
    }
    patch<T>(url: string, data: any):Promise<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.patch(url, data, options)
            .map(this.extractData)
            .catch(this.handleError).toPromise();
    }
    delete<T>(url: string):Promise<T> {
        var options = {} as RequestOptionsArgs;
        options.headers = this.prepareRequestHeaders();
        return this.http.delete(url, options)
            .map(this.extractData)
            .catch(this.handleError).toPromise();
    }

    private extractData<T>(response: Response) {
        var resp: T;
        try {
            resp = response.json() as T;
        } catch (error) {
        }
        return resp;
    }

    private prepareRequestHeaders() {
        var headers = new Headers();
        headers.append('x-my-custom-header', 'some value');
        headers.append('Content-Type', 'application/json');
       // etc
        return headers;
    }


    private handleResponse<T>(response: any): T[] {
        var resp: T[];
        try {
            resp = response.json().data as T[];
        } catch (error) {
        }
        return resp;
    }
    private handleError(error: any): Promise<any> {
        return Promise.reject(error.message || error);
    }
}

HTTP Angular 2？

HTTP Angular 2?

http-headers

typescript

angular