Http 订阅无法使用服务 Angular

Question

我正在处理一个项目，我需要从自定义服务器检索数据。我为处理请求创建了一个 httpclient 服务，我遇到了这个问题：当我尝试订阅以将数据传递给组件时，没有任何反应，但是如果我在组件中进行订阅，一切都很好。我重新假设以下代码：

组件：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, catchError, map, Observable, of} from 'rxjs';
import { Food } from '../api/api-models';
import { ApiService } from '../api/api.service';

@Component({
  selector: 'app-in-home-list',
  templateUrl: './in-home-list.component.html',
  styleUrls: ['./in-home-list.component.css']
})
export class InHomeListComponent implements OnInit {

  res: Food[];
  error: string;

  constructor( private api: ApiService, private http: HttpClient){
  }

  ngOnInit() {
    //this.http.get<Food[]>('https://localhost:5001/').pipe(catchError(this.api.handleError)).subscribe({next: r => this.res = r, error: e => this.error = e});
    [this.res, this.error] = this.api.getInHomeList();
  }
}

注释行是在这里工作的，但不是在服务中，没有注释的是我想要正常工作的。

服务：

import { Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Food } from './api-models';
import { catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ApiService {

  private result: Food[];
  private error: string;

  constructor( private http: HttpClient) {

  }

  getInHomeList(): [Food[], string] {

    this.http.get<Food[]>('https://localhost:5001/').pipe(catchError(this.handleError)).subscribe({next: r => this.result = r, error: e => this.error = e});

    return [this.result, this.error];
  }

  handleError(error: any) {
    let errorMessage = "";
    if (error.error instanceof ErrorEvent) {
        // client-side error
        errorMessage = `Error: ${error.error.message}`;
    } else {
        // server-side error
        errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(() => new Error(errorMessage))
  }
}

app.module.ts中的@NgModule:

@NgModule({
  declarations: [
    AppComponent,
    InHomeListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    ApiService
  ],
  bootstrap: [AppComponent]
})

我对 Angular 有点陌生，所以也许我遗漏了一些东西，或者我不太了解 Observable 的工作原理。

Answer 1

上面注释的意思是“订阅”方法中的内容是异步的，这意味着您的 getInHomeList() 方法不一定运行按照顺序编写。意思是，您的“subscribe()”方法内部可能需要 5 秒（或更多或更少）才能得到响应，但您的“return”行会立即 return，没有数据.

拥有 http 数据服务的常见方式是这样的，return objservable 本身到组件：

    public getInHomeList(): Observable<Food[]> {
        return this.http.get<Food[]>('https://localhost:5001/')
        .pipe(catchError(this.handleError));
      }

      handleError(error: any) {
        let errorMessage = "";
        if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
        } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
        }
        console.log(errorMessage);
        return throwError(() => new Error(errorMessage))
      }

然后订阅可观察对象并在您需要的任何组件中获取结果：

ngOnInit() {
    this.api.getInHomeList()
        .subscribe({next: r => this.res = r, error: e => this.error = e});
  }

“订阅”方法内部是异步的，因此设置“R”的值可能需要更长的时间。但是不管得到响应需要多长时间，ngOnInit() 方法的其余部分将继续运行.

Http 订阅无法使用服务 Angular

Http subscribe not working on Service Angular

angular

typescript

observable

angular-services

angular-httpclient