HTTP Angular 2？

Question

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

$.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 });

当然，您可以在其他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类的实例中注入一个实例：

   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);
    }
}