Я искал способ, чтобы передать параметры запроса в API-вызовов с новой HttpClientModule'ы
с помощью HttpClient и еще предстоит найти решение. С модулем старой HTTP
, который вы бы написали что-то вроде этого.
в
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 })
}
Это приведет к вызову API к следующему URL-адресу:
локальным localhost:3001/по API/В1/данные/логи?logNamespace=somelogsnamespace
Однако, с помощью HttpClient новый ``получим()
метод не'Т есть поиск
собственность, так что я интересно, где пройти в параметры запроса?
Я нашла его через IntelliSense на получим()
функция. Итак, я'выложу его здесь для тех, кто ищет подобную информацию.
В любом случае, синтаксис почти идентичен, но немного отличаются. Вместо использования URLSearchParams()
параметры должны быть инициализированы как HttpParams () и свойство в получим()
функция теперь называется параметры
вместо поиск
.
в
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 })
}
Я предпочитаю этот синтаксис, как его немного больше параметр агностик. Я рефакторинг кода, чтобы сделать его немного более краткой.
в
getLogs(logNamespace): Observable<any> {
return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
params: new HttpParams().set('logNamespace', logNamespace)
})
}
Множественные Параметры
Лучший способ я нашел до сих пор является определение объекта параметры
с все параметры, которые я хочу определить определенных пределах. Как @эстус отметил в комментарии ниже, есть много ответов в этом Question](https://stackoverflow.com/questions/45459532/why-httpparams-doesnt-work-in-multiple-line-in-angular-4-3/45459672#45459672) о том, как назначить несколько параметров.
в
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 })
Несколько параметров с условной логики
Другое дело, я часто делаю с несколькими параметрами позволяют использовать несколько параметров, не требуя их присутствия в каждом вызове. Используя Лодашь, это'ы довольно простой условно добавить/удалить параметры из вызовов к API. Точные функции, используемые в Лодашь или подчеркивает, или ванили JS может варьироваться в зависимости от вашего приложения, но я обнаружил, что проверка для определения свойства работает довольно хорошо. Функция, приведенная ниже, будет только передать параметры, которые имеют соответствующие свойства, в параметры переменная передается в функцию.
в
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 })
Вы можете (в версии 5+) Используйте fromObject и fromString параметры конструктора при создании HttpParamaters, чтобы сделать вещи немного легче
const params = new HttpParams({
fromObject: {
param1: 'value1',
param2: 'value2',
}
});
// http://localhost:3000/test?param1=value1¶m2=value2
или:
const params = new HttpParams({
fromString: `param1=${var1}¶m2=${var2}`
});
//http://localhost:3000/test?paramvalue1=1¶m2=value2
Вы можете пройти его, как это
let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})
С Угловой 7, Я получил это работает, используя следующий без использования HttpParams.
import { HttpClient } from '@angular/common/http';
export class ApiClass {
constructor(private httpClient: HttpClient) {
// use it like this in other services / components etc.
this.getDataFromServer().
then(res => {
console.log('res: ', res);
});
}
getDataFromServer() {
const params = {
param1: value1,
param2: value2
}
const url = 'https://api.example.com/list'
// { params: params } is the same as { params }
// look for es6 object literal to read more
return this.httpClient.get(url, { params }).toPromise();
}
}
Если у вас есть объект, который может быть преобразован в {ключ: 'stringValue' пар}
, вы можете использовать эту ссылку, чтобы преобразовать его:
this._Http.get(myUrlString, {params: {...myParamsObject}});
Я просто люблю синтаксис выкладывать!
поиск свойство типа URLSearchParams в RequestOptions класс является устаревшим в угловой 4. Вместо этого, вы должны использовать параметры свойство типа URLSearchParams.
joshrathke прав.
В угловых.Ио документы написано, что URLSearchParams от @угловое/http является устаревшим. Вместо этого вы должны использовать HttpParams от @угловое/общие/протокол HTTP. Код очень похож и идентичен тому, что joshrathke написали. Для нескольких параметров, которые сохраняются, например, в объект как
{
firstParam: value1,
secondParam, value2
}
вы могли бы также делать
for(let property in objectStoresParams) {
if(objectStoresParams.hasOwnProperty(property) {
params = params.append(property, objectStoresParams[property]);
}
}
Если вам нужно унаследованных свойств, то снять соответственно метод hasOwnProperty.