Как выполнить асинхронную операцию от углового перехватчика? - PullRequest
Новая
       21

Как выполнить асинхронную операцию от углового перехватчика?

0 голосов
/ 09 ноября 2019

Я пытаюсь выполнить асинхронную операцию перед отправкой сетевого запроса.

По какой-то причине сетевой запрос даже не запускается. В основном я хочу, чтобы запрос удерживался до тех пор, пока не будет запущена следующая функция в accessToken$ observable.

Насколько я понимаю, я передал accessToken$ с наблюдаемой, которая возвращается из next.handle(req), в результате чего получается промежуточная одежда then(..).then(..) поведение.

код: 

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken$: Observable<string> = from("accessToken");

    return accessToken$.pipe(mergeMap((accessToken: string) => {
        req = req.clone({
            setHeaders: {
                'Authorization' : `${accessToken}`,
            }
        })
        return next.handle(req);
    }));
}

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

Стоит упомянуть, что если я просто верну next.handle(req), запрос действительно пройдет. Так что мое сердце говорит мне, что что-то не так с наблюдаемым взаимодействием, которое я определил.

Я следовал этому уроку: Асинхронные HTTP-перехватчики с Angular 4.3

1 Ответ

1 голос
/ 09 ноября 2019

Если вы добавили ошибку перехвата, регистрируется ли что-нибудь в выводе? 

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken$: Observable<string> = of("accessToken");

    return accessToken$.pipe(mergeMap((accessToken: string) => {
      const tokenRequest = req.clone({
        setHeaders: {
          'Authorization': `${accessToken}`,
        }
      });
      return next.handle(tokenRequest);
    }),
      catchError((error) => {
        console.log(error);
        return throwError(error);
      }));
  }
...