首页 文章

如何将URL参数(查询字符串)传递给Angular上的HTTP请求?

提问于
浏览
197

大家好我在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查询字符串 .

9 回答

  • 40

    第5版

    使用Angular 5及更高版本,你 DON'T have to use HttpParams . 您可以直接发送您的json对象,如下所示 .

    let data = {limit: "2"};
    this.httpClient.get<any>(apiUrl, {params: data});
    

    请注意,数据值应为字符串,即; { params: {limit: "2"}}

    版本4.3.x

    @angular/common/http 使用 HttpParams, HttpClient

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

    可能会帮助一些!

  • 4

    HttpClient 方法允许您在其中设置 params 选项 .

    您可以通过从@ angular / common / http包导入 HttpClientModule 来配置它 .

    import {HttpClientModule} from '@angular/common/http';
    
    @NgModule({
      imports: [ BrowserModule, HttpClientModule ],
      declarations: [ App ],
      bootstrap: [ App ]
    })
    export class AppModule {}
    

    之后,您可以注入 HttpClient 并使用它来执行请求 .

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

    对于版本4之前的角度版本,您可以使用 Http 服务执行相同的操作 .

    Http.get 方法接受一个实现RequestOptionsArgs作为第二个参数的对象 .

    该对象的 search 字段可用于设置字符串或URLSearchParams对象 .

    一个例子:

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

    Http 类的文档有更多详细信息 . 它可以找到here和一个工作示例here .

  • 0

    编辑角度> = 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;
    

    原始答案(Angular 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())
    ...
    
  • 0

    我的例子

    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
    
  • 5

    如果您打算发送多个参数 .

    组件

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

    服务

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

    并继续你的http请求@ethemsulan如何做 .

    服务器端路由

    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
          });
        });
    });
    
  • 139

    Angular 6

    您可以使用params传入get调用所需的参数:

    this.httpClient.get<any>(url, { params: x });
    

    其中x = {property:“123”} .

    至于记录“123”的api函数:

    router.get('/example', (req, res) => {
        console.log(req.query.property);
    })
    
  • 265
    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);
    }
    

    如果您有installed jQuery,我会 npm i jquery --save 并包含在 apps.scriptsangular-cli.json

  • 8
    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);
    
  • 0

    您可以使用官方文档中的Url Parameters .

    示例: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })

相关问题