如何使用HTTP拦截器发出HTTP请求

Question

我正在尝试实现一个有角度的应用程序，在该应用程序中我将对后端进行API调用以获取数据。我如何创建一个拦截器来向后端URL发出请求（GET，POST，PUT，DELETE）。也有一些需要授权令牌的特殊路由。

另外，我想根据响应状态代码处理特定任务。如果后端返回401或500、202（具有刷新令牌），那么我想相应地处理它们。同样，有什么方法可以订阅角度组件的请求。

[作为初学者，我不知道如何灵活地创建它，因此，如果我的应用程序将来增长，它将不会造成任何问题。

Answer 1

只需看一下这个很棒的npm软件包https://github.com/2muchcoffeecom/ngx-restangular即可获得HTTP请求

Answer 2

检查以下拦截器模板以处理标题中的发送令牌，刷新令牌并处理错误

import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor,
    HttpErrorResponse,
    HttpHeaders,
    HttpClient
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, flatMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';

@Injectable({
    providedIn: 'root'
})
export class HttpConfigInterceptor implements HttpInterceptor {

    constructor(private httpClient: HttpClient) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const token = "my-token-string-from-server";

        //Authentication by setting header with token value
        if (token) {
            request = request.clone({
                setHeaders: {
                    'Authorization': token
                }
            });
        }

        if (!request.headers.has('Content-Type')) {
            request = request.clone({
                setHeaders: {
                    'content-type': 'application/json'
                }
            });
        }

        request = request.clone({
            headers: request.headers.set('Accept', 'application/json')
        });

        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                if (error.status == 401 && error.error) {
                    return this.refreshToken(next, request);
                }
                return throwError(this.handleError(error));
            }));
    }

    handleError(error) {
        if (error.status == 400) {

        } else if (error.status == 422) {

        } else if (error.status = 404) {

        }
    }

    refreshToken(next, request): Observable<any> {
        var header = new HttpHeaders({
            "refreshToken": "refreshToken",
            "token": "token"
        });
        var url = environment.apiUrl + "/refreshToken";
        return this.httpClient.get(url, { headers: header }).pipe(
            flatMap(response => {
                //console.log(response);
                // save new token
                request = request.clone({ headers: request.headers.set('token', (<any>response).token) });
                return next.handle(request).pipe(
                    catchError(error => {
                        return throwError(error)
                    })
                )
            }),
        )
    }

}