React JS RestAPI Kullanım Dosyası Oluşturma
Hepinize merhaba dostlarım 😊. Uzun bir süre makale yazamıyordum farkındasınız. Hala daha öyle bir süreç içerisindeyim diyebilirim. Projelerimin alt yapısını değiştirme sürecinde olduğumdan dolayı böyle bir yoğunluk içerisine girdim diyebilirim 😅.
Sözü daha fazla uzatmadan React.JS üzerinde RestAPI Kullanım Dosyası oluşturma işlemine geçmek istiyorum. (RestAPI ile yeni tanışan dostlarım için Buraya kaynak link bırakıyorum).
Ek olaraktan dostlarım uzun uzun bir anlatım yapmak yerine hızlıca olayın anafikrini çok fazla söze boğmadan anlatmak istiyorum 😊. Konsept değişiyor yani anlayacağınız 😀. O halde sözü daha fazla uzatmadan hemen işlemlerimize geçelim
RestAPI Kullanım Dosyası Oluşturma
Eveeeet dostlarım. Öncelikle React projemizi kurduktan sonra yapacağımız ilk işlemlerden birisi terminal ekranımıza gelip
npm i axioskomutunu yazıyoruz. Neden bunu kullanıyoruz diye soracak olursanız yani fetch neden kullanmıyoruz diye bir sorgu içine girdiyseniz dostlarım csrf ön tanımlı olarak gidiyor ve güvenli bir şekilde istek atıyorsunuz diyebilirim 😊. Yani uzun lafın kısası istekleriniz güvenli bir şekilde gidiyor diyebilirim 💯.
Daha sonrasında ise src klasörümüzün içerisine bir klasör daha açalım. Daha sonrasında ise bu oluşturduğumuz klasörümüzün içerisine RestAPI ismini verelim.
Bu aşamalara kadar yaptıktan sonra ise dostlarım iki adet js dosyası oluşturmamız gerekiyor. İlk olarak istek atacağımız URL leri tutacağımız dosyamızı oluşturalım. Bir javascript dosyası oluşturalım ve ismini AppUrl.js olarak değiştirelim. Bu adıma kadar tamamladıysak dostlarım dosyamızın içerisine girip
class AppUrl {
static imageUrl = "http://127.0.0.1:8000/storage/";
static baseURL = "http://127.0.0.1:8000/api";
// aşağıya kendi url lerinizi yazabilirsiniz dostlarım hangi url lere bağlanacaksanız :)
}
export default AppUrl;bu şekilde içeriğini oluşturalım dostlarım. Ben projelerimde arka planda Laravel kullandığım için URL adresleri bu şekilde dostlarım 😊.
Sonrasında istek atma methodlarımızı yazalım. Genel olarak API oluşturulma ve kullanma durumlarında GET ve POST methodları kullanılıyor biliyorsunuz. Ama bazı durumlarda ve proje mimarımızın genel revize durumuna göre bu methodlar değişebiliyor. Hemen bunu da oluşturalım daha fazla konuşmadan 😅
RestClient.js isminde bir dosya oluşturalım. Daha sonrasında bu dosyamızın içerisine gelip
import axios from "axios";
class RestClient{
// get methodu
static getRequest = (url,config = {})=>{
return axios.get(url,{
"Content-Type" : "application/json",
...config
}).then((res)=>{
return res;
}).catch((err)=>{
return err.response;
})
}
// post methodu
static postRequest = (postUrl,postData,config={})=>{
return axios.post(postUrl,postData,{
"Content-Type" : "application/json",
...config
}).then((res)=>{
return res;
}).catch((err)=>{
return err.response;
})
}
}
export default RestClient;şeklinde kodlarımızı yazalım. Bu kısmı da ayarladıktan sonra dostlarım yapacağımız işlemler basit. Sadece istek atacağız 😉. Pekii nasıl oluyor gelin bunu da kullanalım artık ayıptır günahtır o kadar yazdık kullanmayacak mıyız 😅
RestClient.getRequest(AppUrl.categories+"?page="+page, {
headers: {
"Authorization": "Bearer " + token // aha burası önemli dostlarım. Çoğu apide token göndereceğiniz kısım olacak. Burayı aman atlamayın
}
}).then((res) => {
const result = res.data;
this.setState({categories: result.data}); // gelen bilgiye göre state güncelleme durumu
}).catch((err) => {
console.log(err);
});şeklinde basit bir kullanımı vardır dostlarım. Bütün işlemler bu kadar 😊.
Sürekli olarak kullandığım ve kullanmaktan da bayağı keyif aldığım bir yapıdır dostlarım. Teknik bir React bilgisi değil yani bir Hook işlemi veya bir Router yapısı gibi. Ama genel olarak baktığımızda uzun uzun axios kodlarımızın projemiz içerisinde sağda solda dağınık bir şekilde durmasının yanısıra derli toplu durmasını sağladık diyebilirim 😊. Kullanın ve kullandırın 😅
Eveeet dostlarım bu makalemde sizlerle beraber RestAPI Kullanım Dosyası oluşturduk. Biraz karmaşık veya zor gelebilir dostlarım ilk başlarda anlıyorum. Özellikle öğrenme sürecinde bu şekilde zorlanma durumumuz gayet doğaldır. İşte bu süreçte sizlerden istediğim tek şey pes etmek yerine "İstikrarlı ve Azimli olmanız, bolca pratik yapmanız" olacaktır. Bu sözü hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle 😊. İyi çalışmalar dilerim
Yazar Hakkında
Kendi Halinde Bir Backend Developer