如何将 url 参数（查询字符串）传递给 Angular 上的 HTTP 请求？答案

【问题标题】：How to pass url arguments (query string) to a HTTP request on Angular?如何将 url 参数（查询字符串）传递给 Angular 上的 HTTP 请求？
【发布时间】：2016-04-01 05:46:15
【问题描述】：

我想触发来自 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 查询字符串。

【问题讨论】：

stackoverflow.com/questions/26541801/… 参考这个。在调用之前创建 URL 并将其传递给订阅函数来代替 BASE_URL。 2美分

标签： http angular typescript

【解决方案1】：

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 之前的 Angular 版本，您可以使用 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 中找到。

【讨论】：

要点：gist.github.com/MiguelLattuada/bb502d84854ad9fc26e0 如何使用 URLSearchParams 对象，再次感谢@toskv
使用 URLSearchParams 超级流畅！解决了我序列化 JSON 对象的问题。
@SukumarMS 真的不需要任何特别的东西，因为它是路径的一部分。只需连接字符串 'blabla.com/page/' + page +'/activeFilter' + activeFilter。或者，如果您想使用模板文字 `blabla.com/page/${page}/${activeFilter}`。
这对我有用：http.get(url, {params: {var1: val1, var2: val2}})
search 属性已从 4.0.0 弃用 -> 改用 params

【解决方案2】：

编辑角度 >= 4.3.x

HttpClient 与HttpParams 一起被引入。下面是一个使用示例：

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

（旧答案）

编辑 Angular >= 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())
...

【讨论】：

不适合我。深入源码，发现http.get的第二个参数需要一个RequestOptionsArgs接口，URLSearchParams没有实现。将 searchParams 包装在 RequestOptions 对象中是可行的。不过如果有捷径就好了。
你说得对，我忘了RequestOptions。我更新了我的答案。
感谢您指出已弃用 search。修复了我的问题
感谢您指出此更改！几个小时以来我发现的所有文档和问题都在告诉我将参数附加到 search 属性。

【解决方案3】：

版本 5+

使用 Angular 5 及更高版本，您不必使用 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});

另外，尝试使用JSON.stringify() 对嵌套对象进行字符串化。

【讨论】：

【解决方案4】：

Angular 6

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

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

其中 x = { 属性：“123”}。

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

router.get('/example', (req, res) => {
    console.log(req.query.property);
})

【讨论】：

这是第 5 版中添加的更改。已在此处添加 stackoverflow.com/a/45455904/3276721

【解决方案5】：

我的例子

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

【讨论】：

【解决方案6】：

在最新的 Angular 7/8 中，您可以使用最简单的方法：-

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

getDetails(searchParams) {
    const httpOptions = {
        headers: { 'Content-Type': 'application/json' },
        params: { ...searchParams}
    };
    return this.http.get(this.Url, httpOptions);
}

【讨论】：

如果任何searchParams' 属性不是string 值，这将不起作用。

【解决方案7】：

如果您计划发送多个参数。

组件

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

【讨论】：

在您服务的获取请求中，我错过了您处理获取请求的方式。
哦，我猜你会把 http get 请求放在那个方法中作为返回，就像 ethumsulan 的回答一样

【解决方案8】：

您可以使用 @angular/common/http 中的 HttpParams 并在查询中传递一个字符串。例如：

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

现在在您的代码中

this.http.get(urlFull, options);

这对你有用:)

希望能帮到你

【讨论】：

【解决方案9】：

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.scripts 中angular-cli.json

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

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

【讨论】：