标签: angular-httpclient

所以我最终决定跟上时代的步伐，将一些旧的有角的Http东西迁移到HttpClient。

该应用程序过去曾在大量基于Promise的代码上运行，此后已被删除（大部分情况下）。
我以前的Promise函数如下所示：

public getUser(profileId: number): Promise<User> {
    return this.http.post("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
    .map(u => new User(u))
    .catch(this.handleError)
    .toPromise();
}

我的新HttpClient函数好得多：

public getUser(profileId: number): Observable<any> {
    return this.http.post("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
}

但是我目前不喜欢的是在每次订阅时，我现在都必须将数据映射到User的实例...

service.getUser(1).subscribe(data => {
    data = new User(data);
});

这是.map我最简单的方法，有些post方法实际上返回一个相当复杂的对象，该对象映射到许多新对象实例。

我可以看到HttpClient.get您可以用Type断言响应，我可以这样做吗，.post这样我就不必在每个订阅中将数据映射到一个新的User？

注意：最终，我将再次将其迁移到更好的体系结构，在该体系结构中，您实际上订阅了User变量，但现在我只想实现HttpClient。

我在从 http.get 请求中获取正确的可观察类型时遇到了一些麻烦。这是我遇到问题的功能：

getMovie(title:string, year:number): Observable<Movie> {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get(this.moviePath, {params})
  }

如您所见，我想Movie使用参数'title'和'year'. 问题是响应总是返回类型Observable<Object>而不是Observable<Movie>.

我知道我可以创建一个新的 Movie 实例，为其提供从列表中收到的属性。问题在于我的电影类具有可选的属性。这是我的电影课：

export class Movie {
  title:string;
  year?:number;
  imdb?:string;
  trailer?:string;
  reviewClip?:string;
  reviewSummary?:string;
  reviewScore:number;
  createdAt?:Date;
  bestWeek:boolean;
  bestMonth:boolean;
}

有没有人知道一种简单的方法来使响应成为类型Observable<Movie>而不是Observable<Object>

我是Angular&typescript的新手,试图了解HttpClient,observables和subscribe

当我在组件的功能中执行此操作时

console.log(this.http.get('assets/user.json'));

我收到一个对象,但如果我将代码更改为,则无法https://localhost:4200/assets/user.json在调试器中看到任何请求network

this.http.get('assets/userDetail.json').subscribe(data => this.user = { name:  data['name']});

我可以看到网络请求命中了所需的URL.为什么会这样？this.http.get('assets/userDetail.json')即使我们没有订阅响应数据流,我的理解也会打到网址.

我想测试一个HTTP调用错误响应HttpClientTestingModule.这工作正常,直到我retry(2)向HTTP调用添加rxjs .然后,测试显然抱怨发现了意外的请求:

预计没有公开要求,发现1

但现在,我不知道如何使用以下两个请求HttpTestingController:

service.ts

@Injectable()
export class Service {
  constructor(private http: HttpClient) { }

  get() {
    return this.http.get<any>('URL')
      .pipe(
        retry(2),
        catchError(error => of(null))
      )
  }
}

service.spec.ts

describe('Service', () => {
  let httpTestingController: HttpTestingController;
  let service: Service;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [Service],
      imports: [HttpClientTestingModule]
    });

    httpTestingController = TestBed.get(HttpTestingController);
    service = TestBed.get(Service);
  });

  afterEach(() => {
    httpTestingController.verify();
  });

  it('should handle 404 with retry', () => {
    service.get().subscribe((data: any) => {
      expect(data).toBe(null);
    });
    expectErrorResponse(404); …

我正在使用Angular 5实现文件上传服务，我想向用户提供有关上传进度的反馈。我发现有几页建议使用reportProgressAngulars随附的参数HttpClient，但无法使其正常工作。

我对所有的HTTP请求都使用包装器类，然后该类进行一些逻辑处理，最后所有请求最终都以被调用的相同方法结束：

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(request.method, request.url, {
    body: request.body,
    headers: request.headers,
    responseType: request.responseType,
    ...options
  });
}

然后，我使用{ reportProgress: true }as 传递一个上传（发布）调用options。这根本不起作用，对请求的任何更改都没有。因此，我怀疑我实际上需要reportProgress在HttpRequest构造函数中使用-parameter使其起作用，并相应地更改了我的代码：

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(
    new HttpRequest(request.method, request.url, request.body, {
      headers: request.headers,
      responseType: request.responseType,
      ...options
    })
  );
}

这导致了更奇怪的行为，现在无论我的选择是什么样，我始终只收到{type: 0}请求的响应。

我要监督什么？我使用Angular 5.1.1，现在我真的有点困惑。

因此，举一个明确的例子，现在我对这两个HttpRequest收到相同的响应：

{  
  "url":"http://127.0.0.1:8888/test",
  "body":{  
   "data":"testdata"
  },
  "reportProgress":false,
  "withCredentials":false,
  "responseType":"json",
  "method":"POST",
  "headers":{ some-headers ... } …

我在从响应中读取状态代码时遇到了一些问题。

我在服务中调用 api，

return this.http.get<string>( this.remoteServer + '/google.com/open', httpOptions);

在我的控制器中，我有，

open() {
    this.openService.open(this.selected.qrCode)
    .subscribe(
      data => {
       console.log(data);
       this.toastService.showSuccess('Unlock Successfull', 'success');
      }
    );
  }

现在我想阅读 http 状态文本，

我从上述调用中得到的示例 http 响应是。

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: " https://google.com/open ", ok: false, ...}

如何读取控制器中的状态文本。

请帮我

Angular 6使用HttpClient。目前尚未实施拦截器。

我有一个管理服务，正在对MSGraph进行http调用。在这种情况下，我收到一个错误400错误的请求，该请求正在发送到通知处理程序。

我在该console.log中滑动以确保该错误块完全被触发，在另一个cnosole.log中滑动以查看从服务器取回的“数据”是否为错误。

没有console.logs触发，但是全局错误处理程序仍在控制台中显示400错误的请求响应。

我希望能够使用此回复并显示一条用户友好的消息。

码：

this.http.get(this.GRAPH_ROOT_URL + this.APP_ID, { headers }).subscribe(data => {
  this.notification.done(data);
  console.log(data);
}), error => {
  this.notification.error(`Error getting users from Microsoft GRAPH API. Reason: ${error}`)
  console.log("this is observable error", error);
}

我试图在服务中调用一个函数，但我一直有 Cannot read property 'authenticationService' of undefined

我已经authenticationService在组件的构造函数中初始化，

组件：

 export class RegisterComponent implements OnInit {
  error: string;
  isLinear = true;
  registerFormGroup: FormGroup;
  loading = false;
  form: FormGroup;
  studentRegister: any;
  samePassword = false;
  hide = true;
  hide1 = true;
  matcher = new MyErrorStateMatcher();

constructor(
   private router: Router,
   private _formBuilder: FormBuilder,
   private http: HttpClient,
   private i18nService: I18nService,
   private authenticationService: AuthenticationService
) {
}

ngOnInit() {
    this.registerFormGroup = this._formBuilder.group({
    first_name: [null, Validators.compose([Validators.required,                 Validators.minLength(3), Validators.maxLength(20)])],
    last_name: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(20)])],
    email: [null, …

我有一个组件从资产文件夹加载本地 json 文件（仅包含名称）。由于 HttpClient 负责将数据格式化为 json，所以这里没有使用 map。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'

 export type cont= {name: string};

@Component({
  selector: 'my-app',
  template: `
    1st List
    <ul>
      <li *ngFor="let contact of contacts | async">{{contact.name}}</li>
    </ul>
    2st List
    <ul>
      <li *ngFor="let contact of contacts2 | async">{{contact.name}}</li>
    </ul>
    `
})
export class AppComponent {;
  contacts: Observable<cont[]>;
  contacts2: Observable<cont[]>;
  constructor (http: HttpClient) {
    this.contacts = http.get<cont[]>('http://localhost:4200/assets/contacts.json'); …

有没有办法使用 HttpParams 和 fromObject 有条件地添加参数？我尝试在实例化 HttpParams 后添加条件参数，但这不起作用：

const params = new HttpParams({
  fromObject : {
    requiredParam: 'requiredParam'
  }
});

if (addOptionalParam)
      params.append('optionalParamKey', 'optionalParamValue');

另外，我可以使用常量变量作为 fromObject 参数的键吗？我试过这个，但它不起作用：

  const ConstantVariableForKeyName = 'key';
  const params = new HttpParams({
  fromObject : {
    {{ConstantVariableForKeyName}}: 'paramValue'
  }
});