Angular,Http GET参数?

时间:2017-05-31 09:04:17

标签: angular typescript

我不知道如何对这样的方法进行API调用:

[HttpGet]
[ActionName("GetSupport")]
public HttpResponseMessage GetSupport(int projectid)

因为它是GET但仍然有一个参数要通过,怎么办呢? 它会是这样的吗?

let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('projectid', this.id);

      this.http.get('http://localhost:63203/api/CallCenter/GetSupport', { headers: headers })

5 个答案:

答案 0 :(得分:61)

有这样的事情:

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('projectid', this.id);
let params = new URLSearchParams();
params.append("someParamKey", this.someParamValue)

this.http.get('http://localhost:63203/api/CallCenter/GetSupport', { headers: headers, search: params })

当然,将所需的每个参数追加到params。它比使用URL字符串将params传递给请求提供了更多的灵活性。

编辑(28.09.2017):在评论中说明Al-Mothafar,从{4}开始,search已弃用,因此您应该使用params < / p>

编辑(02.11.2017):如果您使用新的HttpClient,现在有HttpParams,其外观和使用方式如下:

let params = new HttpParams().set("paramName",paramValue).set("paramName2", paramValue2); //Create new HttpParams

然后将params添加到请求中,基本上以相同的方式:

this.http.get(url, {headers: headers, params: params}); 
//No need to use .map(res => res.json()) anymore

HttpParamsHttpClient

的文档中的更多内容

答案 1 :(得分:5)

对于Angular 9+,您可以直接添加标头和参数,而无需键值概念:

const headers = new HttpHeaders().append('header', 'value');
const params = new HttpParams().append('param', 'value');
this.http.get('url', {headers, params}); 

答案 2 :(得分:3)

以上解决方案对我没有帮助,但是我可以通过以下方式解决相同的问题

private setHeaders(params) {      
        const accessToken = this.localStorageService.get('token');
        const reqData = {
            headers: {
                Authorization: `Bearer ${accessToken}`
            },
        };
        if(params) {
            let reqParams = {};        
            Object.keys(params).map(k =>{
                reqParams[k] = params[k];
            });
            reqData['params'] = reqParams;
        }
        return reqData;
    }

并发送请求

this.http.get(this.getUrl(url), this.setHeaders(params))

它可与NestJS后端一起使用,与其他我不知道的后端一起使用。

答案 3 :(得分:1)

我假设您正在使用某些angular2服务。您可以使用下面的参数调用HTTP

Asana client

答案 4 :(得分:1)

解决此问题的简便方法

getGetSuppor(filter): Observale<any[]> {
   return this.https.get<any[]>('/api/callCenter/getSupport' + '?' + this.toQueryString(filter));
}

private toQueryString(query): string {
   var parts = [];
   for (var property in query) {
     var value = query[propery];
     if (value != null && value != undefined)
        parts.push(encodeURIComponent(propery) + '=' + encodeURIComponent(value))
   }
   
   return parts.join('&');
}