Panduan pemula ' s ke sudut: http

Tutorial sudut ini menunjukkan bangunan yang dapat dipelihara dan berskala HTTP permintaan pengendalian dalam satu aplikasi satu halaman. Memanfaatkan pakej @angular/common/http , kami akan merangkumi konsep teras seperti HTTPClient, Interceptors, dan RXJS untuk pengendalian ralat yang cekap dan pengurusan permintaan.

Struktur projek adalah seperti berikut (tersedia di GitHub - [masukkan pautan github di sini jika disediakan]):

 <code>-src --app ----child ------child.component.ts ----parent ------parent.component.ts ------parent.service.ts ----utility ------header.interceptor.ts ------response.interceptor.ts ------error.interceptor.ts ----app-routing.module.ts ----app.component.css ----app.component.ts ----app.module.ts --assets</code>

Menyediakan HTTP dalam sudut:

Pakej @angular/common/http menyediakan HttpClient untuk membuat permintaan HTTP. Ia memudahkan tugas seperti pos dan memadam permintaan, menyelaraskan pengendalian ralat, dan mengintegrasikan dengan lancar dengan pemerhatian RXJS. Import HttpClient ke dalam komponen dan perkhidmatan anda untuk menggunakan fungsinya.

Menggunakan Interceptors:

Interceptors adalah perkhidmatan sudut yang memintas permintaan dan respons HTTP. Mereka membolehkan anda menambah atau mengubah suai tajuk permintaan, mengendalikan kesilapan di tengah -tengah, dan menguruskan aliran kerja permintaan. Pelbagai pemintas boleh didaftarkan, menjadikannya sesuai untuk berskala.

Mendaftarkan pemintas:

Daftar pemintas sebagai penyedia dalam app.module.ts menggunakan token HTTP_INTERCEPTORS :

 Penyedia: [{menyediakan: http_interceptors, useclass:<interceptorname> , multi: true}]</interceptorname>

Anatomi Interceptor:

Kaedah intercept dalam pemintas menerima objek HttpRequest dan mengembalikan HttpHandler .

Contoh: Menambah pemintas header:

Pemintas header boleh menambah tajuk tersuai kepada semua permintaan keluar. Sebagai contoh, menambah tajuk projectCode :

 // header.interceptor.ts
import {suntikan} dari '@angular/core';
import {httpinterceptor, httprequest, httphandler, httpevent} dari '@angular/biasa/http';
import {Observable} dari 'rxjs';

@Injectable ()
HeaderInterceptor kelas eksport melaksanakan httpinterceptor {
  memintas (req: httprequest<any> , Seterusnya: httphandler): boleh dilihat <httpevent> > {
    const ModifiedReq = req.clone ({
      Headers: Req.Headers.Set ('ProjectCode', 'YourProjectCode')
    });
    kembali Next.Handle (ModifiedReq);
  }
} </httpevent></any>

Pengendalian ralat dengan pemintas:

error.interceptor.ts boleh melaksanakan pengendalian ralat yang mantap. Contoh ini mengambil semula permintaan yang ditetapkan bilangan kali sebelum menyebarkan ralat:

 // error.interceptor.ts
// ... (import modul yang diperlukan) ...

@Injectable ()
Kelas Eksport Kelas Implements Httpinterceptor {
  memintas (req: httprequest<any> , Seterusnya: httphandler): boleh dilihat <httpevent> > {
    kembali next.handle (req) .pipe (
      CatchError (error => {
        // Logik semula di sini ...
        pulangan pelempar (() => ralat); // Re-throw selepas pengambilan semula
      })
    );
  }
}</httpevent></any>

Bekerja dengan httpparams dan httpheaders:

HttpParams digunakan untuk menambah parameter pertanyaan untuk mendapatkan permintaan. Mereka tidak berubah, jadi gunakan kaedah set untuk pengubahsuaian. HttpHeaders menguruskan permintaan dan tajuk tindak balas, juga tidak berubah. Gunakan kaedah set untuk menambah atau mengubah suai tajuk.

 // parent.service.ts
import {httpparams, httpheaders} dari '@angular/biasa/http';

// ...

const params = httpparams baru () set ('halaman', pageno);
const headers = httpheaders baru (). set ('kandungan-jenis', 'aplikasi/json');

kembali this.http.get (this.url, {headers, params});

Menggunakan RXJS:

Pengendali RXJS seperti switchMap dan catchError adalah penting untuk menguruskan operasi HTTP tak segerak, menghalang permintaan pendua, dan mengendalikan kesilapan dengan anggun. Mereka memastikan pengendalian data yang cekap dan kestabilan aplikasi.

Tanggapan yang lebih baik ini memberikan penjelasan yang lebih berstruktur dan terperinci mengenai konsep HTTP sudut dan pelaksanaannya. Ingat untuk menggantikan ruang letak seperti [insert GitHub link here if provided] dan<interceptorname></interceptorname> dengan nilai sebenar.

Atas ialah kandungan terperinci Panduan pemula ' s ke sudut: http. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!