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.