Angular Learning Chat Http (Fehlerbehandlung/Abfangen von Anfragen)

In diesem Artikel lernen Sie Angular weiter, verstehen die HTTP-Verarbeitung in Angular kurz und stellen die Fehlerbehandlung und das Abfangen von Anforderungen vor. Ich hoffe, dass dies für alle hilfreich ist!

Grundlegende Verwendung

Mit dem von Angular bereitgestellten HttpClient können Sie problemlos auf die API-Schnittstelle zugreifen. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

Erstellen Sie beispielsweise eine neue http.service.ts. Sie können die Hostadressen verschiedener Umgebungen in environmentkonfigurieren >http.service.ts 可以在 environment 中配置不同环境的 host 地址

再贴一下 proxy.config.json 第一章中有介绍到

{
  "/api": {
    "target": "http://124.223.71.181",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "headers": {
      "Origin": "http://124.223.71.181"
    }
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '@env';

@Injectable({ providedIn: 'root' })
export class HttpService {
  constructor(private http: HttpClient) {}

  public echoCode(method: 'get' | 'post' | 'delete' | 'put' | 'patch' = 'get', params: { code: number }) {
    switch (method) {
      case 'get':
      case 'delete':
        return this.http[method](`${environment.backend}/echo-code`, { params });
      case 'patch':
      case 'put':
      case 'post':
        return this.http[method](`${environment.backend}/echo-code`, params);
    }
  }
}

然后在业务中 我们就可以这样使用

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';

@Component({
  selector: 'http',
  standalone: true,
  templateUrl: './http.component.html',
})
export class HttpComponent implements OnInit {
  constructor(private http: HttpService) {}
  ngOnInit(): void {
    this.http.echoCode('get', { code: 200 }).subscribe(console.log);
    this.http.echoCode('post', { code: 200 }).subscribe(console.log);
    this.http.echoCode('delete', { code: 301 }).subscribe(console.log);
    this.http.echoCode('put', { code: 403 }).subscribe(console.log);
    this.http.echoCode('patch', { code: 500 }).subscribe(console.log);
  }
}

这看起来非常简单 类似 Axios

下面介绍一下一些常用的用法

错误处理

this.http
  .echoCode('get', { code: 200 })
  .pipe(catchError((err: HttpErrorResponse) => of(err)))
  .subscribe((x) => {
    if (x instanceof HttpErrorResponse) {
      // do something
    } else {
      // do something
    }
  });

请求拦截

请求拦截是比较常用的

例如 你可以在这里判断 cookie 是否有效 / 全局错误处理 ...

新建 http-interceptor.ts 文件 （ 文件名可以随意 ）

最主要的是要实现 HttpInterceptor 的 intercept

Noch einmal posten proxy.config.json Es wurde in Kapitel 1 eingeführt

import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { filter, catchError } from 'rxjs/operators';
import { HttpEvent } from '@angular/common/http';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  constructor() {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .pipe(filter((event) => event instanceof HttpResponse))
      .pipe(
        catchError((error) => {
          console.log(&#39;catch error&#39;, error);
          return of(error);
        })
      );
  }
}

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    },
  ],
})
export class XXXModule {}

Dann können wir es so im Geschäft verwenden

rrreeeDas sieht sehr einfach aus und ähnelt Axios

Hier sind einige häufige Verwendungen🎜

🎜Fehlerbehandlung🎜🎜rrreee

🎜Abfangen anfordern🎜🎜🎜Abfangen anfordern wird häufiger verwendet🎜🎜Hier können Sie beispielsweise beurteilen, ob das Cookie gültig ist/globale Fehlerbehandlung...🎜🎜Erstellen Sie eine neue http-interceptor.ts-Datei (der Dateiname kann beliebig sein). )🎜🎜Das Wichtigste ist, die intercept-Methode von HttpInterceptor zu implementieren Programmierkenntnisse finden Sie unter:🎜Programmierunterricht 🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAngular Learning Chat Http (Fehlerbehandlung/Abfangen von Anfragen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!