Axios kullanımı
Merhabalar herkese, umarım iyisinizdir. Haftasonunu boş geçirmemek için medium’da yazı yayınlamak istedim. Youtube kanalımda video yayınlamak için cesaret verir umarım. Kahveler hazırsa başlayalım keyifli bir haftasonu okuması dileğiyle.
Axios nedir? Neden Axios ?
Axios javascript için söz verilen bir HTTP istemcisidir.Tarayıcıdan istek yapma ve dönüşümünü işleme yeteğine sahiptir.
Neden fetch değil de axios kullanmalıyız sorusu oluştu kafalarda. Gelin geeksforgeeks sayfasından alıntıladığım maddelere bakalım.
Neden Axios?
- Axios yerleşik XSRF korumasına sahiptir.
- Axios data özelliğini kullanır(fetch ise body)
- Axios JSON verilerinin otomatik dönüşümlerini gerçekleştirir.
- Axios istek ve istek zaman aşımını iptal etmeye izin verir.
- Http isteklerini engelleme yeteneğine sahiptir.
- Axios’un tarayıcı desteği fetch’e göre daha geniştir.
Şimdi beraber deneyelim
ilk önce npx create-react-app . komutuyla bir react projesi oluşturalım.
Proje kurulumu bittikten sonra projeyi açıp terminale npm start diyerek projeyi başlatalım.
Şimdi npmjs.com adresine giderek axios sayfasını açalım(Burdan dokümantasyonu daha ayrıntılı inceleyebilirsiniz.
Yeni bir terminal açarak npm install axios yazarak yüklemeyi başlatalım.package.json dosyasına bakıp kontrol edelim.
Şimdi kullanacağımız API’ı inceleyelim. Sıkı bir Rick and morty hayranı olduğum için api servisini kullanmak istedim. https://rickandmortyapi.com/
App.js sayfasını açıp axios’u import edelim( import axios from “axios”;)
ihtiyacımız olacağı için useEffect ve useState hook’larını da import edelim..(import {useState,useEffect} from “react”; )
Şimdi ise axios’la api’a istek atıp response’u konsola yazdıralım.
Tarayıcıdan konsolu açıp kontrol edelim.
Evet işlem başarılı. Yazımı burda sonlandırıyorum. Umarım keyifli bir yazı olmuştur,herkese iyi günler. linkedin’de beni ziyaret etmeyi unutmayın
https://www.linkedin.com/in/ebrarmeadev/
https://www.buymeacoffee.com/devebrar
