Лучший способ сделать HTTP Пост с json телом в angular 9 - PullRequest
Новая
       10

Лучший способ сделать HTTP Пост с json телом в angular 9

0 голосов
/ 13 марта 2020

Привет, я работаю над проектом, где мне нужно сохранить 3 поля текстового поля. Я с трудом узнаю, как разместить сообщение с телом json. Это то, что я до сих пор. Я постоянно нахожу фрагменты в Интернете, и я так растерялся. 

  onClickMe() {
    this.dataService.saveOrder(this.order);
  }

saveOrder (order: order): Observable<order> {
    const href = 'http://localhost:7000/api/SaveOrder';
    const config = { headers: new HttpHeaders().set('Content-Type', 'application/json') }
    return this.httpClient.post<order>(href, order, config)
      .pipe(
        catchError(this.handleError('updateOrder', order))
      );
  }

export interface Order {
  id: number;
  name: string;
  status: string;
}

1 Ответ

0 голосов
/ 13 марта 2020

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

Во-первых, я бы назвал ваши функции более подходящим образом. onClickMe очень неясен в том, что на самом деле делает, это как для вашей пользы, так и для кого-то другого при чтении вашего кода, вы будете поражены насколько это помогает, когда вы возвращаетесь к какому-то старому коду, который не читали месяцами!

Компонент 

saveOrderToDB(newOrder: Order): void{
  this.orderService.saveNewOrder(newOrder).subscribe((response) => {
    console.log('Succesfully posted', newOrder)
    // Or you can log the response, response.message ect depending on what the backend returns
    console.log(response);
  })
}

Сервис 

url = 'http://localhost:7000/api/' // Use this as your base url across all http methods within your service and append the extra parts such as the SaveOrder within the methods themselves

saveOrder(order: Order): Observable < Order > {
  return this.http.post<Order>(`${this.url}SaveOrder`, order)
    .pipe(
      catchError(this.handleError('updateOrder', order))
    )
}

Кроме того, документация Angular действительно является отличным портом позвоните, чтобы разобраться с сервисом http - https://angular.io/guide/http

...