Angular 10 Отправляет post-запрос, затем в случае успеха вызывает другой запрос

#angular #angular10

#угловатый #angular10

Вопрос:

У меня есть маршрут регистрации и маршрут входа. Маршрут регистрации создаст пользователя на серверной части.

Если этот вызов будет успешным, я хочу вызвать маршрут входа в систему. Этот маршрут отправит обратно пользовательский объект.

/auth/register просто регистрирует пользователя и отправит обратно сообщение об ошибке, если оно не сработает

/auth/sign-in отправит обратно пользовательскую модель, если ошибки нет

Как я могу сделать это последовательно? Спасибо

   registration(newUser: RegistrationUserModel) {

    // start of the registration process
    const options = {withCredentials: true, 'access-control-allow-origin': "http://localhost:4200/", 'Content-Type': 'application/json'};
    return this.http.post(`${this.API_URL}/auth/register`,newUser, options)

       // what should I do here if not sending back object until sign in route?
       .pipe(map(user => {


        // start of the sign in process
   
        this.http.post<UserModel>(`${this.API_URL}/auth/sign-in`,   { email: newUser.email, password: newUser.password }, options)
        .pipe(map(returnedUser => {
         localStorage.setItem('user', JSON.stringify(returnedUser));
         console.log('auth.service.ts LOGIN this.userSubject.next(returnedUser);');
         this.userSubject.next(returnedUser);
         return returnedUser;
        }),
        catchError((err) => {
          console.log('error caught in registration login service')
          localStorage.removeItem('user');
          console.error(err);

          //Handle the error here
          return throwError(err);  
          })
         );


        // end of the sign in process
        // ---
      }),
      catchError((err) => {
        console.log('error caught in registration service')
        localStorage.removeItem('user');
        console.error(err);

        //Handle the error here
        return throwError(err);    
      })
    );
    // end of the registration process
  }
 

Ответ №1:

Вы можете просто использовать switchMap оператор rxjs.

После выполнения первого вызова rest последовательно ожидает его завершения и использует результат первого для второго вызова.

Пример использования:

 firstApiCall.pipe(
   switchMap(response => {
     // do whatever you want with response then
     // return the second rest call
     return secondApiCall(response.id)
    })
).subscribe()
 

Если вам нужны дополнительные разъяснения по использованию оператора rxjs switchmap, я прилагаю страницу, где это подробно объясняется:

https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap

Комментарии:

1. верните this.http.post<any>( ${this.API_URL}/auth/register ,newUser, options) .pipe( switchMap(response => { // Я получаю: ОШИБКА TypeError: this.AuthService.registration(…).pipe не является функцией

2. если вы добавили фигурные скобки, вам нужно вернуть второй вызов rest. таким образом: switchMap(response => { return this.AuthService.registration(…).pipe }

3. Я изменил ответ, чтобы лучше объяснить вашу проблему