HTTP GET请求不适用于Angular应用

问题描述 投票:0回答:1

最近,我已经为我的应用设置了后端。我使用MEAN堆栈,到目前为止一切顺利。我写了几个HTTP处理程序,包括POST,PATCH和GET请求。 POST和PATCH运行良好,Mongo数据库很好地处理了我的请求。我可以注册用户,对其进行登录并更新有关他们的信息。

[似乎不可行的是我的“获取所有用户”请求。我尝试了各种方法,但没有一个成功。我猜我的后端代码还可以,因为当我通过Postman应用发送GET请求时-得到正确的结果。但这在我通过前端发送请求时不起作用。主要问题是负责获取用户JSON的后端函数甚至没有执行(添加到该函数的“ console.log”不记录任何内容)。

这是我最近的尝试:

后端:

 private initializeRoutes() {
      this.router.get(`/users`, this.getAllUsers);
      this.router.patch(`/users/:id`, this.updateUserData);
  }

 private getAllUsers = async (request: express.Request, response: 
    express.Response) => {
      console.log('it works!'); // this one doesn't even show up
          this.user.find()
              .then((users) => {
                  response.send(users);
              })
              .catch(err => console.log(err));
  }

前端服务:

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { User } from '../../_models/user';
import {environment} from '../../../environments/environment';
import {first, map} from 'rxjs/operators';
import {BehaviorSubject, Observable} from "rxjs";

@Injectable({ providedIn: 'root' })
export class frontendService {

  private currentUserSubject: BehaviorSubject<User>;
  public currentUser: Observable<User>;
  user;
  url = 'http://localhost:5000';

  constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User> 
    (JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  getAll(): Observable<User[]> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.get<User[]>(`${this.url}/users`, {responseType: 'json', 
    headers});
  }


  register(user: User) {
    return this.http.post(`${this.url}/register`, user);
  }

  login(username: string, password: string) {
    return this.http.post<any>(`${this.url}/login`, {username, password})
      .pipe(map(user => {
        if (user) {
          localStorage.setItem('currentUser', JSON.stringify(user));
          this.currentUserSubject.next(user);
          this.user = user;
        }
        return user;
      }));
  }

  logout() {
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }

  update(user: User) {
    return this.http.patch(`${this.url}/users/${user.id}`, user);
  }

前端组件:

   getAllUsers() {
    this.frontendService.getAll().subscribe(users => {
      this.users = users;
      console.log(this.users);
    });

我得到的是空数组,就像我前面说的,后端函数甚至都不会被调用。我也尝试将“ subscribe()”函数直接放置在前端服务中,但这也不起作用。

[如果有人知道如何解决它,我将不胜感激,因为我知道这是一个小问题,但是我现在正在为之奋斗两天。关于该主题的几乎所有现有问题都以解释订阅答复的必要性结束,但这并不是我的回答。

提前感谢!

angular express mean-stack
1个回答
0
投票

您需要在服务器端getAllUsers中返回一个return语句。可能正在等待。

© www.soinside.com 2019 - 2024. All rights reserved.