подписка на Angular

Question

Я совершенно новичок в Angular и создал проект, используя SpringBoot 2.0.5.RELEASE, Angular 5 и данные Spring для создания сквозного одностраничного веб-приложения Java.Я использую весеннюю загрузку 1.5 для предоставления REST API и angular5 с маршрутизацией для построения клиента, который будет использовать API, предоставляемые сервером.

Я определил этот компонент:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { User } from '../models/user.model';
import { UserService } from './user.service';

@Component({
  templateUrl: './add-user.component.html'
})
export class AddUserComponent {

  user: User = new User();

  constructor(private router: Router, private userService: UserService) {

  }

  createUser(): void {
    alert ('lala');
    this.userService.createUser(this.user)
        .subscribe( data => {
          alert('User created successfully.');
        });
  }
}

вна странице я вижу предупреждение lala, но не 'User created successfully.', но я понятия не имею, почему

Адрес ссылки, когда я создаю пользователя, это http://localhost:4200/api/users

Это мой proxy.config.json файл:

{
  "/api/*": {
    "target": "http://localhost:8080/user-portal",
    "secure": false
  }
}

и из curl все в порядке:

curl -X POST -H "Content-Type: application/json" "http://localhost:8080/user-portal/api/users"

и user.service.ts:

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/user.model';


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class UserService {

  constructor(private http: HttpClient) {}

    private userUrl = '/api/users';

  public getUsers() {
    return this.http.get<User[]>(this.userUrl);
  }

  public deleteUser(user) {
    return this.http.delete(this.userUrl + '/'+ user.id);
  }

  public createUser(user) {
    return this.http.post<User>(this.userUrl, user);
  }

}

Answer 1

Во-первых, лучше не использовать оповещение.Используйте console.log.Во-вторых, вы обрабатываете только успех, вы не обрабатываете неудачу.Сделайте это:

createUser(): void {
  console.log('lala');
  this.userService.createUser(this.user)
    .subscribe(data => {
      console.log('User created successfully', data);
    },
    err => {
      console.log('There was an error', err);
    },
    () => {
      console.log('I have completed now and nothing will ever be emitted from this Observable again');
    });
}

Обработчик ошибок будет выполнен, если ответ HTTP не является успешным ответом, а именно, если код состояния ответа не находится в диапазоне 2xx.

Проверкана вкладке сети браузера также проверьте, не завершился ли запрос HTTP.

Возможно, вы также захотите отладить это:

public createUser(user) {
  console.log('userUrl', this.userUrl)
  console.log('user', user)
  return this.http.post<User>(this.userUrl, user);
}

Чтобы убедиться, что все в порядке.

Answer 2

В Chrome нажмите F12, чтобы открыть инструменты разработчика и перейти на вкладку сети.Убедитесь, что запрос сделан к конечной точке и что это не бросок и ошибка.