标签: angular-httpclient

我已将Angular 4服务从旧的Http迁移到新的HttpClient.返回纯零0作为响应的请求正在返回一个observable null.

请求:

return this.httpClient.get(url, options)
  .do(res => console.log('service returns', res)) as Observable<number>;

将控制台日志null,但当我在devtools>网络中打开该请求时,我看到服务器响应0.

我究竟做错了什么？

在引入angular的新HttpClient之前,可以使用instanceof关键字验证从http api调用返回的对象.他们不再能够使用HttpClient模块了.我正在尝试一些简单的方法,但类型检查每次都返回false.期望的行为:

```

getCow() {
    return this.http.get<Cow>(ApiRoute.GET_COW, options)
        .map(res => res as Cow)
        .toPromise()
        .then((c: Cow) => {
            console.log(c instanceof Cow); //this is false
        })
}

```

会回归真实.有谁知道在http客户端幕后新建一个实例的简单方法？

我有一个preject包含一个服务(获取数据)和一个组件(显示它).

我想在app.component.ts上将代码保持在最低限度.

在我的服务中:

getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts', httpOptions).subscribe(
      result => {
        return result;
        this.theData = result;
      },
      error => {
        return error;
      }
    );
  }

在我的app.component.ts中:

 getPostsFromService() {
    this.myService.getPosts();
  }

但是,当然,我需要得到结果并将其传递给我的组件,但这样的事情是行不通的:

myData;

  ...


  getPostsFromService() {
    this.myData = this.myService.getPosts();
  }

所以,我的问题是,我该怎么做或者是否真的建议在我的组件上调用subscribe而不是在服务中？

我创建了一个拦截器，该拦截器将令牌附加到仅在功能延迟加载的模块中进行api调用所需的授权标头中。

但是，我不认为拦截器被称为是因为在reports模块中没有显示console.logs。

我读过其他问题，认为这可能与HTTPClientModule有关。此HttpClientModule仅在我的主app.module中进行过一次初始化。

我如何使拦截器仅适用于延迟加载的功能模块。

验证拦截器

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/do';

import { AuthService } from './../services/auth/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService) {
        console.log('start interceptor');
     }

    intercept(req: HttpRequest<any>, next: HttpHandler) {

        console.log('intercepting');

        const authToken = this.auth.getProfileToken();

        console.log(authToken);

        const authReq = req.clone({
            headers: req.headers.set('Authorization', authToken)
        });

        return next.handle(authReq);

    }

}

report.module.ts

import { NgModule } from '@angular/core';
import …

我有一个非常简单的服务电话和茉莉花测试.

服务电话:

myServiceCall(testId: number) : void {
    const url = `${this.url}/paramX/${testId}`;
    this.http.put(url, {},{headers: this.headers}).subscribe();
}

我的测试方法:

it('should call myServiceCall', inject([MyService], (service: MyService) => {
    let testId = undefined;
    service.myServiceCall(testId);
    let req = httpMock.expectOne(environment.baseUrl + "/paramX/123");

    expect(req.request.url).toBe(environment.baseUrl + "/paramX/123");
    expect(req.request.body).toEqual({});

    req.flush({});
    httpMock.verify();
}));

我当然是一个例外,因为我希望url参数为"123"而不是像这个测试用例场景中那样未定义.

错误:预期一个匹配的条件请求"匹配URL: http:// localhost:8080/myservice/paramX/123 ",找不到.

我不明白的是测试框架说的原因

找不到

虽然提出了要求.是否有可能让测试框架告诉我其他实际调用是什么,类似于mockito的验证？

因此标题几乎说明了一切！

我有一个编译为PWA的Angular 7应用，我的package.json在下面。我的后端api是用AzureFunctions V2编写的。

"dependencies": {
    "@angular-devkit/core": "^7.0.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/platform-server": "^7.0.3",
    "@angular/pwa": "^0.10.5",
    "@angular/router": "^7.0.3",
    "@angular/service-worker": "^7.0.3", 
    "@types/date-fns": "^2.6.0",
    "angular-calendar": "^0.26.4",
    "chartist": "^0.11.0",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },

我遇到的问题是，当我将api端点设置为使用https时，出现504网关超时错误。我知道https的配置/功能很好，因为这都是由Azure使用Azure Functions自动配置的。

我所有的API请求也都可以通过https与Postman一起正常工作。

更新-有点发展，如果我在未启用PWA的情况下在本地运行，则会得到以下不同的ERR_SPDY_PROTOCOL_ERROR

这是Chrome中的调试信息 chrome://net-internals/#events

t=9314 [st= 1]        UPLOAD_DATA_STREAM_READ  [dt=0]
                      --> current_position = 0
t=9314 [st= 1]        HTTP2_STREAM_UPDATE_SEND_WINDOW
                      --> delta = -73
                      --> stream_id = 3 …

我有一个 Angular 应用程序，我只想下载一个文件。

到目前为止，这是我的代码：

this.fileNavigationService.downloadFile(element).subscribe(result => {
    this.generateDownload(result);
});

还有我的服务：

downloadFile(file: FileElement) {
    return this.http.get(this.apiUrl + '/downloadFile', { params: file.name, responseType: 'blob' });
}

现在，我想在下载文件时显示进度。在网上查了一下，发现了一个很有用的东西。我的服务现在看起来像这样：

downloadFile(file: FileElement) {
    const req = new HttpRequest('GET', '/downloadFile?path=' + file.name, {
      reportProgress: true,
    });

    return this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.DownloadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% downloaded.`);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely downloaded!');
      }
    });
}

我可以在控制台中清楚地看到进度，但是，我现在有两个问题：

• if即使下载似乎达到 100%，我的代码也不会进入最后一次
• 我的组件中的代码显然在 …

我正在使用 HTTP 拦截器来向请求添加身份验证令牌，但是当 http 客户端触发请求时，该请求会被拦截并发送两次

这是我的 HttpClient 调用

  searchProd(query: string, limit?: number): Observable<Product[]> {
    let _limit = limit || 5;
    return this.http.get<Product[]>(`${API_CONST.HOST}/${API_CONST.PRODUCT}?search=${query}&limit=${_limit}`);
  }

这是我的 app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; 
import { TokenInterceptor } from './auth/token.interceptor';
....

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ApiService,
    AuthGuardService,
    SettingsService,
    {
      provide : HTTP_INTERCEPTORS,
      useClass : TokenInterceptor,
      multi : true
    }
  ],
  entryComponents: [ ... ],
  bootstrap: [ ... ]
})

这是我的 token.interceptor.ts

import { Injectable } …

我正在尝试将响应对象从我的 angular 项目中的 HTTP Post 请求转换为Person我定义的类。我在 HTTP 服务中定义了一个通用的 post 方法，并在我的个人服务中调用它，将通用替换为Person. 所以，我想，既然我已经做了 HTTPresponse应该是一个Person，但它不是 - 它只是一个Object. 我需要它是 aPerson因为我的 Person 类上有一些我需要访问的自定义逻辑。我可以在我的个人服务中编写一个辅助方法，但我觉得这应该可行 - 特别是因为 VS Code 智能感知说response我的组件中的 是Person当我将鼠标悬停在它上面时。

这是我的代码：

http.service.ts

@Injectable()
export class HttpService {
    baseUrl = 'https://baseurl.com';

    constructor(private http: HttpClient) { }

    post<T>(endpointUrl: string, body: any): Observable<T> {
        const fullUrl = this.baseUrl + endpointUrl;
        return this.http
            .post<T>(fullUrl, body)
            .pipe(
                map(response => response as T)
            );
    }
} …

对于 Angular 7 应用程序中的 API 调用之一，我间歇性地收到“net::ERR_HTTP2_PROTOCOL_ERROR”，我也在使用 ngrx。所有其他 API 调用都可以使用相同的配置/标头正常工作