HTTP Angular 2？

2

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

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

当然你也可以使用头用的HTTP方法的其余部分中使用。

来源

2016-06-13 10:41:25

0

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

指定在SystemJS配置HTTP模块：

System.config({ 
    (...) 
    map: { 
    app: "./src", 
    '@angular': 'https://npmcdn.com/@angular', 
    'rxjs': 'https://npmcdn.com/[email protected]' 
}, 
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 ]); 
```

注射a n个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; 
     }); 
    }

不要忘记这一步，因为观察者是懒惰的。因此，没有订阅他们，请求将不会被执行

来源

2016-06-13 10:52:32

0

我会建议你换在自己服务的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); 
    } 
}

来源

2017-05-23 05:47:49

回答

相关问题