Angular Learning Chat Http (Pengendalian Ralat/Pemintas Permintaan)

Artikel ini akan membawa anda untuk terus belajar sudut, memahami secara ringkas pemprosesan Http dalam Angular, dan memperkenalkan pengendalian ralat dan meminta pemintasan. Saya harap ia akan membantu semua orang.

Penggunaan asas

Menggunakan HttpClient yang disediakan oleh Angular, anda boleh mengakses antara muka API dengan mudah. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Contohnya, buat http.service.ts baharu Anda boleh mengkonfigurasi alamat hos bagi persekitaran yang berbeza dalam environment

dan kemudian menyiarkannya proxy.config.json Bab 1 diperkenalkan

{
  "/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);
    }
  }
}

dan kemudian kita boleh menggunakannya dalam perniagaan seperti ini

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);
  }
}

Ini kelihatan sangat mudah dan serupa Axios

Berikut ialah beberapa penggunaan biasa

Ralat pengendalian

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

Minta pemintasan

Permintaan pemintasan adalah agak biasa

Sebagai contoh, anda boleh menentukan sama ada kuki itu sah/pengendalian ralat global di sini...

Buat fail http-interceptor.ts baharu (nama fail boleh sewenang-wenangnya)

Perkara yang paling penting ialah melaksanakan HttpInterceptor kaedah intercept

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);
        })
      );
  }
}

dan kemudian gunakan pemintas ini dalam penyedia dalam modul untuk berkuat kuasa

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

Lebih banyak pengaturcaraan Untuk pengetahuan berkaitan, sila layari: Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Angular Learning Chat Http (Pengendalian Ralat/Pemintas Permintaan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!