HTTP-запрос GET не работает через приложение Angular - PullRequest
Новая
       24

HTTP-запрос GET не работает через приложение Angular

0 голосов
/ 19 октября 2019

Недавно я настроил back-end для своего приложения. Я использую MEAN стек, и, безусловно, все идет хорошо. Я написал несколько обработчиков HTTP, включая запросы POST, PATCH и GET. POST и PATCH работают хорошо, моя база данных Mongo хорошо обрабатывает мои запросы. Я могу регистрировать пользователей, регистрировать их и обновлять информацию о них.

То, что не работает, - это мои запросы "получить всех пользователей". Я пробовал разные подходы, но ни один из них не удался. Я думаю, что мой внутренний код в порядке, потому что когда я отправляю запрос GET через приложение Postman - я получаю правильный результат. Но это не работает, когда я отправляю запрос через интерфейс. Основная проблема заключается в том, что бэкэнд-функция, отвечающая за получение JSON пользователей, даже не выполняется (мой «console.log», добавленный к этой функции, ничего не регистрирует).

Вот моя последняя попытка:

back-end: 

 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));
  }

front-end service: 

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);
  }

front-end component:

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

Я получаю пустой массив, и, как я уже говорил ранее, бэкэнд-функция даже не вызывается. Я попытался поместить функцию «подписка ()» непосредственно в службу внешнего интерфейса, но это тоже не сработало.

Если у кого-то есть идея, как это исправить, я был бы очень признателен, потому чтоЯ знаю, что это небольшая проблема, но сейчас я борюсь с ней два дня. Почти каждый существующий вопрос по этой теме заканчивается объяснением необходимости подписки на ответ, но в моем случае это не ответ.

Заранее спасибо!

1 Ответ

0 голосов
/ 20 октября 2019

Вам нужен оператор возврата в серверной части getAllUsers. И, вероятно, ждет.

...