typescript 角度为4.3+的拦截器

Posted 2021-05-21

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

interface MatchFixtures {
    fixtures: Array<string>;
    date: string;
    matchday: number;
    homeTeamName: string;
    awayTeamName: string;
}

@Component({
    selector: 'app-fixture',
    template: `
    <div class="content">
        <table>
            <caption>
                Schema
            </caption>
            <tbody *ngFor="let match of data?.fixtures">
                <tr>
                    <td style="padding-top:8px;font-size:18px;text-align:center;" colspan="3">Round {{match['matchday']}}</td>
                </tr>
                <tr>
                    <td style="text-align:right;width:45%;">{{match['homeTeamName']}}</td>
                    <td style="text-align:center;width:32px;font-size:16px;" [ngClass]="{'green-text':match['result']['goalsHomeTeam']>match['result']['goalsAwayTeam'],'red-text':match['result']['goalsHomeTeam']<match['result']['goalsAwayTeam'],'yellow-text':match['result']['goalsHomeTeam']==match['result']['goalsAwayTeam']}">{{match['result']['goalsHomeTeam']}}</td>
                    <td>{{match['date']|date:'dd MMMM'}}</td>
                </tr>
                <tr>
                    <td style="text-align:right;width:45%;">{{match['awayTeamName']}}</td>
                    <td style="text-align:center;width:32px;font-size:16px;" [ngClass]="{'red-text':match['result']['goalsHomeTeam']>match['result']['goalsAwayTeam'],'green-text':match['result']['goalsHomeTeam']<match['result']['goalsAwayTeam'],'yellow-text':match['result']['goalsHomeTeam']==match['result']['goalsAwayTeam']}">{{match['result']['goalsAwayTeam']}}</td>
                    <td>{{match['date']|date:'HH.mm'}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    `,
    styles: []
})
export class FixtureComponent implements OnInit {

    public data: MatchFixtures;
    private url = 'https://api.football-data.org/v1/teams/66/fixtures';
    private days = '?timeFrame=n10';// n7 or p7
    private season = '?season=';// year i.e. 2017
    private today = new Date();
    private dd = this.today.getDate();
    private mm = this.today.getMonth() + 1;
    private yyyy = this.today.getFullYear();
    
    constructor(private http: HttpClient) {
    
    }

    ngOnInit(): void {
        if (this.dd < 10)
            this.dd = 0 + this.dd;
        if (this.mm < 10)
            this.mm = 0 + this.mm;

        this.http.get<MatchFixtures>(this.url + this.days).subscribe(
            data => {
                this.data = data;
            },
        (errorHandler: HttpErrorResponse) => {
            if (errorHandler.error instanceof Error) {
                console.log('Client-side error occured');
            } else {
                console.log('Server-side error occured');
                }
            }
        );

    /* //post
        const req = this.http.post(this.url, {
            title: 'foo',
            body: 'bar',
            userId: 1
        })
        .subscribe(
            res => {
                console.log(res);
            },
            err => {
                console.log('Error occured');
            }
        ) */
    }
}

#

## app.module.ts

```typescript
...

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { SoccerAuthInterceptor } from './core/soccer.interceptor';

...

@NgModule({
  declarations: [
  
    ...
    
  ],
  imports: [
  
    ...
    
    HttpClientModule
    
    ...
    
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: SoccerAuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }
```

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/observable';

export class SoccerAuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authReq = req.clone({
            headers: req.headers.set('X-Auth-Token', 'api-key')
        });
        return next.handle(authReq);
    }
}