Hiç "408 durum koduyla istek başarısız" veya "ağ hatası" gibi hatalarla sonuçlanan bir API isteğinin zaman aşımına uğraması hayal kırıklığıyla karşılaştınız mı?

Axios'taki zaman aşımı seçeneği, bir sunucu yanıtı için bir hata atmadan önce ne kadar süre bekleneceğini belirtmenize olanak tanır ve uygulamanızın süresiz olarak takılmasını engeller.

Ancak, doğru zaman aşımı değerini seçmek ve zaman aşımlarını zarif bir şekilde ele almak zor olabilir. İşte bu noktada, bir API test ve hata ayıklama platformu olan Apidog, axios isteklerinizi zaman aşımıyla test edebilir ve hata ayıklayabilir.

💡

API tasarımı, hata ayıklama, geliştirme, sahte veri oluşturma ve ücretsiz test için entegre bir platform olan Apidog'u kullanarak axios isteklerinizi zaman aşımıyla test edin ve hata ayıklayın.

button

Axios Zaman Aşımı Nedir ve Neden Önemlidir?

Axios zaman aşımını nasıl ele alacağımızın ayrıntılarına girmeden önce, bunun ne olduğunu ve neden önemli olduğunu anlayalım.

Axios zaman aşımı, axios'un isteği iptal etmeden ve bir hata atmadan önce sunucudan bir yanıt bekleyeceği maksimum süredir. Axios'taki varsayılan zaman aşımı değeri 0'dır, bu da zaman aşımı olmadığı ve axios'un bir yanıt için süresiz olarak bekleyeceği anlamına gelir.

Bir zaman aşımı değeri ayarlayarak, axios'a belirli bir süre sonra istekten vazgeçmesini ve bir hata atmasını söyleyebilirsiniz. Bu şekilde, hatayı kodunuzda ele alabilir ve kullanıcıya aşağıdakiler gibi bir yedek veya alternatif seçenek sunabilirsiniz:

Bir hata mesajı veya bir yükleme göstergesi gösterme
Kullanıcıdan tekrar denemesini veya sayfayı yenilemesini isteme
Kullanıcıyı başka bir sayfaya veya hizmete yönlendirme
Hatayı günlüğe kaydetme veya geliştiriciye bir bildirim gönderme

Hatayı ele alarak, kullanıcı deneyimini iyileştirebilir, kaynakları koruyabilir ve güvenlik riskini önleyebilirsiniz. Ayrıca, gereksiz veya yinelenen isteklerden kaçınabilir ve uygulamanızın performansını optimize edebilirsiniz.

Ancak, axios'ta zaman aşımı değerini nasıl ayarlarsınız? Ve meydana geldiğinde hatayı nasıl ele alırsınız? Bir sonraki bölümlerde bunu göreceğiz.

Axios'ta Zaman Aşımı Seçeneği Nasıl Ayarlanır

Axios'ta zaman aşımı seçeneğini ayarlamak çok kolay ve basittir. Zaman aşımı değerini, axios.get, axios.post, axios.put vb. gibi axios istek yöntemine geçirdiğiniz yapılandırma nesnesinin bir özelliği olarak milisaniye cinsinden belirtebilirsiniz.

Örneğin, belirli bir API uç noktasına yapılan bir GET isteği için zaman aşımı değerini 5 saniye (5000 milisaniye) olarak ayarlamak istiyorsanız, şuna benzer bir şey yazabilirsiniz:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Alternatif olarak, axios.defaults nesnesini kullanarak zaman aşımı değerini tüm axios istekleri için genel olarak da ayarlayabilirsiniz. Örneğin, tüm axios istekleri için zaman aşımı değerini 5 saniye olarak ayarlamak istiyorsanız, şuna benzer bir şey yazabilirsiniz:

axios.defaults.timeout = 5000;

Ayrıca, özel bir zaman aşımı değeriyle bir axios örneği oluşturabilir ve bunu belirli istekler için kullanabilirsiniz. Örneğin, 10 saniyelik bir zaman aşımı değeriyle bir axios örneği oluşturmak ve bunu bazı istekler için kullanmak istiyorsanız, şuna benzer bir şey yazabilirsiniz:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Gördüğünüz gibi, axios'ta zaman aşımı seçeneğini ayarlamak çok basit ve esnektir. İhtiyaçlarınıza ve tercihlerinize bağlı olarak farklı istekler için özelleştirebilirsiniz.

Ancak, istekleriniz için doğru zaman aşımı değerini nasıl seçersiniz? Bir yanıttan vazgeçmeden önce ne kadar süre beklemelisiniz? Bu sorunun kesin bir cevabı yoktur, çünkü aşağıdakiler gibi birçok faktöre bağlıdır:

İsteğin türü ve amacı
Sunucunun ve ağın hızı ve güvenilirliği
Kullanıcının beklentisi ve toleransı
Yedek veya alternatif seçeneğin kullanılabilirliği ve uygulanabilirliği

Peki, zaman aşımı değerine ulaşıldığında ve istek iptal edildiğinde ne olur? Axios'ta zaman aşımı hatasını nasıl yakalar ve ele alırsınız? Bir sonraki bölümde bunu göreceğiz.

Axios'ta Zaman Aşımı Hatası Nasıl Yakalanır ve Ele Alınır

Zaman aşımı değerine ulaşıldığında ve istek iptal edildiğinde, axios bir hata atar; bunu kodunuzda yakalayabilir ve ele alabilirsiniz. Try/catch, promises veya async/await kullanarak axios isteklerinizi nasıl yazdığınıza bağlı olarak hatayı yakalamanın ve ele almanın farklı yolları vardır.

Try/Catch Kullanma

Axios isteklerinizi yazmak için try/catch kullanıyorsanız, hatayı catch bloğunda yakalayabilir ve buna göre ele alabilirsiniz. Örneğin, belirli bir API uç noktasına 5 saniyelik bir zaman aşımı değeriyle bir GET isteği yapmak için bir try/catch bloğu kullanıyorsanız, şuna benzer bir şey yazabilirsiniz:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
}

Ancak, hatanın bir zaman aşımı hatası mı yoksa başka bir tür hata mı olduğunu nasıl anlarsınız? Kontrol etmenin bir yolu, hata bir zaman aşımı hatasıysa 'ECONNABORTED' olarak ayarlanacak olan error.code özelliğini kullanmaktır. Örneğin, şuna benzer bir şey yazabilirsiniz:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
  if (error.code === 'ECONNABORTED') {
    // handle timeout error
    console.error('İstek zaman aşımına uğradı');
    // do something else, such as showing an error message or a retry button
  } else {
    // handle other types of errors
    console.error(error.message);
    // do something else, such as logging the error or sending a notification
  }
}

Gördüğünüz gibi, try/catch kullanmak, axios'ta zaman aşımı hatasını yakalamanın ve ele almanın basit ve etkili bir yoludur. Ancak, bazı tarayıcılar veya ortamlarda desteklenmeyebilecek async/await sözdiziminin kullanılmasını gerektirir. Axios isteklerinizi yazmak için daha uyumlu ve geleneksel bir yol kullanmak istiyorsanız, bunun yerine promises kullanabilirsiniz.

Promises Kullanma

Axios isteklerinizi yazmak için promises kullanıyorsanız, hatayı catch yönteminde yakalayabilir ve buna göre ele alabilirsiniz. Örneğin, belirli bir API uç noktasına 5 saniyelik bir zaman aşımı değeriyle bir GET isteği yapmak için bir promise zinciri kullanıyorsanız, şuna benzer bir şey yazabilirsiniz:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Hatayı bir zaman aşımı hatası olup olmadığını kontrol etmek için, daha önce olduğu gibi aynı error.code özelliğini kullanabilir ve bunu 'ECONNABORTED' ile karşılaştırabilirsiniz. Örneğin, şuna benzer bir şey yazabilirsiniz:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('İstek zaman aşımına uğradı');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  });

Gördüğünüz gibi, promises kullanmak, axios'ta zaman aşımı hatasını yakalamanın ve ele almanın bir başka kolay ve tanıdık yoludur. Ancak, özellikle bir dizide veya paralel olarak birden fazla axios isteğiniz varsa, iç içe geçmiş ve ayrıntılı bir kodla sonuçlanabilir. Axios isteklerinizi yazmak için daha modern ve zarif bir yol kullanmak istiyorsanız, bunun yerine async/await kullanabilirsiniz.

Async/Await Kullanma

Axios isteklerinizi yazmak için async/await kullanıyorsanız, hatayı bir try/catch bloğunda yakalayabilir ve buna göre ele alabilirsiniz. Bu, daha önce gördüğümüz yöntemle aynıdır, ancak bütünlük için burada tekrar edeceğim. Örneğin, belirli bir API uç noktasına 5 saniyelik bir zaman aşımı değeriyle bir GET isteği yapmak için bir async işlevi kullanıyorsanız, şuna benzer bir şey yazabilirsiniz:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // handle success
  } catch (error) {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('İstek zaman aşımına uğradı');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  }
}

Gördüğünüz gibi, async/await kullanmak, axios'ta zaman aşımı hatasını yakalamanın ve ele almanın temiz ve öz bir yoludur. Ancak, bazı tarayıcılar veya ortamlarda desteklenmeyebilecek async/await sözdiziminin kullanılmasını gerektirir. Axios isteklerinizi yazmak için daha uyumlu ve geleneksel bir yol kullanmak istiyorsanız, bunun yerine promises kullanabilirsiniz.

Bunlar, try/catch, promises veya async/await kullanarak axios'ta zaman aşımı hatasını yakalamanın ve ele almanın üç ana yoludur. Tercihinize ve durumunuza en uygun olanı seçebilir ve kodunuz boyunca tutarlı bir şekilde kullanabilirsiniz.

Ancak, axios isteklerinizi zaman aşımıyla nasıl test eder ve hata ayıklarsınız?

Apidog Kullanarak Axios İsteklerinizde Zaman Aşımıyla Nasıl Test ve Hata Ayıklama Yapılır

Apidog , API'lerinizi tasarlamanıza, hata ayıklamanıza, geliştirmenize, sahte veri oluşturmanıza ve test etmenize yardımcı olan güçlü ve kullanımı kolay bir platformdur. Tüm API ihtiyaçlarınız için tek noktadan çözüm haline getiren birçok özelliğe ve araca sahiptir.

button

Apidog'u açın ve yeni bir istek oluşturmak için "Yeni İstek" düğmesini tıklayın

Yöntem, URL, başlıklar, gövde vb. gibi isteğinizin ayrıntılarını girebileceğiniz bir istek düzenleyicisi göreceksiniz.

İsteği göndermek için "Gönder" düğmesini tıklayın

Durum, başlıklar, gövde, zaman vb. gibi yanıtın ayrıntılarını görebileceğiniz bir yanıt paneli göreceksiniz.

Apidog ile axios isteklerinizi zaman aşımıyla kolayca test edebilir ve hata ayıklayabilirsiniz.

Sonuç

Bu blog yazısında, mevcut en iyi uygulamaları ve araçları kullanarak axios zaman aşımını bir profesyonel gibi nasıl ele alacağımızı öğrendik. Şunları nasıl yapacağımızı gördük:

Axios'ta zaman aşımı seçeneğini ayarlayın ve farklı istekler için özelleştirin
Try/catch, promises veya async/await kullanarak axios'ta zaman aşımı hatasını yakalayın ve ele alın
API tasarımı, hata ayıklama, geliştirme, sahte veri oluşturma ve test için entegre bir platform olan Apidog'u kullanarak axios isteklerinizi zaman aşımıyla test edin ve hata ayıklayın

Bu adımları izleyerek, web uygulamalarınızın kullanıcı deneyimini, performansını ve güvenliğini iyileştirebilir ve sunucudan bir yanıt için süresiz olarak beklemenin hayal kırıklığından ve zorluğundan kaçınabilirsiniz.

button