Post 在 Angular 6 个应用程序中请求

Question

在我的 Angular 应用程序中，我正在使用我创建的服务中的获取请求从 api 获取数据，我正在尝试为该 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 个。

Answer 1

POST 请求用于向数据库中插入内容。 HttpClient post 函数需要至少 2 个参数。第一个是 URL，第二个是请求主体（要插入数据库的对象）。

例如，如果你想创建一个用户，这是标准的方式

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

这将 return 响应主体的 Observable（可能与您作为带有 id 的第二个参数传递的对象相同）。如果您希望该函数 return 整个响应（包含状态和其他有用数据），您可以向它传递第三个参数（选项）

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

这将 return 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

Answer 2

您缺少正文，请尝试添加一个空对象

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

Answer 3

问题来自 POST 方法：

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

但是，根据您使用的 Angular 版本，它可能会有所不同。

Angular Docs

Answer 4

按照惯例，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)
  );
}

作为一般做法，我会尝试通过 post 请求使 URL 尽可能干净，并在获取数据时保存查询字符串参数。最干净的方法是确保 customerId 是包含在 incident 数据中的属性。然后它可以被清理成这样：

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

Answer 5

// 例子一：

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 headers 发送数据，内容类型 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);
 }

Post 在 Angular 6 个应用程序中请求

Post request in Angular 6 application

rest

http-post

angular