Jak przekazać argumenty url (ciąg zapytania) do żądania HTTP na Angular?
Cześć chłopaki tworzę żądanie HTTP na Angular, ale nie wiem jak dodać do niego argumenty url (ciąg zapytania).
this.http.get(StaticSettings.BASE_URL).subscribe(
(response) => this.onGetForecastResult(response.json()),
(error) => this.onGetForecastError(error.json()),
() => this.onGetForecastComplete()
);
Teraz moje StaticSettings.BASE_URL jest czymś w rodzaju adresu url bez ciągu zapytania, jak: http://atsomeplace.com / but I want it to be http://atsomeplace.com/?var1=val1&var2=val2
Gdzie var1 i var2 pasują do mojego obiektu Http request? Chcę dodać je jak obiekt.
{
query: {
var1: val1,
var2: val2
}
}
I wtedy tylko moduł Http wykonuje zadanie do parse it into URL query string.
9 answers
The HttpClient metody pozwalają ustawić params w jego opcjach.
Można go skonfigurować importując HttpClientModule z pakietu @ angular / common / http.
import {HttpClientModule} from '@angular/common/http';
@NgModule({
imports: [ BrowserModule, HttpClientModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Następnie możesz wstrzyknąć HttpClient i użyć go do wykonania żądania.
import {HttpClient} from '@angular/common/http'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
})
export class App {
name:string;
constructor(private httpClient: HttpClient) {
this.httpClient.get('/url', {
params: {
appid: 'id1234',
cnt: '5'
},
observe: 'response'
})
.toPromise()
.then(response => {
console.log(response);
})
.catch(console.log);
}
}
Przykład pracy znajdziesz tutaj .
Dla wersji kątowych przed wersją 4 można zrobić to samo za pomocą http serwis.
Http.metoda get pobiera obiekt, który implementuje RequestOptionsArgs jako drugi parametr.
Pole search tego obiektu może być użyte do Ustawienia ciągu znaków lub obiektu URLSearchParams.
Przykład:
// Parameters obj-
let params: URLSearchParams = new URLSearchParams();
params.set('appid', StaticSettings.API_KEY);
params.set('cnt', days.toString());
//Http request-
return this.http.get(StaticSettings.BASE_URL, {
search: params
}).subscribe(
(response) => this.onGetForecastResult(response.json()),
(error) => this.onGetForecastError(error.json()),
() => this.onGetForecastComplete()
);
Dokumentacja klasy Http zawiera więcej szczegółów. Można go znaleźć tutaj i przykład roboczy tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-18 20:59:05
Edit Angular > = 4.3.x
HttpClient {[11] } został wprowadzony wraz z HttpParams. Poniżej przykład użycia:
import { HttpParams, HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) { }
let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);
this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);
(stare odpowiedzi)
Edytuj Kąt > = 4.x
requestOptions.search
został zdeprecjonowany. Użyj requestOptions.params
zamiast:
let requestOptions = new RequestOptions();
requestOptions.params = params;
Oryginalna odpowiedź (2)
Musisz zaimportować URLSearchParams
Jak poniżej
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
A następnie zbuduj swoje parametry i wykonaj żądanie http w następujący sposób:
let params: URLSearchParams = new URLSearchParams();
params.set('var1', val1);
params.set('var2', val2);
let requestOptions = new RequestOptions();
requestOptions.search = params;
this.http.get(StaticSettings.BASE_URL, requestOptions)
.toPromise()
.then(response => response.json())
...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-08 08:11:19
Wersja 5 +
Z Angular 5 i wyżej, nie musisz używać HttpParams . Możesz bezpośrednio wysłać swój obiekt json, jak pokazano poniżej.
let data = {limit: "2"};
this.httpClient.get<any>(apiUrl, {params: data});
Należy pamiętać, że wartości danych powinny być string, czyli; { params: {limit: "2"}}
Wersja 4.3.x +
Użyj HttpParams, HttpClient from @ angular / common / http
import { HttpParams, HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) { ... }
...
let params = new HttpParams();
params = params.append("page", 1);
....
this.httpClient.get<any>(apiUrl, {params: params});
Może ktoś pomoże!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-08 08:35:36
Mój przykład
private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
Moja metoda
getUserByName(name: string): Observable<MyObject[]> {
//set request params
let params: URLSearchParams = new URLSearchParams();
params.set("name", name);
//params.set("surname", surname); for more params
this.options.search = params;
let url = "http://localhost:8080/test/user/";
console.log("url: ", url);
return this.http.get(url, this.options)
.map((resp: Response) => resp.json() as MyObject[])
.catch(this.handleError);
}
private handleError(err) {
console.log(err);
return Observable.throw(err || 'Server error');
}
In my component
userList: User[] = [];
this.userService.getUserByName(this.userName).subscribe(users => {
this.userList = users;
});
By listonosz
http://localhost:8080/test/user/?name=Ethem
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-27 07:37:39
Jeśli planujesz wysłać więcej niż jeden parametr.
Komponent
private options = {
sort: '-id',
select: null,
limit: 1000,
skip: 0,
from: null,
to: null
};
constructor(private service: Service) { }
ngOnInit() {
this.service.getAllItems(this.options)
.subscribe((item: Item[]) => {
this.item = item;
});
}
Serwis
private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
constructor(private http: Http) { }
getAllItems(query: any) {
let params: URLSearchParams = new URLSearchParams();
for(let key in query){
params.set(key.toString(), query[key]);
}
this.options.search = params;
this.header = this.headers();
I kontynuuj żądanie http, tak jak zrobił to @ethemsulan.
Trasa po stronie serwera
router.get('/api/items', (req, res) => {
let q = {};
let skip = req.query.skip;
let limit = req.query.limit;
let sort = req.query.sort;
q.from = req.query.from;
q.to = req.query.to;
Items.find(q)
.skip(skip)
.limit(limit)
.sort(sort)
.exec((err, items) => {
if(err) {
return res.status(500).json({
title: "An error occurred",
error: err
});
}
res.status(200).json({
message: "Success",
obj: items
});
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-24 18:13:41
Kątowa 6
Możesz podać parametry potrzebne do wywołania get używając params:
this.httpClient.get<any>(url, { params: x });
Gdzie x = {właściwość: "123"}.
Co do funkcji api, która loguje "123":
router.get('/example', (req, res) => {
console.log(req.query.property);
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-22 19:18:26
import ...
declare var $:any;
...
getSomeEndPoint(params:any): Observable<any[]> {
var qStr = $.param(params); //<---YOUR GUY
return this._http.get(this._adUrl+"?"+qStr)
.map((response: Response) => <any[]> response.json())
.catch(this.handleError);
}
Pod warunkiem, że masz zainstalowany jQuery , robię npm i jquery --save
i dołączam w apps.scripts
w angular-cli.json
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 13:09:38
import { Http, Response } from '@angular/http';
constructor(private _http: Http, private router: Router) {
}
return this._http.get('http://url/login/' + email + '/' + password)
.map((res: Response) => {
return res.json();
}).catch(this._handleError);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-07 13:50:43
Możesz użyć parametrów Url z oficjalnej dokumentacji.
Przykład: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-08 18:07:59