HTTP: отправка данных на сервер¶

16.03.2023

Помимо получения данных с сервера, HttpClient поддерживает другие методы HTTP, такие как PUT, POST и DELETE, которые вы можете использовать для изменения удаленных данных.

Пример приложения для данного руководства включает сокращенную версию примера "Тур по героям", который извлекает героев и позволяет пользователям добавлять, удалять и обновлять их. В следующих разделах приведены примеры методов обновления данных из HeroesService примера.

Выполнить POST-запрос¶

Приложения часто отправляют данные на сервер с помощью POST-запроса при отправке формы. В следующем примере HeroesService делает HTTP POST-запрос при добавлении героя в базу данных.

1
2
3
4
5
6
7

/** POST: add a new hero to the database */
addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

Метод HttpClient.post() похож на get() тем, что у него есть параметр type, который вы можете использовать для указания того, что вы ожидаете от сервера возврата данных заданного типа. Метод принимает URL ресурса и два дополнительных параметра:

Пример отлавливает ошибки, как описано выше.

Компонент HeroesComponent инициирует фактическую операцию POST, подписываясь на Observable, возвращаемую этим методом обслуживания.

1
2
3

this.heroesService
    .addHero(newHero)
    .subscribe((hero) => this.heroes.push(hero));

Когда сервер успешно отвечает с новым добавленным героем, компонент добавляет этого героя в отображаемый список heroes.

Выполните запрос DELETE¶

Это приложение удаляет героя с помощью метода HttpClient.delete, передавая ID героя в URL запроса.

1
2
3
4
5
6
7
8

/** DELETE: delete the hero from the server */
deleteHero(id: number): Observable<unknown> {
  const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
  return this.http.delete(url, httpOptions)
    .pipe(
      catchError(this.handleError('deleteHero'))
    );
}

Компонент HeroesComponent инициирует фактическую операцию DELETE, подписываясь на Observable, возвращаемую этим методом службы.

1

this.heroesService.deleteHero(hero.id).subscribe();

Компонент не ожидает результата от операции удаления, поэтому он подписывается без обратного вызова. Даже если вы не используете результат, вы все равно должны подписаться.

Вызов метода subscribe() исполняет наблюдаемую, что и инициирует запрос DELETE.

1
2

// oops ... subscribe() is missing so nothing happens
this.heroesService.deleteHero(hero.id);

Выполните PUT-запрос¶

Приложение может отправлять PUT-запросы, используя клиентскую службу HTTP. Следующий пример HeroesService, как и пример POST, заменяет ресурс обновленными данными.

1
2
3
4
5
6
7

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero(hero: Hero): Observable<Hero> {
  return this.http.put<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

Как и для любого из HTTP методов, возвращающих наблюдаемую, вызывающий HeroesComponent.update() должен subscribe() на наблюдаемую, возвращаемую из HttpClient.put(), чтобы инициировать запрос.

Добавление и обновление заголовков¶

Многие серверы требуют дополнительных заголовков для операций сохранения. Например, сервер может потребовать токен авторизации, или заголовок "Content-Type" для явного объявления MIME-типа тела запроса.

Добавить заголовки¶

Сервис HeroesService определяет такие заголовки в объекте httpOptions, который передается каждому методу сохранения HttpClient.

1
2
3
4
5
6
7
8

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

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Authorization: 'my-auth-token',
    }),
};

Обновление заголовков¶

Вы не можете напрямую изменить существующие заголовки в предыдущем объекте options, потому что экземпляры класса HttpHeaders неизменяемы.

Вместо этого используйте метод set(), чтобы вернуть клон текущего экземпляра с новыми изменениями.

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

1
2
3
4

httpOptions.headers = httpOptions.headers.set(
    'Authorization',
    'my-new-auth-token'
);

Комментарии