PiniaStore

Bir API ile iletişim kurmak ve taleplerimizin sonuçlarını kaydetmek için genellikle Pinia Store yazarız. Bazen, kullanıcı bir API'ye birkaç hızlı istekte bulunur. Önceki istekleri iptal edemezsek, yanıtların senkronizasyonu bozulabilir ve kullanıcıya sunulan veriler hatalı olabilir.

Diyelim ki aşağıdaki gibi bir store yapımız var…

Bu, bir dizi "Person" nesnesi içeren basit bir "People" deposudur. Verileri almak için bir API'ye istek gönderen bir "getPeople" eylemine sahiptir. Bir talebin ne zaman devam ettiğini anlamamız için izlenebilen bir "loader" işlemine sahiptir. İşlem, API isteğine iletilen bir "options" dizesini de kabul edecektir. Bu, isteği aramak ve filtrelemek için kullanılabilir.

Şimdi, bu verilerden sayfalara ayrılmış bir kişi listesi gösterdiğimizi hayal edin. Kullanıcı, "Sonraki Sayfa" düğmesini hızlı bir şekilde art arda birkaç kez karıştırmak için birkaç sayfa atlamak istiyor. Bu, farklı sayfalandırılmış sonuçlar için API'ye bir dizi istek gönderir. Sunucu, bu istekleri sıra dışı çözebilir ve sonuç olarak kullanıcı, yanlış kişilerin sayfasını görecektir.

Yapmak istediğimiz, önceki API isteklerini iptal etmek ve yalnızca en çok kırgın olana izin vermek. Bunu AbortController kullanarak yapabiliriz.

AbortController'ı saklayın

Öncelikle, AbortController'ı durumumuzda tutmak için bir özellik eklememiz gerekecek.

Önceki İstekleri İptal Et

Ardından, önceki bir isteğin API'ye gönderilip gönderilmediğini kontrol etmek ve gönderilmişse iptal etmek isteyeceğiz. Bunu "yükleniyor" işlemine bakarak yapabiliriz.

Her istekte yeni bir AbortController oluşturmamız gerektiğini unutmayın. Bu, yeni bir sinyal referansı ile yeni bir örnek elde etmemiz içindir.

İstekle Sinyali Geç

Şimdi kontrolörümüzün sinyalini istekle birlikte iletmemiz gerekiyor.

Hatayı Yoksay

Bir isteği iptal ettiğimizde, bir CancelError atacaktır. Bu hatayı göz ardı edebiliriz çünkü buna bilerek neden oluyoruz ve olmasını istediğimiz de bu. Bunu kullanıcıya göstermeye gerek yok.

People Store şimdi böyle görünmelidir.

Çözüm

Yeni AbortController, istekleri iptal etmek için standart ve yaygın olarak desteklenen bir JavaScript arayüzüdür. Pinia Store ile talepleri uygun şekilde ele alarak kullanıcıya her zaman doğru verilerin sunulmasını sağlıyoruz.!

LinkedIn

https://www.linkedin.com/in/yakup-tetik-8543671b4/

GitHub

https://github.com/yakuptetik