SolidJS uygulamalar\u0131n\u0131zda asenkron g\u00f6revleri y\u00f6netmek, iptal edilebilir API \u00e7a\u011fr\u0131lar\u0131 yapmak ve sunucu hatalar\u0131n\u0131 g\u00fcvenle tipli bir \u015fekilde ele almak i\u00e7in LazyPromise kullan\u0131m\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran bu modern yakla\u015f\u0131mlar\u0131 ad\u0131m ad\u0131m \u00f6\u011frenin.<\/p>\n

G\u00fcn\u00fcm\u00fcz\u00fcn interaktif web uygulamalar\u0131nda, kullan\u0131c\u0131lar s\u00fcrekli de\u011fi\u015fen bir deneyim beklerler. Bir arama kutusuna yaz\u0131 yazmaya ba\u015flad\u0131\u011f\u0131n\u0131zda an\u0131nda sonu\u00e7lar g\u00f6rmek, bir dosyay\u0131 y\u00fcklerken ilerleme \u00e7ubu\u011funu izlemek veya bir sayfadan ayr\u0131l\u0131rken arka plandaki gereksiz veri \u00e7ekme i\u015flemlerinin durduruldu\u011funu bilmek, modern web deneyiminin temel ta\u015flar\u0131d\u0131r. Peki, arka planda \u00e7al\u0131\u015fan ve art\u0131k ihtiyac\u0131m\u0131z olmayan bir veri iste\u011fi ne olacak? Ya da kullan\u0131c\u0131n\u0131n sayfay\u0131 terk etmesiyle anlams\u0131z hale gelen uzun s\u00fcreli bir i\u015flem? \u0130\u015fte tam bu noktada “iptal edilebilir asenkron i\u015flemler” kavram\u0131 devreye giriyor.<\/p>\n

\u0130ptal edilebilirlik, sadece performans a\u00e7\u0131s\u0131ndan de\u011fil, ayn\u0131 zamanda uygulama kaynaklar\u0131n\u0131n verimli kullan\u0131m\u0131 ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan da hayati bir \u00f6neme sahiptir. D\u00fc\u015f\u00fcnsenize, bir kullan\u0131c\u0131 arama kutusuna “SolidJS” yazd\u0131, sonra fikrini de\u011fi\u015ftirip “LazyPromise” yazd\u0131. \u0130lk “SolidJS” aramas\u0131 i\u00e7in yap\u0131lan API iste\u011fi hala sunucuya ula\u015f\u0131yor ve belki de b\u00fcy\u00fck bir veri setini geri d\u00f6nd\u00fcr\u00fcyor. Bu gereksiz i\u015flem, hem sunucu kaynaklar\u0131n\u0131 t\u00fcketir hem de istemcinin a\u011f bant geni\u015fli\u011fini me\u015fgul eder. En \u00f6nemlisi, sonu\u00e7lar geri d\u00f6nd\u00fc\u011f\u00fcnde, kullan\u0131c\u0131 zaten “LazyPromise” sonu\u00e7lar\u0131n\u0131 bekledi\u011fi i\u00e7in bu veriler tamamen g\u00f6z ard\u0131 edilir. Bu durum, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda daha belirgin bir sorun haline gelir.<\/p>\n

Ayr\u0131ca, bir kullan\u0131c\u0131 bir sayfadan di\u011ferine h\u0131zla ge\u00e7i\u015f yapt\u0131\u011f\u0131nda, \u00f6nceki sayfada ba\u015flat\u0131lan ancak hen\u00fcz tamamlanmam\u0131\u015f asenkron i\u015flemlerin durdurulmas\u0131 gerekir. Aksi takdirde, bu i\u015flemler tamamland\u0131\u011f\u0131nda bile uygulama belle\u011finde veya UI’da beklenmedik durumlar (memory leaks, race conditions, stale data) yaratabilirler. Bu t\u00fcr durumlar, uygulaman\u0131n kararl\u0131l\u0131\u011f\u0131n\u0131 bozar ve hata ay\u0131klamay\u0131 zorla\u015ft\u0131r\u0131r. \u0130\u015fte bu y\u00fczden, asenkron g\u00f6revleri programatik olarak durdurabilme yetene\u011fi, sa\u011flam ve duyarl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in vazge\u00e7ilmezdir. Bu makalede, SolidJS’in reaktif yap\u0131s\u0131n\u0131 LazyPromise’in g\u00fc\u00e7l\u00fc iptal mekanizmalar\u0131yla birle\u015ftirerek bu sorunlar\u0131 nas\u0131l a\u015fabilece\u011fimizi detayl\u0131ca inceleyece\u011fiz. Ayr\u0131ca, asenkron i\u015flemlerin di\u011fer \u00f6nemli bir y\u00f6n\u00fc olan sunucu hatalar\u0131n\u0131 tipli bir \u015fekilde ele alman\u0131n uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini nas\u0131l art\u0131raca\u011f\u0131n\u0131 da ele alaca\u011f\u0131z. Bu yakla\u015f\u0131mlar, modern web geli\u015ftirmenin en iyi pratikleri aras\u0131nda yer almaktad\u0131r.<\/p>\n

\n Uzman \u0130pucu: \u0130ptal edilebilir g\u00f6revler, \u00f6zellikle h\u0131zl\u0131 arama, otomatik tamamlama ve dosya y\u00fckleme gibi kullan\u0131c\u0131 etkile\u015fimlerinin yo\u011fun oldu\u011fu senaryolarda uygulaman\u0131z\u0131n duyarl\u0131l\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu sayede gereksiz a\u011f isteklerini keserek hem istemci hem de sunucu kaynaklar\u0131ndan tasarruf edebilirsiniz.\n <\/div>\n

SolidJS, Asenkron Programlama ve Hata Y\u00f6netimi Temelleri Nelerdir?<\/h2>\n
Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) bloklamadan veri \u00e7ekme, dosya i\u015fleme ve karma\u015f\u0131k hesaplamalar gibi i\u015flemleri ger\u00e7ekle\u015ftirmektir. Bu, asenkron programlaman\u0131n temelini olu\u015fturur. SolidJS, bu ba\u011flamda, reaktif ve y\u00fcksek performansl\u0131 bir UI k\u00fct\u00fcphanesi olarak \u00f6ne \u00e7\u0131kar. Ancak SolidJS’in kendisi, asenkron i\u015flemleri y\u00f6netmek i\u00e7in do\u011frudan bir mekanizma sunmaz; bunun yerine JavaScript’in yerle\u015fik Promise API’si ve Async\/Await s\u00f6zdizimi ile uyumlu bir \u015fekilde \u00e7al\u0131\u015f\u0131r. Verimli bir SolidJS uygulamas\u0131 i\u00e7in bu temelleri iyi anlamak kritik \u00f6neme sahiptir.<\/p>\n
Asenkron programlamada, bir i\u015flem genellikle hemen bir sonu\u00e7 d\u00f6nd\u00fcrmez, bunun yerine gelecekte bir zamanda tamamlanaca\u011f\u0131n\u0131 garanti eden bir “promise” d\u00f6nd\u00fcr\u00fcr. Bu promise, i\u015flemin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 (resolve<\/code>) veya bir hata ile kar\u015f\u0131la\u015f\u0131p kar\u015f\u0131la\u015fmad\u0131\u011f\u0131n\u0131 (reject<\/code>) temsil eder. JavaScript’in async\/await<\/code> s\u00f6zdizimi, bu promise’lerle \u00e7al\u0131\u015fmay\u0131 senkron koda benzer hale getirerek okunabilirli\u011fi art\u0131r\u0131r. Ancak, standart Promise<\/code> API’sinde do\u011frudan bir iptal mekanizmas\u0131 bulunmaz. Bir promise bir kez ba\u015flat\u0131ld\u0131\u011f\u0131nda, ya tamamlan\u0131r ya da bir hata ile sonu\u00e7lan\u0131r; ancak d\u0131\u015far\u0131dan durdurulamaz. Bu eksiklik, yukar\u0131da bahsetti\u011fimiz gibi gereksiz i\u015flemlerin birikmesine neden olabilir.<\/p>\n
Hata y\u00f6netimi ise asenkron programlaman\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. A\u011f istekleri, sunucu hatalar\u0131, yetkilendirme sorunlar\u0131 veya beklenmedik veri formatlar\u0131 gibi bir\u00e7ok nedenle ba\u015far\u0131s\u0131z olabilir. Bu hatalar\u0131 do\u011fru bir \u015fekilde yakalamak ve kullan\u0131c\u0131ya anlaml\u0131 geri bildirimler sunmak, uygulaman\u0131n g\u00fcvenilirli\u011fi ve kullan\u0131c\u0131 memnuniyeti i\u00e7in esast\u0131r. Geleneksel olarak, JavaScript’te hatalar try...catch<\/code> bloklar\u0131 veya promise’lerin .catch()<\/code> metodu ile y\u00f6netilir. Ancak bu yakla\u015f\u0131mlar genellikle genel hata mesajlar\u0131 sunar. \u00d6zellikle karma\u015f\u0131k kurumsal uygulamalarda, sunucudan d\u00f6nen hata tiplerini \u00f6nceden bilmek ve bunlara \u00f6zel tepkiler vermek (\u00f6rne\u011fin, “Kullan\u0131c\u0131 Ad\u0131 Zaten Kullan\u0131l\u0131yor” yerine genel bir “Hata Olu\u015ftu” mesaj\u0131 vermek) \u00e7ok daha verimli ve kullan\u0131c\u0131 dostudur. TypeScript, bu noktada devreye girerek, sunucu hata yan\u0131tlar\u0131n\u0131 tipli bir \u015fekilde modellememize ve b\u00f6ylece hatalar\u0131 daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde ele almam\u0131za olanak tan\u0131r.<\/p>\n
`Bu b\u00f6l\u00fcm\u00fcn geri kalan\u0131nda, tam da bu eksiklikleri gidermek i\u00e7in tasarlanm\u0131\u015f bir k\u00fct\u00fcphane olan LazyPromise’in ne oldu\u011funu ve tipli sunucu hatalar\u0131n\u0131n neden gerekli oldu\u011funu derinlemesine inceleyece\u011fiz. Bu kavramlar, SolidJS’in reaktif do\u011fas\u0131yla birle\u015fti\u011finde, hem performansl\u0131 hem de bak\u0131m\u0131 kolay uygulamalar geli\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n`

LazyPromise Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\nLazyPromise, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi “tembel” bir promise uygulamas\u0131d\u0131r. Standart JavaScript Promise’lerinin aksine, bir LazyPromise \u00f6rne\u011fi olu\u015fturuldu\u011funda i\u00e7erisindeki asenkron i\u015flem hemen ba\u015flamaz. Bunun yerine, i\u015flem yaln\u0131zca .then()<\/code> veya .catch()<\/code> metotlar\u0131 \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda tetiklenir. Bu “tembel ba\u015flatma” \u00f6zelli\u011fi, asenkron g\u00f6revleri gerekti\u011finde ba\u015flatma esnekli\u011fi sa\u011flar ve gereksiz kaynak t\u00fcketimini \u00f6nler. Ancak LazyPromise’in as\u0131l g\u00fcc\u00fc, iptal edilebilir olmas\u0131d\u0131r.<\/p>\n
LazyPromise, AbortController<\/code> ve AbortSignal<\/code> API’lerini kullanarak promise’lerin iptal edilebilirli\u011fini sa\u011flar. Bir AbortController<\/code> olu\u015fturdu\u011funuzda, bu size bir signal<\/code> nesnesi ve bir abort()<\/code> metodu sunar. signal<\/code> nesnesini, fetch istekleri gibi asenkron i\u015flemlere bir se\u00e7enek olarak ge\u00e7irebilirsiniz. E\u011fer controller.abort()<\/code> \u00e7a\u011fr\u0131l\u0131rsa, signal<\/code> nesnesi “aborted” durumuna ge\u00e7er ve bu sinyali dinleyen t\u00fcm i\u015flemler otomatik olarak iptal edilir. \u00d6rne\u011fin, bir fetch<\/code> iste\u011fine signal<\/code> parametresini verdi\u011finizde, istek sunucudan yan\u0131t gelmeden iptal edilebilir ve bir AbortError<\/code> f\u0131rlat\u0131r.<\/p>\n
LazyPromise, bu mekanizmay\u0131 kendi b\u00fcnyesinde bar\u0131nd\u0131r\u0131r. Bir LazyPromise olu\u015ftururken, i\u015flevinize bir signal<\/code> nesnesi ve bir controller<\/code> nesnesi ge\u00e7irilir. Bu sayede, promise i\u00e7inde uzun s\u00fcreli bir i\u015flem ba\u015flatabilir ve bu i\u015flemin durumunu izleyebilirsiniz. E\u011fer d\u0131\u015far\u0131dan promise’in .cancel()<\/code> metodu \u00e7a\u011fr\u0131l\u0131rsa, LazyPromise otomatik olarak i\u00e7erisindeki AbortController<\/code>‘\u0131 kullanarak ili\u015fkili t\u00fcm i\u015flemleri iptal eder. Bu, \u00f6zellikle kullan\u0131c\u0131 aray\u00fcz\u00fc etkile\u015fimleriyle tetiklenen API \u00e7a\u011fr\u0131lar\u0131nda veya uzun s\u00fcreli hesaplamalarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Kullan\u0131c\u0131 bir i\u015flem devam ederken ba\u015fka bir eylem ba\u015flatt\u0131\u011f\u0131nda, \u00f6nceki i\u015flemin kolayca durdurulmas\u0131n\u0131 sa\u011flar ve b\u00f6ylece yar\u0131\u015f ko\u015fullar\u0131n\u0131n (race conditions) ve gereksiz kaynak kullan\u0131m\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n
\u00d6zetle, LazyPromise’in temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n
\nTembel Ba\u015flatma:<\/b> \u0130\u015flem, .then()<\/code> veya .catch()<\/code> \u00e7a\u011fr\u0131lana kadar ba\u015flamaz.<\/li>\n
\u0130ptal Edilebilirlik:<\/b> .cancel()<\/code> metodu ile devam eden asenkron i\u015flemler durdurulabilir.<\/li>\n
AbortController Entegrasyonu:<\/b> Modern taray\u0131c\u0131 API’leri ile uyumlu bir iptal mekanizmas\u0131 sunar.<\/li>\n
SolidJS ile Uyumlu:<\/b> Reaktif SolidJS uygulamalar\u0131nda, \u00f6zellikle createResource<\/code> veya createEffect<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda g\u00fc\u00e7l\u00fc bir sinerji olu\u015fturur.<\/li>\n<\/ul>\nTipli Sunucu Hatalar\u0131 Neden Gerekli?<\/h3>\nWeb uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini ve geli\u015ftirici verimlili\u011fini art\u0131ran en \u00f6nemli fakt\u00f6rlerden biri, hata y\u00f6netiminin sa\u011flam ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131d\u0131r. Sunucu taraf\u0131nda meydana gelen hatalar, a\u011f kesintileri, do\u011frulama sorunlar\u0131, yetkilendirme yetersizlikleri veya sunucu taraf\u0131ndaki i\u00e7 hatalar gibi \u00e7e\u015fitli nedenlerle ortaya \u00e7\u0131kabilir. Bu hatalar\u0131 yakalamak ve kullan\u0131c\u0131ya do\u011fru bilgiyi sunmak, uygulaman\u0131z\u0131n kalitesini do\u011frudan etkiler. \u0130\u015fte tam bu noktada, “tipli sunucu hatalar\u0131” kavram\u0131 devreye girer.<\/p>\n
Geleneksel olarak, sunucu hatalar\u0131 genellikle genel HTTP durum kodlar\u0131 (\u00f6rne\u011fin, 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Internal Server Error) ve bazen basit bir JSON objesi i\u00e7inde bir mesajla ({ \"message\": \"Bir hata olu\u015ftu\" }<\/code>) temsil edilir. Ancak bu yakla\u015f\u0131m, istemci taraf\u0131nda hatan\u0131n ger\u00e7ek nedenini programatik olarak anlamay\u0131 ve buna \u00f6zel bir UI veya i\u015f mant\u0131\u011f\u0131 uygulamay\u0131 zorla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir formda “Bu e-posta adresi zaten kullan\u0131mda” hatas\u0131 ile “\u015eifre \u00e7ok k\u0131sa” hatas\u0131 aras\u0131nda ayr\u0131m yapmak isterseniz, sadece genel bir hata mesaj\u0131 yeterli olmayacakt\u0131r.<\/p>\n
Tipli sunucu hatalar\u0131, TypeScript’in g\u00fcc\u00fcn\u00fc kullanarak sunucudan d\u00f6nen hata yan\u0131tlar\u0131n\u0131 belirli aray\u00fczler (interface) veya tipler (type) arac\u0131l\u0131\u011f\u0131yla modellememizi sa\u011flar. Bu, istemci taraf\u0131nda gelen hata nesnesinin yap\u0131s\u0131n\u0131 \u00f6nceden bilmemize olanak tan\u0131r. B\u00f6ylece, gelen hata yan\u0131t\u0131n\u0131 g\u00fcvenli bir \u015fekilde kontrol edebilir, farkl\u0131 hata tiplerine g\u00f6re farkl\u0131 UI elementleri g\u00f6sterebilir veya farkl\u0131 i\u015f ak\u0131\u015flar\u0131n\u0131 tetikleyebiliriz. \u00d6rne\u011fin, bir ValidationError<\/code> tipinde bir hata gelirse, bu hatan\u0131n i\u00e7erdi\u011fi spesifik alan hatalar\u0131n\u0131 formdaki ilgili input alanlar\u0131n\u0131n alt\u0131na yerle\u015ftirebiliriz. E\u011fer bir UnauthorizedError<\/code> gelirse, kullan\u0131c\u0131y\u0131 oturum a\u00e7ma sayfas\u0131na y\u00f6nlendirebiliriz.<\/p>\n
Tipli sunucu hatalar\u0131 kullanman\u0131n avantajlar\u0131:<\/p>\n
\nGeli\u015ftirici Deneyimi:<\/b> Hatalar\u0131n yap\u0131s\u0131n\u0131 net bir \u015fekilde bilmek, hata ay\u0131klama ve y\u00f6netimini kolayla\u015ft\u0131r\u0131r. Otomatik tamamlama (autocomplete) ve tip g\u00fcvenli\u011fi sayesinde hatalar\u0131 daha h\u0131zl\u0131 ve hatas\u0131z bir \u015fekilde i\u015fleyebilirsiniz.<\/li>\n
Kullan\u0131c\u0131 Deneyimi:<\/b> Kullan\u0131c\u0131lara daha spesifik, anla\u015f\u0131l\u0131r ve eyleme ge\u00e7irilebilir hata mesajlar\u0131 sunulmas\u0131n\u0131 sa\u011flar. Bu da hayal k\u0131r\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r ve uygulaman\u0131n kullan\u0131labilirli\u011fini art\u0131r\u0131r.<\/li>\n
Kod G\u00fcvenli\u011fi:<\/b> TypeScript’in tip kontrol\u00fc sayesinde, hatalar\u0131 yanl\u0131\u015f yorumlama veya eksik i\u015fleme olas\u0131l\u0131\u011f\u0131 azal\u0131r. \u00c7al\u0131\u015fma zaman\u0131 hatalar\u0131 yerine derleme zaman\u0131 hatalar\u0131 yakalan\u0131r.<\/li>\n
Bak\u0131m Kolayl\u0131\u011f\u0131:<\/b> Hata i\u015fleme mant\u0131\u011f\u0131 daha mod\u00fcler ve okunabilir hale gelir, bu da uygulaman\u0131n uzun vadeli bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\nSonu\u00e7 olarak, tipli sunucu hatalar\u0131, modern ve g\u00fcvenilir web uygulamalar\u0131 geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. SolidJS ve TypeScript ile bu yakla\u015f\u0131m\u0131 benimseyerek, uygulaman\u0131z\u0131n hata durumlar\u0131nda bile profesyonel ve duyarl\u0131 kalmas\u0131n\u0131 sa\u011flayabiliriz.<\/p>\n
SolidJS ve LazyPromise ile \u0130ptal Edilebilir \u0130stekler Nas\u0131l Yap\u0131l\u0131r?<\/h2>\nSolidJS’in reaktif yap\u0131s\u0131 ve LazyPromise’in iptal edilebilir Promise mekanizmas\u0131n\u0131 bir araya getirerek, karma\u015f\u0131k asenkron i\u015flemleri etkili bir \u015fekilde y\u00f6netebiliriz. Bu b\u00f6l\u00fcm, SolidJS bile\u015fenlerinizde LazyPromise’i nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6stermeye odaklanacakt\u0131r. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015f\u0131lan durumlar \u00fczerinden \u00f6rnekler sunarak, bu kombinasyonun g\u00fcc\u00fcn\u00fc g\u00f6zler \u00f6n\u00fcne serece\u011fiz. Ba\u015flang\u0131\u00e7 olarak, LazyPromise’i projenize dahil etmeniz gerekecektir. Bunun i\u00e7in basit bir npm veya yarn komutu yeterlidir:<\/p>\n
\nnpm install lazy-promise\n# veya\nyarn add lazy-promise\n    <\/pre>\n<\/code><\/p>\n
Kurulum tamamland\u0131ktan sonra, LazyPromise'i SolidJS ortam\u0131nda kullanmaya ba\u015flayabiliriz. En yayg\u0131n senaryolardan biri, bir kullan\u0131c\u0131 aray\u00fcz\u00fc etkile\u015fimi (\u00f6rne\u011fin bir d\u00fc\u011fmeye t\u0131klama veya bir input alan\u0131na yazma) sonucunda bir API iste\u011fi ba\u015flatmakt\u0131r. E\u011fer kullan\u0131c\u0131 ayn\u0131 eylemi \u00e7ok h\u0131zl\u0131 bir \u015fekilde tekrarlarsa veya i\u015flemi ba\u015flatt\u0131ktan sonra vazge\u00e7erse, \u00f6nceki isteklerin iptal edilmesi gereklili\u011fi do\u011far. \u0130\u015fte bu noktada LazyPromise'in iptal yetene\u011fi devreye girer.<\/p>\n
SolidJS'te asenkron veri \u00e7ekme i\u015flemlerini y\u00f6netmek i\u00e7in genellikle createResource<\/code> veya createEffect<\/code> kancalar\u0131n\u0131 kullan\u0131r\u0131z. createResource<\/code>, \u00f6zellikle verilerin UI'da g\u00f6sterilece\u011fi ve y\u00fckleme\/hata durumlar\u0131n\u0131n kolayca y\u00f6netilece\u011fi durumlar i\u00e7in tasarlanm\u0131\u015ft\u0131r. LazyPromise ile createResource<\/code>'\u0131 kullanarak, veri \u00e7ekme i\u015flemlerini iptal edilebilir hale getirebiliriz. B\u00f6ylece, bir kayna\u011f\u0131n de\u011feri de\u011fi\u015fti\u011finde veya bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda \u00f6nceki isteklerin iptal edilmesini sa\u011flayabiliriz.<\/p>\n
Bu yakla\u015f\u0131m, \u00f6zellikle h\u0131zl\u0131 ve duyarl\u0131 bir kullan\u0131c\u0131 deneyimi sunmak istedi\u011finizde \u00e7ok de\u011ferlidir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir arama terimini h\u0131zla de\u011fi\u015ftirdi\u011finde, her yeni karakter giri\u015finde yeni bir arama iste\u011fi tetiklenir. \u00d6nceki isteklerin iptal edilmemesi, sunucuya gereksiz y\u00fck bindirir ve istemci taraf\u0131nda g\u00fcncel olmayan verilerin g\u00f6sterilmesine neden olabilecek yar\u0131\u015f ko\u015fullar\u0131 yarat\u0131r. LazyPromise, bu t\u00fcr durumlar\u0131 zarif\u00e7e \u00e7\u00f6zerek uygulaman\u0131z\u0131n daha kararl\u0131 ve verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. \u015eimdi, LazyPromise'in temel kullan\u0131m\u0131na ve API isteklerini iptal etme senaryolar\u0131na daha yak\u0131ndan bakal\u0131m.<\/p>\n
Temel Bir LazyPromise Kullan\u0131m\u0131<\/h3>\nLazyPromise'in temel kullan\u0131m\u0131n\u0131 anlamak i\u00e7in basit bir \u00f6rnekle ba\u015flayal\u0131m. Bir bile\u015fen i\u00e7inde bir d\u00fc\u011fmeye t\u0131klama olay\u0131yla tetiklenen bir veri \u00e7ekme i\u015flemi d\u00fc\u015f\u00fcnelim. Amac\u0131m\u0131z, kullan\u0131c\u0131 d\u00fc\u011fmeye tekrar t\u0131klad\u0131\u011f\u0131nda \u00f6nceki iste\u011fi iptal etmektir.<\/p>\n
\nimport { createSignal, createEffect } from 'solid-js';\nimport { LazyPromise } from 'lazy-promise';\n\nfunction FetchComponent() {\n  const [data, setData] = createSignal(null);\n  const [loading, setLoading] = createSignal(false);\n  const [error, setError] = createSignal(null);\n\n  \/\/ LazyPromise'i saklamak i\u00e7in bir sinyal\n  const [currentPromise, setCurrentPromise] = createSignal(null);\n\n  const fetchData = async () => {\n    \/\/ \u00d6nceki iste\u011fi iptal et\n    const prevPromise = currentPromise();\n    if (prevPromise) {\n      prevPromise.cancel();\n      console.log(\"\u00d6nceki istek iptal edildi.\");\n    }\n\n    setLoading(true);\n    setError(null);\n    setData(null);\n\n    \/\/ Yeni bir LazyPromise olu\u015ftur\n    const newPromise = new LazyPromise(async (resolve, reject, signal) => {\n      try {\n        console.log(\"Yeni istek ba\u015flat\u0131ld\u0131...\");\n        \/\/ API \u00e7a\u011fr\u0131s\u0131 i\u00e7in fetch kullan\u0131rken signal'i iletin\n        const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1', { signal });\n        \n        \/\/ Yan\u0131t ba\u015far\u0131l\u0131 de\u011filse hata f\u0131rlat\n        if (!response.ok) {\n          throw new Error(HTTP Hata! Durum: ${response.status}<\/code>);\n        }\n        \n        const result = await response.json();\n        resolve(result);\n      } catch (err) {\n        \/\/ \u0130ptal hatas\u0131n\u0131 \u00f6zel olarak ele al\u0131n\n        if (err.name === 'AbortError') {\n          console.log(\"\u0130stek iptal edildi\u011fi i\u00e7in yakaland\u0131:\", err.message);\n          \/\/ \u0130ptal edilen istekler i\u00e7in hata g\u00f6stermemize gerek yok\n          \/\/ setLoading(false) yap\u0131labilir ama genellikle zaten bir sonraki istek devreye girer.\n          return; \/\/ \u0130ptal edilen istekler i\u00e7in Promise'i reject etmeyin\n        }\n        reject(err);\n      }\n    });\n\n    setCurrentPromise(newPromise);\n\n    newPromise\n      .then(res => {\n        setData(res);\n        setLoading(false);\n        console.log(\"\u0130stek tamamland\u0131:\", res);\n      })\n      .catch(err => {\n        \/\/ E\u011fer bir \u00f6nceki istek iptal edildiyse, bu catch blo\u011fu \u00e7al\u0131\u015fmayabilir.\n        \/\/ Ama di\u011fer hatalar (a\u011f hatas\u0131 vb.) burada yakalan\u0131r.\n        setError(err.message);\n        setLoading(false);\n        console.error(\"\u0130stek hatas\u0131:\", err);\n      });\n  };\n\n  return (\n    \n

Dosya Y\u00fckleyici<\/h2>\n \n {file() && Se\u00e7ilen dosya: {file()?.name}<\/strong><\/p>}\n\n

Dosya Y\u00fckleyici<\/h2>\n \n {file() &&
Se\u00e7ilen dosya: {file()?.name}<\/strong><\/p>}\n\n