Góc 4 nhận tiêu đề từ phản hồi API

Question

Tôi đang gửi yêu cầu đến API, nó trả về một mảng dữ liệu, nhưng tôi không biết cách trích xuất tiêu đề từ url đó, đây là những gì tôi đã thử dịch vụ của tôi

@Injectable() 
export class ResourcesService { 
private resourcesurl = "http://localhost:9111/v1/resources"; 

constructor(private http: Http) { } 

getResources() { 
    let headers = new Headers(); 
    headers.append("api_key", "123456"); 
    return this.http.get(this.resourcesurl, { headers: headers 
}).map(this.extractData).catch(this.handleError); 
} 
getresourceheaders(){ 
    let headers = new Headers(); 
    headers.append("api_key", "123456"); 
    let options = new RequestOptions(); 
    let testsss = options.headers 
    let headerapi = this.http.request(this.resourcesurl, options); 
    let test = this.http.get(this.resourcesurl, { headers: headers }); 
    console.log(headerapi); 
} 
private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || {}; 
} 
private handleError(error: Response | any) { 
let errMsg: string; 
if (error instanceof Response) { 
    const body = error.json() || ''; 
    const err = body.error || JSON.stringify(body); 
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
} else { 
    errMsg = error.message ? error.message : error.toString(); 
} 
console.error(errMsg); 
return Observable.throw(errMsg); 
} 
} 

tôi muốn để có được các tiêu đề từ phản ứng rằng trong trường hợp này là resourceurl

bất kỳ ý tưởng?

Answer 1

Các tiêu đề là một phần của Response class, vì vậy bạn sẽ có thể nhìn thấy chúng trong một handler như

http.get('/path/to/resource') 
    .subscribe((res:Response) => { 
    console.log(res.headers); 
    // you can assign the value to any variable here 
    }); 

Answer 2

Các kiểu trả về của phương pháp Http.get góc trả về một loại phản ứng. Đối tượng này có đối tượng tiêu đề chứa thông tin về các tiêu đề. Nó cũng có một thuộc tính url.

this.http.get(url).map(resp => console.log(resp)); 

Answer 3

Khi bạn làm .map(this.extractData) các let body = res.json() từ this.extractData chức năng sẽ đưa ra tất cả mọi thứ từ các phản ứng ngoại trừ body. Thay vào đó, nếu bạn làm theo, .map((res: Response) => res), điều đó sẽ trả về toàn bộ phản hồi và bạn có thể truy cập tất cả các thuộc tính và gán chúng cho các biến.

Đây là Plunker demo.

Answer 4

Một chút ví dụ kỳ lạ trong Angular 5 được hiển thị bên dưới. Sử dụng HttpClient để đăng lên máy chủ GraphQL, đọc phản hồi và sau đó trích xuất một giá trị tiêu đề phản hồi và một giá trị nội dung phản hồi. Tiêu đề là Tổng số lượt truy cập trong trường hợp này. ô tô là một trường (mảng ô tô) trong một trường khác dữ liệu trong cơ thể. Đồng thời hiển thị việc sử dụng rxjs nhà điều hành đầu tiên thay vì đăng ký.

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http'; 
import { first } from 'rxjs/operators/first'; 
import { Car, CarPage } from '../models/car'; 
.......... 
.......... 

public find(filter: string, sort: string, limit: number): Observable<CarPage> { 
    let headers = new HttpHeaders().set("Content-Type", "application/graphql"); 
    let carPage: CarPage = { cars: [], totalCount: 0 }; 
    return this.http.post<HttpResponse<any>>('/graphql', 
    `query cars { cars(filter: "${filter}", sort: "${sort}", limit: ${limit}) { 
      id 
      make 
      model 
      year 
     } 
     }`, 
     { headers: headers, observe: "response" } 
) 
    .first((_, index) => index === 0, (response: HttpResponse<any>) => { 
    let totalCountHeaderValues = response.headers.getAll("Total-Count"); 
    carPage.totalCount = (totalCountHeaderValues.length > 0) ? parseInt(totalCountHeaderValues[0]) : 0; 
    carPage.cars = response.body.data.cars; 
    return carPage; 
    }) 
} 

Answer 5

rõ ràng góc 5 câu trả lời

Theo mặc định, this.http.whatever ấy trở lại quan sát được sẽ trên dữ liệu trở lại, không phải là HttpResponse.

Nếu bạn có cao điểm tại: https://angular.io/api/common/http/HttpClient Bạn sẽ nhận thấy các tùy chọn có tham số "quan sát". Trong khi nó không phải tài liệu gì những tùy chọn, nếu bạn đặt nó như là "phản ứng", sau đó bạn sẽ thay nhận một thể hiện của HttpResponse<T> (https://angular.io/api/common/http/HttpResponse)

Vì vậy, đây là một yêu cầu ví dụ:

this.http.get(url, {observe: 'response}) 
    .subscribe(resp => console.log(resp.headers)) 

Lưu ý: Do tính bảo mật của trình duyệt, bạn sẽ không thể xem tiêu đề trừ khi API cung cấp Access-Control-Expose-Headers: với tiêu đề tùy chỉnh của bạn nếu ứng dụng api và góc của bạn không có cùng tên miền.