AbortController Kullanımı

Bugün saat 08:36 OP

Konuyu Açan #0

AbortController, JavaScript’te özellikle asenkron işlemlerin yönetimi için oldukça yararlı bir yapıdır. Özellikle fetch API ile yapılan ağ isteklerini iptal etmek için kullanılır. Bu, uygulamanızın performansını artırmak ve gereksiz ağ trafiğini önlemek açısından önemlidir. İşte AbortController'ın nasıl kullanılacağına dair detaylı bir inceleme.

Öncelikle, AbortController bir nesne olarak tanımlanır ve bu nesne aracılığıyla oluşturulan abort sinyali, ihtiyaç duyulduğunda herhangi bir asenkron işlemi iptal etmenizi sağlar. Kullanım şekli genellikle şu adımları içerir:

AbortController Nesnesinin Oluşturulması: Öncelikle bir AbortController nesnesi oluşturmalısınız.

CODE

12
   const controller = new AbortController();

Abort Sinyalinin Alınması: Bu nesne ile birlikte bir abort sinyali elde edilir. Bu sinyal, iptal işlemi için kullanılır.

CODE

12
   const signal = controller.signal;

Fetch İsteği ile Kullanım: Fetch API çağrılarında bu sinyali kullanabilirsiniz. Örneğin, aşağıdaki gibi bir istek yapabilirsiniz:

CODE

12345678910111213141516
   fetch('https://api.example.com/data', { signal })
       .then(response => {
           if (!response.ok) {
               throw new Error('Network response was not ok');
           }
           return response.json();
       })
       .then(data => console.log(data))
       .catch(error => {
           if (error.name === 'AbortError') {
               console.log('Request was aborted');
           } else {
               console.log('Fetch error: ', error);
           }
       });

İptal İşlemi: İhtiyaç duyulduğunda, örneğin bir butona tıklanmasıyla, işlemi iptal etmek için abort() metodunu çağırabilirsiniz.

CODE

12
   controller.abort();

AbortController, modern tarayıcılar tarafından desteklenmektedir ve uygulama geliştirme sürecinde performans yönetimi açısından önemli bir araçtır. Özellikle kullanıcı etkileşimleri sırasında gereksiz ağ çağrılarını önlemek için etkili bir çözümdür. Bu yapı ile, kullanıcı deneyimini artırarak daha akıcı bir uygulama deneyimi sunabilirsiniz.

Benzer konular

İçeriği Şikayet Et