使用Observables从httpClient返回一个字符串数组

31 浏览
0 Comments

使用Observables从httpClient返回一个字符串数组

我有一个API端点，返回一个字符串数组（json），我正在尝试创建一个页面，通过Angular Service输出内容。目前为止我有以下代码（我使用的是Angular 7）：

export class FieldService {

constructor(private httpClient: HttpClient) { }

fieldTypesURL = 'http://localhost:3000/fields/types';

public getTypes(): Observable {

return this.httpClient.get(this.fieldTypesURL)

.pipe(map((response: any) => response.json()),

catchError((error: any) => Observable.throw(error.json().error || '服务器错误')));

}

}

我遇到的编译错误是：

类型'Observable'缺少以下属性：then、catch、[Symbol.toStringTag]、finally。

为什么它在这里提到了一个Promise，而我要使用的是Observable？欢迎任何想法！

0

3 答案

0 Comments

问题出现的原因：在httpClient调用中使用了错误的方法，以及调用服务方法时的错误用法。

解决方法：使用正确的方法调用httpClient，并使用正确的方法调用服务方法。

文章内容如下：

问题：如何使用Observables从httpClient返回一个字符串数组？

1) 使用泛型参数调用httpClient会自动进行json转换和类型转换。

2) Observable#throw已被弃用，请使用throwError运算符代替。此外，确保正确解析和处理错误。为错误指定类型将显著提高类型安全性。

3) 确保正确调用您的服务方法...

// field.service.ts
export class FieldService {
  constructor(private httpClient: HttpClient) { }
  fieldTypesURL = 'http://localhost:3000/fields/types';
  public getTypes(): Observable {
    return this.httpClient.get(this.fieldTypesURL).pipe(
      catchError((r: HttpErrorResponse) => throwError(r.error || 'Server error'))
    );
  }
}


// your.component.ts
export class YourComponent {
  constructor(private fieldService: FieldService){}
  // ... component logic ...
  public types: string[];
  public types$: Observable;
  public callService() {
    // 正确的调用
    this.fieldService.getTypes().subscribe(types => this.types = types)
    // 使用一些observable流处理的正确调用
    this.types$ = this.fieldService.getTypes().pipe(
      catchError((err: any) => {
        // 组件内部的错误处理可以放在这里
        return throwError(err);
      }),
      flatMap(types => types),
      filter(type => !!type),
      map(type => type.trim()),
      toArray()
    );
    // 错误的调用（编译器错误）
    this.fieldService.getTypes().then(types => /* whatever */);
    this.fieldService.getTypes().catch(err => /* whatever */);
    let r: Promise = this.fieldService.getTypes();
  }
}

希望这可以帮助一点 🙂

0
0 Comments

问题出现的原因是返回类型错误，解决方法是将Observable的泛型改成Observable。代码如下：

export class FieldService {
  constructor(private httpClient: HttpClient) { }
  fieldTypesURL = 'http://localhost:3000/fields/types';
  public getTypes(): Observable {
    return this.httpClient.get(this.fieldTypesURL)
    .pipe(map((response: any) => response as string[]),
      catchError((error: any) => Observable.throw((error && JSON.parse(error).error) || 'Server error')));
  }
}

0
0 Comments

问题的出现原因是在使用httpClient时，它会自动将响应解析为JSON格式。所以，.pipe(map((response: any) => response.json())可能是出错的地方。此外，将类型'any'改为'string'。

解决方法如下：

public getTypes(): Observable<string[]> {
return this.httpClient.get<string[]>(this.fieldTypesURL)
  .catch((error: any) => Observable.throw(( error && JSON.parse(error).error) || 'Server error')));
}

.json()函数的作用与此处Angular Response.json() not documented中的情况几乎相同。我通过删除这一行来简化代码，并得到了一个更好的版本，但我仍然遇到了完全相同的错误。我尝试了这个帖子中推荐的很多变体，但都没有成功：stackoverflow.com/questions/37208801/…

很抱歉。请参考上面的代码。

我的当前代码是：

public getTypes(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.fieldTypesURL);
}

它抛出了相同的错误。

0