Блог

В моем приложении Angular я получаю данные из api, используя запрос get в созданной мной службе, я пытаюсь также создать запрос post к этому api, мой код, похоже, не работает. мой код до сих пор:

     import { Injectable } from '@angular/core';
    import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
    import { HttpClientModule } from '@angular/common/http';
    import { Observable, of, throwError } from 'rxjs';
    import { catchError, retry } from 'rxjs/operators';


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

nowService {

  serviceApiUrl: string = 'api/incident';


  constructor(
    private http: HttpClient,

  ) { }

  getAll(): Observable<any> {
    return this.http.get<any>(this.serviceApiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }

  getIncidents(customerId): Observable<any> { 
    return this.http.get<any>(this.serviceApiUrl   "?customer_id="   customerId )
      .pipe(
      catchError(this.handleError)
    );
  }

  postIncidents(customerId): Observable<any> { 
    return this.http.post<any>(this.serviceApiUrl   "?customer_id="   customerId )
      .pipe(
      catchError(this.handleError)
    );
  }


  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something has happened; Api is not working!'));
  };

}
  

Он принимает customer_id в качестве параметра. Ошибка, которую я получаю, заключается в:

Ожидалось 2-3 аргумента, но получен 1.

Запрос POST используется, когда вы хотите вставить что-либо в базу данных. Функция post HttpClient ожидает как минимум 2 аргумента. Первый — это URL, а второй — тело запроса (объект, который вы хотите вставить в базу данных).

Например, если вы хотите создать пользователя, это стандартный способ

 this.httpClient.post<any>('/api/user', {username: 'test', password: '123'});
  

Это вернет Observable тела ответа (который, вероятно, является тем же объектом, который вы передали в качестве второго аргумента с id). Если вы хотите, чтобы функция возвращала полный ответ (со статусом и другими полезными данными), вы можете передать ей третий аргумент (options)

 this.httpClient.post<any>('/api/user', {...}, {observe: 'response'});
  

Это вернет Observable который выдаст что-то вроде этого, когда он завершится:

 {
  body: {
    id: 1,
    username: 'test',
    password: '123'
  },
  status: 201 // Indicates the creation was successful (sometimes 200),
  headers: {...} // you can pass them as property of 3rd argument
}
  

Поскольку ваша конечная точка не ожидает, что у запроса будет тело, вы можете сделать это следующим образом:

 postIncidents(customerId): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl "?customer_id=" customerId, null)
    .pipe(catchError(this.handleError));
  }
  

отправка данных на сервер:https://angular.io/guide/http#sending-data-to-the-server

подробнее о кодах состояния http:https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Вам не хватает тела, попробуйте добавить пустой объект

 return this.http.post<any>(this.serviceApiUrl   "?customer_id="   customerId, {})
      .pipe(
      catchError(this.handleError)
    );
  

Проблема возникла из-за метода POST:

   return this.http.post<any>(url, body, headers)
  

Однако, в зависимости от версии Angular, над которой вы работаете, она может отличаться.

Документы Angular

По соглашению ожидается, что Http-запросы POST будут содержать данные в теле запроса. По сути, вы указываете серверу создать ресурс. Для того, чтобы сделать это, вы помещаете ресурс ( incident в вашем случае) в текст запроса POST-запроса.

Чтобы сделать это в angular, вы передаете его в качестве второго параметра.

 postIncidents(customerId, incident): Observable<any> { 
  const url = this.serviceApiUrl   "?customer_id="   customerId;
  return this.http.post<any>(url, incident)
    .pipe(
    catchError(this.handleError)
  );
}
  

И в качестве общей практики я стараюсь сохранять URL-адрес как можно более чистым с помощью запросов post и сохранять параметры строки запроса для получения данных. Что было бы самым чистым, так это убедиться, что customerId это свойство, содержащееся в incident данных. Тогда его можно было бы очистить только до этого:

 postIncidents(incident): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, incident)
    .pipe(
    catchError(this.handleError)
  );
}
  

// Пример 1:

 import { HttpClient } from '@angular/common/http';


constructor(private http: HttpClient) {}

serviceurl:any = http://localhost:3000/;

postIncidents (customerId): Observable<any> {

  const Url = `${serviceurl}`;

  const body = `customer_id= ${customerId}`;

    return this.http.post<any>( Url , body, {})

    .pipe(map(res => res))

    .catch(err => err);
 }
  

Пример 2 :

// отправлять данные с http-заголовками, тип содержимого json

  import { HttpHeaders } from '@angular/common/http';

 const httpOptions = {

 headers: new HttpHeaders({

   'Content-Type':  'application/json'

 })};

 postIncidents (customerId): Observable<any> {

   const Url = `${serviceurl}`;

   const body = JSON.stringify(

   {

    customer_id: customerId 

   });

   return this.http.post<any>(Url, body, httpOptions)

   .pipe(map(res => res))

   .catch(err => err);
 }