Angular 4 HttpClient Query Parameters

Question

Tôi đã tìm cách chuyển các tham số truy vấn vào một cuộc gọi API với số HttpClient mới của HttpClientModule và chưa tìm ra giải pháp. Với mô-đun Http cũ, bạn sẽ viết một cái gì đó như thế này.

getNamespaceLogs(logNamespace) { 

    // Setup log namespace query parameter 
    let params = new URLSearchParams(); 
    params.set('logNamespace', logNamespace); 

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params }) 
} 

Điều này sẽ dẫn đến một cuộc gọi API vào URL sau:

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

Tuy nhiên, mới HttpClientget() phương pháp không có một tài sản search, vì vậy tôi tự hỏi nơi để vượt qua trong các tham số truy vấn?

Answer 1

Tôi đã tìm thấy nó thông qua phần intelliSense trên hàm get(). Gotta yêu intellisense. Vì vậy, tôi sẽ đăng nó ở đây cho bất cứ ai đang tìm kiếm thông tin tương tự.

Dù sao cú pháp gần như giống hệt nhau, nhưng hơi khác nhau. Thay vì sử dụng URLSearchParams(), các tham số cần được khởi tạo là HttpParams() và thuộc tính trong hàm get() giờ đây được gọi là params thay vì search.

import { HttpClient, HttpParams } from '@angular/common/http'; 

getLogs(logNamespace): Observable<any> { 

    // Setup log namespace query parameter 
    let params = new HttpParams().set('logNamespace', logNamespace); 

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params }) 
} 

Tôi thực sự thích cú pháp này là nó một chút thông số hơn bất khả tri. Tôi cũng tái cấu trúc mã để làm cho nó viết tắt hơn một chút.

getLogs(logNamespace): Observable<any> { 

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { 
     params: new HttpParams().set('logNamespace', logNamespace) 
    }) 
} 

Nhiều thông số

tôi nhận ra bao nhiêu tôi thường cần phải vượt qua nhiều tham số vào một truy vấn vì vậy tôi figured tôi sẽ thêm một phần về cách để làm điều đó là tốt. Cách tốt nhất mà tôi đã tìm thấy cho đến nay là xác định một đối tượng Params với tất cả các tham số mà tôi muốn xác định được xác định bên trong. Như Estus chỉ ra trong bình luận dưới đây, có rất nhiều câu trả lời tuyệt vời trong This Question như thế nào để gán nhiều thông số.

getLogs(parameters) { 

    // Initialize Params Object 
    let Params = new HttpParams(); 

    // Begin assigning parameters 
    Params = Params.append('firstParameter', parameters.valueOne); 
    Params = Params.append('secondParameter', parameters.valueTwo); 

    // Make the API call using the new parameters. 
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: Params }) 

Nhiều thông số với logic Conditional

Một điều tôi thường làm với nhiều tham số là cho phép sử dụng nhiều thông số mà không cần sự hiện diện của họ trong mỗi cuộc gọi. Sử dụng Lodash, nó khá đơn giản để điều kiện thêm/xóa các tham số từ các cuộc gọi đến API. Các hàm chính xác được sử dụng trong Lodash hoặc Underscores, hoặc vanilla JS có thể khác nhau tùy thuộc vào ứng dụng của bạn, nhưng tôi thấy rằng việc kiểm tra định nghĩa thuộc tính hoạt động khá tốt. Hàm bên dưới sẽ chỉ truyền các tham số có thuộc tính tương ứng trong biến tham số được truyền vào hàm.

getLogs(parameters) { 

    // Initialize Params Object 
    let Params = new HttpParams(); 

    // Begin assigning parameters 
    if (!_.isUndefined(parameters)) { 
     Params = _.isUndefined(parameters.valueOne) ? Params : Params.append('firstParameter', parameters.valueOne); 
     Params = _.isUndefined(parameters.valueTwo) ? Params : Params.append('secondParameter', parameters.valueTwo); 
    } 

    // Make the API call using the new parameters. 
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: Params }) 

Answer 2

joshrathke là đúng.

Trong angular.io docs được viết rằng URLSearchParams từ @ angular/http không được dùng nữa. Thay vào đó, bạn nên sử dụng HttpParams từ @ góc/common/http. Mã này khá giống và giống với những gì joshrathke đã viết. Đối với nhiều tham số được lưu ví dụ trong một đối tượng như

{ 
    firstParam: value1, 
    secondParam, value2 
} 

bạn cũng có thể làm

for(let property in objectStoresParams) { 
    if(objectStoresParams.hasOwnProperty(property) { 
    params = params.append(property, objectStoresParams[property]); 
    } 
} 

Nếu bạn cần tài sản thừa kế sau đó loại bỏ các hasOwnProperty cho phù hợp.

Answer 3

Bạn có thể (trong phiên bản 5 +) sử dụng fromObject và fromString thông số constructor khi tạo HttpParamaters để làm cho mọi việc dễ dàng hơn một chút

const params = new HttpParams({ 
     fromObject: { 
     param1: 'value1', 
     param2: 'value2', 
     } 
    }); 

    // http://localhost:3000/test?param1=value1&param2=value2 

hay:

const params = new HttpParams({ 
     fromString: `param1=${var1}&param2=${var2}` 
    }); 

    //http://localhost:3000/test?paramvalue1=1&param2=value2 

Answer 4

tìm kiếm thuộc tính của loại URLSearchParams trong Yêu cầuOptions lớp không được chấp nhận trong góc 4. Thay vào đó, bạn nên sử dụng params thuộc tính loại URLSearchParams.