如何将 url 参数（查询字符串）传递给 Angular 上的 HTTP 请求？
Posted
技术标签:
【中文标题】如何将 url 参数（查询字符串）传递给 Angular 上的 HTTP 请求？【英文标题】：How to pass url arguments (query string) to a HTTP request on Angular? 【发布时间】：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 查询字符串。
【问题讨论】：
***.com/questions/26541801/… 参考这个。在调用之前创建 URL 并将其传递给订阅函数来代替 BASE_URL。 2美分 【参考方案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, HttpClientimport 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 版中添加的更改。已在此处添加 ***.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) )
【讨论】：
以上是关于如何将 url 参数（查询字符串）传递给 Angular 上的 HTTP 请求？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Rest Assured 在 GET url 中传递查询字符串参数？
mod_rewrite：将路径和查询字符串 URL 作为参数传递