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.