Конечная точка возвращает ошибку, но подписка http не перехватывает ее

Question

У меня есть простой кусок кода.

let body = new FormData();
body.set("a", true);
body.set("username", this.user);
body.set("password", this.password);

let headers = new HttpHeaders();
headers.set("Content-Type", 'application/x-www-form-urlencoded')

console.log("about to post");
this.http.post("/endpoint", body, {headers: headers}).subscribe(
    (result) => { console.log("success", result); /*extra code*/},
    (error) => { console.log("error", error); /*extra code*/ },
    () => { console.log("Complete"); /*extra code*/ });

Это довольно простая подписка.

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

about to post
POST [url] 401 (Unauthorized)
Complete

Не выполняет функцию ошибки.

в конструкторе http определяется как: private http: HttpClient

Так что я немного расстроен пониманием того, почему он не может выдать ошибку. Есть что-то, что не работает? Я просматривал похожие посты, такие как Ловля ошибок в Angular HttpClient , которые, как мне казалось, я отслеживал в отношении подписки.

При успешном запросе он вызывает успех просто отлично.

Редактировать Я больше изучал код и решил, что, возможно, данные или заголовки были неправильными. Поэтому я собираюсь обновить их выше. Казалось, что передаваемые данные выглядели невнятными, поэтому я обновил их, чтобы они стали данными формы. Я прошел через конечную точку, пока она не выдаст новое исключение («Ошибка авторизации»), но оно никогда не вызывает функцию ошибки. Может быть, есть что-то, чего мне не хватает в определении почтового запроса? Может быть, что-то сломалось внутри, потому что я не смог правильно что-то установить?

Answer 1

Здесь я подготовил макет , чтобы вы могли играть

По сути, это макет серверного вызова, перехватывающего некоторые http-запросы с компонентом 'FakeBackendInterceptor'. Там я имитирую неавторизованный ответ, если вы отправляете запрос на конечную точку «/ protected».

Единственный компонент для запуска приложения - HelloComponent, который вызывает сервис get и post для имитации как авторизованных, так и не санкционированных вызовов.

В конце концов, вы были правы, потому что это фиксируется как ошибка. Разветвите это, чтобы вы могли попробовать что-нибудь еще. Я привык перехватывать все ошибки (или несанкционированные вызовы) в одном месте, я только что добавил компонент ErrorInterceptor, чтобы вы могли попробовать оба подхода.

Обратите внимание на объявление в app.module (порядок вопросов):

providers:    [ 
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true },
  ], 

не забудьте добавить HttpClientModule в импорт:

imports:      [ HttpClientModule, BrowserModule, FormsModule ],

Если вы не хотите использовать перехватчик:

  this.service.post().subscribe(
    (result) => { console.log("success", result); /*extra code*/},
    (error) => { 
      console.log("error", error); /*extra code*/ 
      if (error.status === 401)  {
        console.log("You are not authorized");
      }
    },
    () => { console.log("Complete"); /*extra code*/ })
}

Я добавил еще один дополнительный случай, чтобы вы могли иметь дело с 401 в самой службе. Если вы отправляете запрос PUT, вы можете проверить его:

  let body = new FormData();
  body.set("a", 'true');
  body.set("username", 'user');
  body.set("password", 'password');

  let headers = this.createHeaders();

  console.log("calling services unauthorized PUT");
  return this.http.put<any>("/protected", body, { headers, observe: "response" }).
  pipe(
    map(res => {
    if (res.status === 400 || res.status === 401) {
      throw new Error(res.body.message);
    }
    return res.body;
  }));