Question

我正在学习Angular的基础知识，目前正在使用@ angular / common / http的HttpClient制作REST服务。

在许多教程中，第一步是进行http.get（）调用。通常，首先在整个http.get（）调用之后的整个列表着重于仅检索一个元素。在我的示例中，我有一个userList（与用户一起）。我有两种方法：getUserById（）和getUserByName（）。 $ {this.userUrl}表示数据库的位置（使用JSON文件），在其下方显示：

constructor(private http: HttpClient) {
}

getUserById(id: number): Observable<IUser> {
    return this.http.get<IUser>(`${this.userUrl}/${id}`);
}

getUserByName(name: string): Observable<IUser> {
    return this.http.get<IUser>(`${this.userUrl}/?name=${name}`);
}

最初，我试图通过与getUserById（）相同的方式来使getUserByName（）方法起作用。因此使用：

getUserByName(name: string): Observable<IUser> {
    return this.http.get<IUser>(`${this.userUrl}/${name}`);
}

这不起作用，我收到未找到错误声明404文件的信息。这是我使用过的json文件（我已经设置了json服务器，以便我还可以执行http.delete（）方法，等等）：

{"users": [
{
  "id": 1,
  "name": "James",
  "lastName": "Jameson",
  "dateOfBirth": "10-10-2000",
  "occupation": "Student"
},
{
  "id": 3,
  "name": "Steven",
  "lastName": "Stevenson",
  "dateOfBirth": "10-10-1990",
  "occupation": "Police officer"
}]}

谁能解释我为什么getUserById方法仅在URL调用中使用'/ $ {id}'以及为什么getUserByName需要使用'？/ name = $ {name}'吗？

Answer 1

如果您使用：

getUserById(id: number): Observable<IUser> {
    return this.http.get<IUser>(`${this.userUrl}/${id}`);
}

getUserByName(name: string): Observable<IUser> {
    return this.http.get<IUser>(`${this.userUrl}/${name}`);
}

并调用示例/ user3262578，它将进入第一个端点方法getUserById(id)，您显然在这里有歧义。两种方法的端点相同。
尝试将第二个端点（getUserByName）更改为其他链接，例如：

return this.http.get<IUser>(`${this.userUrl}/search/${name}`);

Answer 2

这与Angular无关，这纯粹是一个后端端点问题。

使用HTTP Rest客户端（例如PostMan）测试对后端的请求。

一旦一切按预期在后端运行，然后与Angular集成。

Angular Http getById和getByName之间的方法区别

2 个答案: