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.

Yusuf Borucu

Benim adım Yusuf. 1993 yılında Şanlıurfa'da doğdum. 2015 yılında Bilecik Şeyh Edebali Üniversitesi Bilgisayar Mühendisliği bölümünden mezun oldum. Şu anda özel bir şirkette Yazılım Geliştirici olarak çalışmaktayım. Yazılıma yönelik uğraştığım, sevdiğim ve ilgi duyduğum teknolojilerden bahsetmem gerekirse; Laravel, Asp.Net Mvc, Android (Kotlin & Java), Vue.js, Node.js, MySQL, MSSQL, MongoDB. Her ge...

"Vue.js'de Vue Resource kullanımı ile Http isteği yapma" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.