آشنایی با httpresource
در httpResource عملکرد ، معرفی شده در زاویه 19.2.0 ، روش جدیدی برای واکشی داده ها در برنامه های زاویه ای ما با استفاده از قدرت سیگنال ها فراهم می کند. این کار را با استفاده از اشتراک ها و به روزرسانی ها به طور خودکار ، یکپارچه سازی با مدل برنامه نویسی واکنشی Angular ، به صورت یکپارچه سازی داده می شود. در httpResource عملکرد برای اولین بار در Angular 19.2.0 معرفی شد که در آن اولین استدلال آن URL است و آرگومان دوم اختیاری است HttpResourceOptionsبشر این پست وبلاگ به بررسی چگونگی equal گزینه در داخل HttpResourceOptions کار در زاویه 19.2.2 و زاویه 20.0.0 دیافراگم .2.
URL ارائه شده به httpResource می تواند یک رشته متن ساده باشد یا یک عملکرد پویاتر و واکنشی تر باشد. اگر از رشته متن برای URL استفاده می کنید ، عملکرد HttPresource یک بار HTTP را درخواست می کند. اگر از یک تابع واکنشی استفاده می کنید که برمی گردد undefined، httpResource عملکرد اجرای آن را به تأخیر می اندازد. اگر عملکرد واکنشی یک رشته متن را برگرداند ، httpResource عملکرد آن عملکرد را با استفاده از سیگنال ها کنترل می کند و هر زمان که URL تغییر کند ، منبع را به روز می کند.
خواص httpresourceoptions
httpresourceoptions دارای خواص زیر است:
- انژکتور: انژکتور که Httpresource را ایجاد می کند. هنگامی که از انژکتور مؤلفه استفاده می شود ، هنگام از بین رفتن مؤلفه ، httpresource به طور خودکار تمیز می شود.
- DefaultValue: مقدار پیش فرض httpresource هنگامی که در حالت بیکار ، خطا یا بارگذاری قرار دارد.
- تجزیه: تابع تبدیل برای تبدیل پاسخ HTTP قبل از تحویل نتیجه تبدیل شده به httpresource.
- مساوی: از عملکرد برابر برای مقایسه دو مجموعه از نتایج HTTPRESource استفاده می شود. اگر عملکرد مقایسه تعیین کند که آنها برابر هستند ، زاویه ای مانع از علامت گذاری سیگنال به عنوان کثیف می شود ، از چرخه تشخیص تغییر جلوگیری می کند و از به روزرسانی نمای می رود.
تنظیم زاویه
برای شروع ، حتماً CLI زاویه ای را نصب کرده اید. سپس ، می توانید یک پروژه جدید ایجاد کنید یا یک مورد موجود را به روز کنید. برای این پست وبلاگ ، ما از آخرین نسخه Angular 19 استفاده خواهیم کرد. می توانید با اجرای دستور زیر پروژه زاویه ای خود را به روز کنید:
ng update @angular/core @angular/cli
نمایش آزمایشی
در این نسخه ی نمایشی ، ما ایجاد خواهیم کرد jokeResource httpResource برای درخواست API شوخی برای ایجاد شوخی های برنامه نویسی تصادفی. این به ما کمک می کند تا چگونه equal گزینه کار می کند.
category = signal('');
injector = inject(Injector);
jokeResource = httpResource(() =>
this.category()
? `https://v2.jokeapi.dev/joke/Programming?type=single&idRange=1-5`
: undefined,
{
parse: jokeSchema.parse,
equal: (a, b) => jokeEquality(a, b),
defaultValue: {
id: -1,
error: false,
joke: '',
category: '',
},
injector: this.injector,
}
);
URL یک عملکرد واکنشی است که به آن بستگی دارد category سیگنال. در ابتدا ، category سیگنال خالی است ، بنابراین httpResource کاری نمی کند و بیکار است.
در حالی که httpresource بیکار است ، defaultValue یک شوخی خالی را نشان می دهد.
نصب ZOD
نسخه ی نمایشی از کتابخانه ZOD برای اعتبارسنجی پاسخ HTTP استفاده می کند و آن را به نوع شوخی تبدیل می کند. آن را با اجرا نصب کنید:
npm install --save-exact zod
تعریف طرح ZOD
در اینجا طرح ZOD که برای تعریف شکل داده های شوخی استفاده می شود:
import { z } from 'zod';
export const jokeSchema = z.object({
error: z.boolean(),
id: z.number(),
joke: z.string(),
category: z.string(),
});
export type Joke = z.infer<typeof jokeSchema>;
export type JokeAudit = Joke & { numUpdates: number };
در jokeSchema طرحواره شکل پاسخ را تعریف می کند و نوع را زیر پا می گذارد ، Jokeبشر JokeAudit است linkedSignalنوع ، و numUpdates ویژگی ها تعداد دفعات به روزرسانی سیگنال را ردیابی می کند.
توضیح کد: عملکرد برابری
در equal عملکرد برای بهینه سازی عملکرد بسیار مهم است. این شناسه های شوخی قبلی و جدید را مقایسه می کند. اگر این عملکرد مشخص کند که IDS برابر است ، زاویه ای از علامت گذاری سیگنال به عنوان کثیف جلوگیری می کند ، از چرخه تشخیص تغییر جلوگیری می کند و از به روزرسانی نمای می رود.
const jokeEquality = (a: Joke, b: Joke) => {
const isEqual = a.id == b.id;
console.log('isEqual', a.id, b.id, isEqual);
return isEqual;
};
در این مثال ، ما در حال مقایسه شوخی های شناسه آنها هستیم. اگر شناسه یکسان باشد ، عملکرد درست باز می گردد ، نشان می دهد که شوخی ها برابر هستند.
در jokeAudit است linkedSignal این بستگی به jokeResourceبشر در computation افزایش عملکرد numUpdates برای تأیید httpResourceعملکرد برابری ، سیگنال را فقط در صورت متفاوت بودن شناسه ها نشان می دهد.
jokeAudit = linkedSignal<{ joke: Joke }, JokeAudit>({
source: () => ({ joke: this.jokeResource.value() }),
computation: (source, previous) => {
const previousUpdates = previous?.value?.numUpdates;
const numUpdates = typeof previousUpdates !== 'undefined' ? previousUpdates : -1;
return {
...source.joke,
numUpdates: numUpdates + 1,
};
},
});
الگوی
این الگو داده های شوخی و یک دکمه را برای واکشی یک شوخی جدید نشان می دهد:
Programming Jokes:
{{ `Number of clicks: ${numClicked()}` }}
@if (jokeResource.hasValue()) {
@let value = jokeResource.value();
Id: {{ value.id }}
Category: {{ value.category }}
Joke: {{ value.joke }}
}
/>
Fresh Programming Joke with timestamp:
@let value = jokeAudit();
Id: {{ value.id }}
Category: {{ value.category }}
Joke: {{ value.joke }}
Update #: {{ value.numUpdates }}
ایجاد روش شوخی
در generateJoke روش دسته شوخی را تنظیم می کند و باعث بارگیری مجدد منابع می شود:
generateJoke() {
this.category.set('Programming');
this.numClicked.update((prev) => prev + 1);
this.jokeResource.reload();
}
این روش دسته را به “برنامه نویسی” تنظیم می کند. URL یک عملکرد واکنشی است که یک رشته را برمی گرداند. در httpResource برای بازیابی یک شوخی برنامه نویسی از روش بارگیری مجدد استفاده می کند. وقتی httpResourceسیگنال یک شوخی جدید دریافت می کند ، الگوی آن را با افزایشی نشان می دهد numUpdatesبشر
مزایای عملکرد httpresource و برابری
- بهینه سازی عملکرد: عملکرد برابری از چرخه تشخیص تغییر غیر ضروری جلوگیری می کند.
- واکشی داده های ساده: httpresource دست زدن به داده های ناهمزمان را با سیگنال ها ساده می کند.
- به روزرسانی های واکنشی: هنگام تغییر URL ، به طور خودکار نمایش را به روز می کند.
- ادغام با سیگنال ها: یکپارچه با مدل برنامه نویسی واکنشی Angular ادغام می شود.
آیا httpresource جایگزین httpclient می شود؟
نه ، httpResource به معنای جایگزینی نیست HttpClientبشر httpResource برای کار مستقیم با سیگنال ها برای واکشی داده ها و بهره مندی از مدل برنامه نویسی واکنشی Angular طراحی شده است. این پیچیدگی های مدیریت درخواست های HTTP ، وضعیت و رسیدگی به خطا را با استفاده از استفاده می کند HttpClient زیر کاپوت
با این حال ، HttpClient برای تعامل پیچیده تر HTTP مانند:
- ایجاد جهش (ارسال ، قرار دادن ، حذف درخواست ها)
- رسیدگی به خطای پیشرفته با اپراتور CatchError.
- برای دستیابی به بازیابی دسته ای با اپراتورهای RXJS مانند Forkjoins ترکیب کنید.
- با httpclient در لودر rxresource تماس بگیرید تا نقشه ای قابل مشاهده برای منبع را نقشه برداری کنید.
پایان
در httpResource عملکرد ، همراه با equal گزینه ، روشی قدرتمند و کارآمد برای مدیریت واکشی داده ها در برنامه های زاویه ای فراهم می کند. با اجازه دادن به شما در مقایسه با مقایسه داده ها ، Angular می تواند عملکرد را بهینه کند و به روزرسانی های غیر ضروری را کاهش دهد. این در زاویه ای 19.2.2 و زاویه 20.0.0 دیافراگم .2 سازگار خواهد بود.
منابع
