Http get 在 angular2 returns 中使用 HttpParams 出现 404 错误

Question

这可能很简单，我只是错过了一些东西。我有一个 GET 端点，我正在尝试从 Angular UI 调用它。我想将时间戳作为参数发送到端点。我做了基本的方法：

    return this.http.get(this.Uri + academyId + "?dateWhenToCalculate=" + (dateWhenToCompute.getTime() / 1000).toString()).pipe(   
        map((res: Response) => res.json() as Model),
        catchError(this.handleError));

使用这个我得到这个 URL：http://host/api/route/1?dateWhenToCalculate=1572991200。我的端点是这样的：

    [HttpGet]
    [GenericAuthorizeFilter]
    [Route("route/{academyId}")]
    public IHttpActionResult ComputePlayerScores(int academyId, string dateWhenToCalculate){....}

使用这种创建 url 的方式一切正常。但是当我尝试使用 HttpParams 时，我不断收到一个奇怪的 URL，当然还有一个 404 错误。

    let httpParams = new HttpParams()
        .set('dateWhenToCalculate', (dateWhenToCompute.getTime() / 1000).toString());

    return this.http.get(this.Uri+ academyId, { params: httpParams}).pipe(
        map((res: Response) => res.json() as Model),
        catchError(this.handleError));

使用 HttpParams 我得到了这个

URL:http://host/api/route/1?updates=%7B%22param%22:%22dateWhenToCalculate%22,%22value%22:%221573423200%22,%22op%22:%22s%22%7D&cloneFrom=%7B%22updates%22:null,%22cloneFrom%22:null,%22encoder%22:%7B%7D,%22map%22:null%7D&encoder=%7B%7D&map=null

我是不是漏掉了什么？

Answer 1

您的端点是 route/{academyId}，但您正在调用 http:/host/api/route/endpoint/1，它在 route 和您的 ID 之间具有 endpoint 标记。请在您的 http 请求中删除此 endpoint 令牌。

您在 http uri 之后只有 /。请加倍。

Answer 2

这是 HttpParams 需要使用的最少代码量。我在这里使用测试 api 但用 url

更改那部分

在 app.module.ts 文件的 AppModule 中

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

@NgModule({
  imports: [ HttpClientModule ],
  ......
})
export class AppModule { }

首先需要在组件或服务上进行以下导入：

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

然后使用 HttpParams 像下面的代码：

const options =  { params: new HttpParams().set('postId', '1') };
this.http.get('https://jsonplaceholder.typicode.com/comments' , options)
    .subscribe((data)=> {console.log(data)});

你也可以尝试用下面的方式代替 new HttpParams().set('postId', '1')

const options =  { params: new HttpParams({fromString: 'postId=1'}) };

工作示例是 here

以下部分未经本人测试。我是从这个link中找到的。这是查询参数未按预期编码的一种解决方案。

创建一个实现 HttpParameterCodec 的 class。或者，你也可以扩展 HttpUrlEncodingCodec.
encodeKey 和 encodeValue 函数需要对值进行编码。原版 JavaScript 允许您使用 encodeURIComponent.
创建新 HttpParams: new HttpParams({ encoder: new CustomHttpParamEncoder() }) 时使用自定义编码器 class。重要的部分是 encodeURIComponent 的用法，这是一个香草 JavaScript 编码字符串的函数。

自定义解码器可能如下所示：

import { HttpParameterCodec } from '@angular/common/http';
export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }
  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }
  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

希望对您有所帮助！

Http get 在 angular2 returns 中使用 HttpParams 出现 404 错误

Http get using HttpParams in angular2 returns a 404 error

angular

angular-httpclient