httpResource ile Reaktif Veri Alma

httpResource, HttpClient etrafında size istek durumunu ve yanıtı sinyal olarak veren reaktif bir sarmalayıcıdır. Bu sinyalleri computed, effect, linkedSignal veya herhangi bir reaktif API ile kullanabilirsiniz. HttpClient üzerine inşa edildiğinden, httpResource yakalayıcılar gibi aynı özelliklerin tümünü destekler.

Angular'ın resource kalıbı hakkında daha fazla bilgi için resource ile asenkron reaktivite bölümüne bakın.

httpResource Kullanımı

Bir URL döndürerek bir HTTP kaynağı tanımlayabilirsiniz:

userId = input.required<string>();

user = httpResource(() => `/api/user/${userId()}`); // Argüman olarak reaktif bir fonksiyon

httpResource reaktiftir, yani bağlı olduğu sinyallerden herhangi biri (örneğin userId) değiştiğinde, kaynak yeni bir HTTP isteği gönderecektir. Zaten bekleyen bir istek varsa, kaynak yeni bir istek göndermeden önce bekleyen isteği iptal eder.

Daha gelişmiş istekler için, HttpClient tarafından alınan isteğe benzer bir istek nesnesi tanımlayabilirsiniz. İstek nesnesinin reaktif olması gereken her özelliği bir sinyal ile oluşturulmalıdır.

user = httpResource(() => ({
  url: `/api/user/${userId()}`,
  method: 'GET',
  headers: {
    'X-Special': 'true',
  },
  params: {
    'fast': 'yes',
  },
  reportProgress: true,
  transferCache: true,
  keepalive: true,
  mode: 'cors',
  redirect: 'error',
  priority: 'high',
  cache: 'force-cache',
  credentials: 'include',
  referrer: 'no-referrer',
  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY=',
  referrerPolicy: 'no-referrer',
}));

httpResource'un sinyalleri, hangi öğelerin görüntüleneceğini kontrol etmek için şablonda kullanılabilir.

@if(user.hasValue()) {
  <user-details [user]="user.value()">
} @else if (user.error()) {
  <div>Could not load user information</div>
} @else if (user.isLoading()) {
  <div>Loading user info...</div>
}

Response Türleri

Varsayılan olarak, httpResource yanıtı JSON olarak döndürür ve ayrıştırır. Ancak, httpResource üzerindeki ek fonksiyonlarla alternatif dönüş türleri belirtebilirsiniz:

httpResource.text(() => ({ … })); // value() içinde bir string döndürür

httpResource.blob(() => ({ … })); // value() içinde bir Blob nesnesi döndürür

httpResource.arrayBuffer(() => ({ … })); // value() içinde bir ArrayBuffer döndürür

Response Ayrıştırma ve Doğrulama

Veri alırken, yanıtları genellikle Zod veya Valibot gibi popüler açık kaynak kütüphaneleri kullanarak önceden tanımlanmış bir şemaya göre doğrulamak isteyebilirsiniz. Doğrulama kütüphanelerini bu şekilde httpResource ile bir parse seçeneği belirterek entegre edebilirsiniz. parse fonksiyonunun dönüş türü, kaynağın value türünü belirler.

Aşağıdaki örnek, StarWars API'sinden gelen yanıtı ayrıştırmak ve doğrulamak için Zod kullanır. Kaynak daha sonra Zod'un ayrıştırmasının çıktı türü ile aynı şekilde tiplenir.

const starWarsPersonSchema = z.object({
  name: z.string(),
  height: z.number({coerce: true}),
  edited: z.string().datetime(),
  films: z.array(z.string()),
});

export class CharacterViewer {
  id = signal(1);

  swPersonResource = httpResource(() => `https://swapi.info/api/people/${this.id()}`, {
    parse: starWarsPersonSchema.parse,
  });
}

httpResource'u Test Etme

httpResource, HttpClient etrafında bir sarmalayıcı olduğundan, httpResource'u HttpClient ile aynı API'lerle test edebilirsiniz. Ayrıntılar için HttpClient Testi bölümüne bakın.

Aşağıdaki örnek, httpResource kullanan kod için bir birim testini gösterir.

TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()],
});

const id = signal(0);
const mockBackend = TestBed.inject(HttpTestingController);
const response = httpResource(() => `/data/${id()}`, {injector: TestBed.inject(Injector)});
TestBed.tick(); // Effect'i tetikler
const firstRequest = mockBackend.expectOne('/data/0');
firstRequest.flush(0);

// Değerlerin httpResource'a yayıldığından emin olur
await TestBed.inject(ApplicationRef).whenStable();

expect(response.value()).toEqual(0);