Angular에서 HTTP 요청에 url 인수 (쿼리 문자열)를 전달하는 방법


Answers

각도 = 4.3.x 수정

HttpClientHttpParams 와 함께 도입되었습니다. 다음은 사용 예입니다.

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(...);

(이전 답변)

각도 => 4.x 편집

requestOptions.search 는 더 이상 사용되지 않습니다. 대신 requestOptions.params 를 사용하십시오.

let requestOptions = new RequestOptions();
requestOptions.params = params;

원래 답변 (각도 2)

아래 URLSearchParams 를 가져와야합니다.

import { Http, RequestOptions, URLSearchParams } from '@angular/http';

그런 다음 매개 변수를 작성하고 http 요청을 다음과 같이 만듭니다.

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())
...
Question

안녕하세요 여러분 Angular에 대한 HTTP 요청을 만들고 있어요,하지만 URL 인수 (쿼리 문자열)를 추가하는 방법을 모르겠습니다.

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onGetForecastResult(response.json()),
  (error) => this.onGetForecastError(error.json()),
  () => this.onGetForecastComplete()
);

이제 내 StaticSettings.BASE_URL은 다음과 같은 쿼리 문자열이없는 URL과 같습니다. http://atsomeplace.com/ 하지만 http://atsomeplace.com/?var1=val1&var2=val2

어디 var1, 그리고 var2 내 HTTP 요청 개체에 맞는? 그것들을 객체처럼 추가하고 싶습니다.

{
  query: {
    var1: val1,
    var2: val2
  }
}

그런 다음 HTTP 모듈 만 URL 쿼리 문자열로 구문 분석하는 작업을 수행합니다.




//Angular 5.x

import {  RequestOptions, Http, RequestMethod } from '@angular/http';   

export class HttpGetClass{

  public restApiBaseUrl: string;    
  private http: Http;       

  constructor (http: Http){
    this.http=http;
    this.restApiBaseUrl=window.location.origin //get current url 
  }

  public getMethod(someId: any){
    return this.http.get(this.restApiBaseUrl+"?someId="+someId);
  }
}



내보기

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});

내 방법

  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');
  }

내 구성 요소에

  userList: User[] = [];
  this.userService.getUserByName(this.userName).subscribe(users => {
      this.userList = users;
    });

우편 배달부

http://localhost:8080/test/user/?name=Ethem



Links