代码之家 › 专栏 › 技术社区 › code.cycling

角度rxjs的差异

typescript angular

code.cycling · 技术社区 · 5 年前

我是来自angularjs的angularjs新手,我对rxjs observable感到困惑。

例子:

export class User {
id?:any;
username:string;
password:string;
}

具有 <User[]>

myUser(header: any) {
const url = `${this.mainUrl}/my_user`;
return this.http.get<User[]>(url, header).pipe(
  map(resp => {
    return resp;
  })
);
}

<用户[]>

myUser(header: any) {
const url = `${this.mainUrl}/my_user`;
return this.http.get(url, header).pipe(
  map(resp => {
    return resp;
  })
);
}

这将返回相同的结果。所以我不知道有没有区别。

编辑 :

这是我获取的数据,与我的 User.ts 但这并不是一个错误。

{
"username": "mhqadmin",
"inserted_at": "2019-02-06T07:01:17.024874",
"id": "b491e7c3-da11-40fe-b4b7-8f97fa88a9fd",
"avatar": {
    "middlename": "mhqadmin",
    "lastname": "headquarters",
    "id": "939c2eec-573e-4245-adcc-0771c73f22e4",
    "firstname": "marte"
},
"app_role": "mhq-admin",
"app_permission": true
}

2 回复 | 直到 5 年前

Jason Awbrey 5 年前

两者的区别 this.http.get<User[]> 和 this.http.get 您正在将类型传递到的泛型签名中 get

从 Angular source code :

  get<T>(url: string, options?: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'json',
    withCredentials?: boolean,
  }): Observable<T>;

这个 get<T> generic type signature this.http.get<用户[]> User -但这都是基于TypeScript的想法,与RxJS/observates/JavaScript无关。当你打电话的时候 这是http.get

编辑: User.ts this.http.get<用户[]> 应该看起来像,但它根本不涉及数据。如果您想更改数据的形状以匹配您的应用程序,则需要实际提取数据 User.ts 类,类似这样的内容:

myUser(header: any) {
  const url = `${this.mainUrl}/my_user`;
  return this.http.get(url, header).pipe(
    map(resp => {
      return {
        id: resp.id,
        username: resp.username
      };
    })
  );
}

interface User {
  id: string;
  username: string;
}

但这不是数据的形状,也不是在您获得的数据中,看起来更像这样:

interface User {
  username: string;
  inserted_at: string;
  id: string;
  avatar: Avatar;
  app_role: Role;
  app_permission: boolean;
}

这是一种更好地匹配从后端实际返回的内容的类型。无论您传递到泛型中的是什么类型,这都将是从可观察对象中得到的模型,但是您需要正确地匹配实际接口,正如我在 map 例子。

Andrei TÄtar 5 年前

<User[]> 您指示Typescript返回 http.get 是一个 Observable<User[]> 因此,它将推断出 myUser 到 . 这在应用程序中非常有用,因为工具将知道响应类型上存在哪些属性,以及您是否犯了错误/输入错误。如果您访问不存在的属性,它也会在编译时失败。那是因为

没有 < ,typescript将只使用 any 类型,与普通javascript相比没有任何额外的好处。

map(resp => { return resp; }) 是无用的,你可以安全地删除它。