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

问题描述

我正在Angular上创建一个HTTP请求，但我不知道如何向其中添加url参数(查询字符串).

I'm creating a HTTP request on Angular, but I do not know how to add url arguments (query string) to it.

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

Now my StaticSettings.BASE_URL is something like a url with no query string like: http://atsomeplace.com/ but I want it to be http://atsomeplace.com/?var1=val1&var2=val2

在我的Http请求对象上适合var1和var2的地方?我想像一个对象一样添加它们.

Where var1, and var2 fit on my Http request object? I want to add them like an object.

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

然后只有Http模块完成将其解析为URL查询字符串的工作.

and then just the Http module do the job to parse it into URL query string.

推荐答案

HttpClient 方法可让您在其选项中设置 params .

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

You can configure it by importing the HttpClientModule from the @angular/common/http package.

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

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

After that you can inject the HttpClient and use it to do the request.

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 服务进行相同操作.

For angular versions prior to version 4 you can do the same using the Http service.

Http.get 方法采用一个对象，该对象实现了 RequestOptionsArgs 作为第二个参数.

The Http.get method takes an object that implements RequestOptionsArgs as a second parameter.

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

The search field of that object can be used to set a string or a URLSearchParams object.

一个例子:

 // 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 类的文档具有更多详细信息.可以在此处找到，并找到一个有效的示例此处.

The documentation for the Http class has more details. It can be found here and an working example here.

这篇关于如何将url参数(查询字符串)传递给Angular上的HTTP请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！