05 Aralık 2019
Yusuf Borucu
0 yorum
982 okunma
Vue.js'de Vue Resource kullanımı ile Http isteği yapma

Merhaba,
Bu yazıda Vue.js'de Vue Resource kullanımı ile Http isteği yapma işlemlerinden bahsedeceğim.
İlk olarak boş bir Vue.js projesi oluşturuyoruz.
vue init webpack-simple vue-resource-example
Proje dizinine gelip projenin çalışması için gerekli bağımlılıkları kuruyoruz:
npm install
Vue Resource için gerekli paketi kuruyoruz:
npm install vue-resource --save
Proje dizininde bulunan src klasörünün altındaki main.js dosyasını açarak Vue Resource'u kullanacağımızı belirtiyoruz:
import Vue from 'vue'; import App from './App.vue'; import VueResource from "vue-resource"; Vue.use(VueResource); new Vue({ el: '#app', render: h => h(App) });
Http isteği yapmak adına Fake bir Api hizmeti olan JSONPlaceholder'dan yararlanacağız. İstek yapacağımız link; https://jsonplaceholder.typicode.com/posts/1 olsun. Linke baktığımızda cevap olarak bir obje içerisinde id, userId, title ve body olduğunu görüyoruz.
Şimdi de src klasörünün altında bulunan App.vue dosyasını açıyoruz ve içeriğini şu şekilde dolduruyoruz:
<template> <div> <ul> <li>Id: {{ post.id }}</li> <li>UserId: {{ post.userId }}</li> <li>Title: {{ post.title }}</li> <li>Body: {{ post.body }}</li> </ul> </div> </template> <script> import Vue from "vue"; export default { data() { return { post: {} } }, created() { Vue.http.get('https://jsonplaceholder.typicode.com/posts/1') .then(response => { this.post = response.body; }); } } </script>
Burada yaptığımız işlemler;
- Vue'yi import ettik.
- data kısmında post değişkeni tanımladık.
- Sayfa yüklendiğinde (created fonksiyonu) ilgili linke GET isteği yapıp dönen cevabı post değişkenimize aktardık.
- ul li tag'ları içerisinde post değişkenimizin içerisinde bulunan değerleri ekrana yazdırdık.
Ve sonuç;
Vue Resource ile elbette sadece GET değil POST, PUT, DELETE gibi Http isteklerini de kolaylıkla yapabiliriz. Ben bu yazıda GET örneğini gösterdim. Diğerleri için de şöyle bir bilgi verebilirim;
POST isteği için;
Vue.http.post('link', data);
PUT isteği için;
Vue.http.put('link', data);
DELETE isteği için;
Vue.http.delete('link');
Umarım yararlı olmuştur.
İyi çalışmalar.
Henüz yorum yapılmamış.