Angular Learning Chat Http (Pengendalian Ralat/Pemintas Permintaan)-tutorial js-php.cn

Angular Learning Chat Http (Pengendalian Ralat/Pemintas Permintaan)

青灯夜游

Lepaskan： 2022-12-16 19:36:15

ke hadapan

2488 orang telah melayarinya

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.

Angular Learning Chat Http (Pengendalian Ralat/Pemintas Permintaan)

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"
    }
  }
}

Salin selepas log masuk

import { HttpClient } from &#39;@angular/common/http&#39;;
import { Injectable } from &#39;@angular/core&#39;;
import { environment } from &#39;@env&#39;;

@Injectable({ providedIn: &#39;root&#39; })
export class HttpService {
  constructor(private http: HttpClient) {}

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

Salin selepas log masuk

dan kemudian kita boleh menggunakannya dalam perniagaan seperti ini

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

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

Salin selepas log masuk

Ini kelihatan sangat mudah dan serupa Axios

Berikut ialah beberapa penggunaan biasa

Ralat pengendalian

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

Salin selepas log masuk

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 &#39;@angular/common/http&#39;;
import { Injectable } from &#39;@angular/core&#39;;
import { Observable, of, throwError } from &#39;rxjs&#39;;
import { filter, catchError } from &#39;rxjs/operators&#39;;
import { HttpEvent } from &#39;@angular/common/http&#39;;

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

Salin selepas log masuk

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 {}

Salin selepas log masuk

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!