Birçok web uygulaması, geliştirme süreçlerinin bir noktasında bir REST API ile arayüz oluşturma gereksinimiyle karşılaşır. React tabanlı web uygulamaları için, Axios, Angular.js v1.x içindeki $http servisini temel alan hafif bir HTTP istemcisini kullanabiliriz. Özellikleri JavaScript’in yerel Fetch API.
sine benzer. Axios promise tabanlıdır ve daha okunabilir senkron kodlar için JavaScript’in async ve await yapılarını entegre etmemize olanak tanır. Ayrıca istekleri kesmeyi (intercept) ve iptal etmeyi de destekler. Dahası, siteler arası istek sahtekarlığına karşı yerleşik istemci tarafı koruması sunar.
Bu kılavuzda, popüler JSON Placeholder API'sine erişmek için Axios'un bir demo React uygulamasında nasıl kullanılacağını göstereceğiz. Bu eğitimden JavaScript'teki JSON formatı hakkında daha fazla bilgi edinebilirsiniz.
Gereksinimler
Bu kılavuzda gösterilen adımları tamamlamak için aşağıdaki bileşenlere ihtiyacınız olacak:
- Düzgün yapılandırılmış bir Ubuntu sunucusu. İşte CloudSigma üzerinde kendi Ubuntu sunucunuzu kurma.
- adımları. En son sürüm Node.js kurulu olmalıdır. Ubuntu üzerinde Node.js'in nasıl kurulacağına.
- A new React project using Create React App kullanan yeni bir React projesi. Öncelikle Create React App kullanarak bir React projesi kurma kılavuzunu.
- Temel düzeyde HTML, CSS, ve JavaScript bilgisi.
Adım 1: React Projesine Axios Kurulumu
Axios, doğrudan bir npm modülü olarak mevcuttur. npm üzerindeki Axios sayfasına göz atın. Tek yapmamız gereken bir React projesi oluşturmak ve Axios paketini kurmaktır.
Aşağıdaki npx komutu, yeni bir React projesi oluşturmak için create-react-app komutunu çalıştıracaktır. Proje adı, proje için özel bir dizin oluşturmak amacıyla kullanılacaktır. Burada projeyi react-axios-demo olarak adlandırdık. Komutu çalıştırın:
|
1 |
npx create-react-app react-axios-demo |
Mevcut dizini yeni oluşturulan proje diziniyle değiştirin:
|
1 |
cd react-axios-demo/ |
Ardından, Axios'u kurmak için npm install komutunu çağırın. Herhangi bir sürüm belirtilmezse, npm otomatik olarak Axios'un en son sürümünü indirip kuracaktır:
|
1 |
npm install axios |
Projemiz artık Axios kullanmaya hazır! Şimdi özelliklerini harekete geçirme zamanı.
Adım 2: Bir GET İsteği Oluşturma
Bu adımda, bir GET isteği göndermek için Axios kullanan yeni bir bileşen oluşturmayı göstereceğiz.
İlk olarak, isimlerin listesini gösterecek yeni bir PersonList bileşeni oluşturun. Bileşeni depolamak için özel bir dizin oluşturun:
|
1 |
mkdir -pv src/components |
Ardından, PersonList.js :
|
1 |
touch PersonList.js |
Dosyayı bir metin düzenleyicide açın. Kolaylık ve okunabilirlik açısından Visual Studio Code kullanıyoruz. Aşağıdaki JavaScript kodunu girin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Burada:
-
Bileşende her ikisini de kullanabilmek için React ve Axios'u içe aktardık.
-
Biz componentDidMount yaşam döngüsü kancasına bağlanıp bir GET isteği gönderiyoruz.
Bir promise (bir yanıt nesnesi döndürür) elde etmek için bir API uç noktasından axios.get(<url>) kullanabilirsiniz. Yanıt nesnesi, istenen verileri içerir. Daha sonra bunu person değerine atarız. Ayrıca, res.status altındaki durum kodu gibi istek hakkında ek bilgileri veya res.request.
Ardından, bileşenimizi ana App.js dosyasına eklememiz gerekiyor. Aşağıdaki kodları ekleyin:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Bu adım için yapılandırma tamamlandı. Artık uygulamayı çalıştırabilir ve favori tarayıcınızı kullanarak test edebilirsiniz. Geliştirme sunucusunu başlatın:
|
1 |
npm start |
Gördüğümüz gibi, çıktı rastgele sırada kişilerin isimlerinin bir listesini gösteriyor:
Adım 3: Bir POST İsteği Oluşturma
Bu bölümde, olarak adlandırılan başka bir HTTP istek yöntemini gerçekleştirmek için Axios kullanımını göstereceğiz.POST. Bunu göstermek için amacımız, React projemize adında yeni bir bileşen oluşturmaktır.PersonAdd.
Şu dosyayı oluşturun: PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Ardından, dosyayı bir metin düzenleyicide açın ve aşağıdaki kodu girin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Person Name: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Ekle</button> </form> </div> ) } } |
Bu kodda, kullanıcı girdisini alıyor ve içeriği bir API'ye POST ediyoruz. handleSubmit fonksiyonu içinde, formun varsayılan eylemini engelliyor ve durumu kullanıcı girdisine göre güncelliyoruz. POST kullanıldığında aynı yanıt nesnesini döndürür. Bu nesneyi bir then çağrısı içinde kullanabiliriz. POST isteğini yerine getirmek için kullanıcı girdisini yakalıyor ve bunu POST isteğiyle birlikte ekliyoruz. Bu bize bir yanıt verir. Yanıtı console.log kullanarak günlüğe kaydediyoruz. Formdaki user girdisini göstermelidir.
Ardından, bileşeni App.js dosyasına ekleyin. Tam kod şu şekilde görünmelidir:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Şimdi, değişiklikleri test etme zamanı. Geliştirme sunucusunu başlatın:
|
1 |
npm start |
Web tarayıcısındaki değişikliği kontrol edin:
Adım 4: Bir DELETE İsteği Oluşturma
Bu bölümde, yardımıyla bir API'den öğeleri silmeyi göstereceğiz.axios.delete ve parametre olarak bir URL kullanacağız. Bunu göstermek için PersonRemove bileşenini oluşturun. PersonRemove.js dosyasını src/components dizini altında oluşturun:
|
1 |
touch src/components/PersonRemove.js |
Bundan sonra, dosyayı bir metin düzenleyicide açın ve aşağıdaki kodu ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Kişi ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Sil</button> </form> </div> ) } } |
Burada, res nesnesi istek hakkında bilgi sunmaktadır. Form gönderildikten sonra console.log işlevini kullanabiliriz.
Ardından, bileşeni App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Kodumuzu tekrar test etme zamanı. Sunucuyu başlatın:
|
1 |
npm start |
Kullanıcının adını alan ve listeden kaldıran yeni bir form görmelisiniz:
Adım 5: Axios'ta Temel Örneği (Base Instance) Uygulama
Şimdi Axios temel örneği (base instance) ile çalışacağız. Burada bir URL ve diğer yapılandırma öğelerini tanımlayabiliriz. Bunu uygulamak için ayrı bir dosya oluşturun: api.js:
|
1 |
touch src/api.js |
Bir metin düzenleyicide açın ve aşağıdaki kodu girin:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Bu ayarlandıktan sonra, bunu PersonRemove bileşeni içinde kullanabiliriz. Kod şu şekilde görünecektir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Burada, http://jsonplaceholder.typicode.com/ temel URL olarak ayarlanır. Artık API'nin bir uç noktasına her ulaştığımızda tam URL'yi kullanmamıza gerek kalmaz.
Adım 6: async ve await Yapılarını Uygulama
Bu bölümde, promise'lerle çalışmak için async ve await yapılarının nasıl uygulanacağına bakacağız. await anahtar kelimesi promise yapısını çözümler ve bir değer döndürür. Daha rahat bir kullanım için bu değeri bir değişkene atayabiliriz.
Güncellenmiş PersonRemove.js kodu şu şekilde görünecektir:
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Burada, şunu değiştirdik: .then(). Bir kez promise çözüldüğünde, değeri şu değişkende saklarız: response.
Son Düşünceler
Bu eğitimde, REST API ile çalışmak için Axios kullanmanın çeşitli örneklerini inceledik. Kodlar, HTTP istekleri oluşturmayı ve yanıtları işlemeyi göstermektedir.
JavaScript hakkında daha fazla bilgi edinmek ister misiniz? Çeşitli JavaScript kavramları ve özellikleri hakkındaki diğer başlangıç kılavuzlarımıza göz atın, örneğin, tarih ve saat, dize manipülasyonu, sınıflar, ve nesneler.
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.