ادغام httpresource angular با httpinterceptors – جامعه dev

زاویه دار httpResource روشی قدرتمند و راحت برای کار با درخواست های HTTP ، به ویژه هنگام برخورد با منابعی مانند حباب و بافر آرایه فراهم می کند.

با این حال ، برنامه های کاربردی در دنیای واقعی اغلب به بیش از واکشی داده های اساسی نیاز دارند. ممکن است لازم باشد مدت زمان درخواست را وارد کنید ، هدرهای درخواست را تغییر دهید یا خطاهای جهانی را برطرف کنید. این جایی است که HttpInterceptors وارد شوید HttpInterceptors به شما امکان می دهد درخواست ها و پاسخ های HTTP را رهگیری و اصلاح کنید ، و یک روش متمرکز برای رسیدگی به نگرانی های متقابل به شما ارائه می دهد.

این پست وبلاگ نحوه ادغام را بررسی می کند httpResource با HttpInterceptorsبشر پس از httpResource از زاویه استفاده می کند HttpClient زیر کاپوت ، HttpInterceptors می تواند یکپارچه درخواست های انجام شده توسط httpResource، این امکان را برای شما فراهم می کند که منطق سفارشی را به فرآیند واگذاری داده خود اضافه کنید.

قبل از شیرجه زدن به کد ، بیایید Angular را به آخرین نسخه به روز کنیم. از این نوشتار ، آخرین نسخه 19.2.5 است. با اجرای دستور زیر می توانید بسته های Angular CLI و اصلی خود را به روز کنید:

ng update @angular/core @angular/cli

مثال: استفاده از HttpInterceptors با httpResource

در این مثال ، ما دو مورد استفاده را نشان خواهیم داد:

• مدت زمان درخواست ورود به سیستم: ما یک رهگیر ایجاد خواهیم کرد که مدت زمان لازم برای تکمیل درخواست و مدت زمان لازم را انجام می دهد.
• اصلاح درخواست ها: ما یک رهگیر ایجاد خواهیم کرد که درخواست های دریافت را برای حذف بدنه درخواست تغییر می دهد ، و به یک مسئله بالقوه در کجا می پردازیم httpResource ممکن است سهواً شامل بدنه ای در درخواست های GET (که قرار نیست بدن داشته باشد).

در اینجا کد وجود دارد:

1) رهگیری های HTTP ایجاد کنید
ابتدا ، رهگیری های خود را تعریف کنیم:

export const elapsed = signal(0);

export const loggingInterceptor: HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const startTime = Date.now();
  return next(req).pipe(
    finalize(() => {
      const endTime = Date.now();
      elapsed.set(endTime - startTime);
      console.log(`Round trip time is ${elapsed()} milliseconds.`);
    })
  );
};

export const requestInterceptor: HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const method = req.method || 'GET';

  // GET method does not have body
  if (method === 'GET' && req.body) {
    return next(req.clone({ body: null }));
  } else {
    return next(req);
  }
};

• ورود به سیستم: این رهگیری زمان لازم برای هر درخواست HTTP را اندازه گیری می کند. از آن استفاده می کند finalize اپراتور برای اطمینان از منطق زمان بندی بدون در نظر گرفتن اینکه درخواست موفقیت یا شکست می یابد ، اجرا می شود. زمان سپری شده در یک سیگنال ذخیره می شود و همچنین به کنسول وارد می شود.

• RequestInterceptor: این رهگیری مسئله بالقوه را با httpResource جایی که ممکن است یک بدن در درخواست دریافت گنجانده شود. از آنجا که درخواست های دریافتی نباید بدنه داشته باشند ، این درخواست رهگیری درخواست را کلون می کند و در صورت دریافت روش بدن را از بین می برد. این مانع از خطاهای سرور می شود. بدون این رهگیری ، httpResource درخواست های با بدن در درخواست دریافت منجر به پیام خطا مشابه می شود: “پاسخ شکست HTTP برای”': 0 خطای ناشناخته “.

2) رهگیری ها را پیکربندی کنید
در مرحله بعد ، برای استفاده از این رهگیرها باید برنامه خود را پیکربندی کنیم. ما وقتی این کار را می کنیم این کار را انجام می دهیم HttpClient:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([loggingInterceptor, requestInterceptor])
    ),
  ],
};

bootstrapApplication(AppComponent, appConfig);

• APPCONFIG: از تابع ارائه httpclient برای پیکربندی httpclient با رهگیرهای مشخص شده استفاده می شود. عملکرد درون گیرنده مجموعه ای از توابع رهگیری را می گیرد.

3) با استفاده از httpresource
حال ، بیایید ببینیم چگونه httpResource در مؤلفه ها استفاده می شود. ما دو مؤلفه ایجاد خواهیم کرد: یکی که یک حباب (یک فایل صوتی) و دیگری را که یک بافر آرایه (یک تصویر) را به دست می آورد ، می گیرد. ما همچنین در ابتدا با استفاده از بدن در درخواست GET ، خطایی را شبیه سازی خواهیم کرد.

3.1) با استفاده از httpresource.blob در httpresourceblobcomponent

import { Component, ChangeDetectionStrategy, computed, signal } from '@angular/core';
import { httpResource, HttpResourceRef } from '@angular/common/http';

export function makeResourceRefStatus(
  resourceRef: HttpResourceRef<unknown | undefined>
) {
  return {
    progress: computed(() => {
      if (resourceRef.progress()) {
        const progress = resourceRef.progress();
        return `${progress?.loaded}/${progress?.total}`;
      }
      return '';
    }),
    error: computed(() =>
      resourceRef.error() ? (resourceRef.error() as Error) : undefined
    ),
  };
}

• makeresourcerefstatus: این یک تابع یاور برای ساخت سیگنال های محاسبه شده پیشرفت و خطا است.

const PIKACHU_OGG_URL = 'https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/25.ogg';
@Component({
  selector: 'app-resource-blob',
  templateUrl: './httpresource-blob.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HttpResourceBlobComponent {
  audioUrl = PIKACHU_OGG_URL;
  audioSignal = signal('');

  audioResource = httpResource.blob(() =>
    this.audioSignal()
      ? {
          url: this.audioSignal(),
          reportProgress: true,
          body: { x: 'bad blob data' }, // Intentionally incorrect body for GET
        }
      : undefined
  );

  resourceRefStatus = makeResourceRefStatus(this.audioResource);
  audioProgress = this.resourceRefStatus.progress;
  audioError = this.resourceRefStatus.error;

  blobURL = computed(() =>
    this.audioResource.hasValue() ? URL.createObjectURL(this.audioResource.value()) : undefined
  );
}

   (click)="audioSignal.set(audioUrl)">Load blob data
  {{ `Url: ${audioSignal()}` }}
  {{ `Progress: ${audioProgress()}` }}
  @if (audioError()) {
    Error: {{ audioError()?.message }}
  } @else if (blobURL()) {
    Listen to Pikachu:
    
  }

• httpresourceblobcomponent: این مؤلفه از httpresource.blob برای واکشی یک فایل ogg از یک آدرس اینترنتی استفاده می کند و نتایج را نمایش می دهد. ما عمداً یک خاصیت بدن را به HttpResourceRequest گزینه ها ، که برای درخواست دریافت نادرست است. در صورت عدم حضور درخواست کننده ، این خطایی ایجاد می کند. این مؤلفه همچنین پیشرفت بارگیری و هرگونه خطایی را که رخ می دهد نشان می دهد.
  • Bloburl یک سیگنال محاسبه شده است که یک شیء URL را از حباب ایجاد می کند ، سپس آن را به عنصر صوتی اختصاص می دهد src ویژگی

3.2) با استفاده از httpresource.arraybuffer در httpresourcearraybuffercomponent

const PIKACHU_IMAGE_URL = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/25.png';

@Component({
  selector: 'app-resource-array-buffer',
  templateUrl: './httpresource-arraybuffer.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HttpResourceArrayBufferComponent {
  imageUrl = PIKACHU_IMAGE_URL;
  imageSignal = signal('');

  imgResource = httpResource.arrayBuffer(() =>
    this.imageSignal()
      ? {
          url: this.imageSignal(),
          reportProgress: true,
          method: 'GET',
          body: { x: 'bad arraybuffer data' }, // Intentionally incorrect body for GET
        }
      : undefined
  );

  resourceRefStatus = makeResourceRefStatus(this.imgResource);
  imgProgress = this.resourceRefStatus.progress;
  imgError = this.resourceRefStatus.error;

  bufferedImage = computed(() => {
    return this.imgResource.hasValue()
      ? URL.createObjectURL(new Blob([this.imgResource.value()]))
      : undefined;
  });
}

   (click)="imageSignal.set(imageUrl)">Load arrayBuffer data
  {{ `Url: ${imageSignal()}` }}
  {{ `Progress: ${imgProgress()}`}}
  @if (imgError()) {
    Error: {{ imgError()?.message }}
  } @else if (bufferedImage()) {
    Pikachu:
     [src]="bufferedImage()" />
  }

• httpresourcearraybuffercomponent: این مؤلفه از httpresource.arraybuffer برای واکشی یک فایل png از URL استفاده می کند و نتیجه را نمایش می دهد. ما عمداً یک خاصیت بدن را به HttpResourceRequest گزینه ها ، که برای درخواست دریافت نادرست است. در صورت عدم حضور درخواست کننده ، این خطایی ایجاد می کند. این مؤلفه همچنین پیشرفت بارگیری و هرگونه خطایی را که رخ می دهد نشان می دهد.
  • BufferedImage یک سیگنال محاسبه شده است که یک شیء URL را از Arraybuffer ایجاد می کند ، سپس آن را به عنصر IMG اختصاص می دهد src ویژگی

4) به مؤلفه های عمل در AppComponent مراجعه کنید
در AppComponent این دو مؤلفه را به هم پیوند می دهد تا آنها را در عمل نشان دهد.

@Component({
  selector: 'app-root',
  imports: [HttpResourceBlobComponent, HttpResourceArrayBufferComponent],
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent { }

// app.component.html

• این مؤلفه اصلی است که از httpresourceblobcomponent و httpresourcearraybuffercomponent استفاده می کند. این یک قانون افقی را نشان می دهد (
  

  ---

  ) جدا کردن آنها.

فواید

• رسیدگی به درخواست متمرکز: httpinterceptors یک روش متمرکز برای رسیدگی به نگرانی های متقابل مانند ورود به سیستم ، رسیدگی به خطا و درخواست تغییر ارائه می دهد. این باعث می شود کد مؤلفه شما تمیز و متمرکز بر نمایش داده ها باشد.
• مدولار: رهگیرها مدولار هستند و به راحتی می توان از خط لوله HTTP برنامه شما اضافه یا حذف شد.
• قابلیت استفاده مجدد: رهگیرها را می توان در چندین سرویس و مؤلفه ها استفاده کرد و باعث کاهش تکثیر کد می شود.
• استفاده از HTTPRESource ساده: رهگیرها می توانند پیچیدگی هایی مانند اصلاح درخواست ها را کنترل کنند و به شما امکان می دهند از HTTPRESOURCE با گزینه های پیکربندی تمیزتر در مؤلفه های خود استفاده کنید.
• پایان
• ادغام httpinterceptors با ساختارهای زیر سازه httpresource روشی قوی و انعطاف پذیر برای مدیریت درخواست های HTTP در برنامه های زاویه ای فراهم می کند. رهگیران شما را قادر می سازد تا نگرانی های متقابل را به طور مؤثر برطرف کنید ، در حالی که httpresource واکشی داده ها را برای انواع منابع خاص ساده می کند. با ترکیب این دو ویژگی قدرتمند ، می توانید برنامه های کارآمد ، قابل نگهداری و مقاوم در برابر خطا ایجاد کنید.

منابع