Uygulamalar
Oyun
Yazılım
Yardım
Dota 2
LOL
Silkroad
WOT
Point Blank
Diğer
Yeni
Eski
Haber
Pazar
asp & .net
java
c# c++
python
php
Diğer
Windows
Donanım
Linux
Güvenlik
Program
Modeller
Destek
1-) fetch API
Aslında videosunu çekmiştim ancak burada basit olarak bahsetmek gerekiyor.
fetch api, es6 ile artık hayatımızda ve browserlar tarafından da destekleniyor. xmlHTTPrequest yerine bunu kullanmak daha kolay geliyor ve tabii promise dönmesi de işimize gelir. XHR olayını anlatmayacağım ancak basit bir fetch api kullanımı şöyle oluyor:
Kod:
fetch('https://site.com').then((resp) => {
return resp.json() // bazen json fonksiyonunu kullanmamıza gerek olmuyor.
}).then((obj) => {
// return edilen json değeri burada gönlümüzce kullanırız.
})Metod Seçimi
Tabi burada metodlar ve post edilen değerler de bir o kadar önemli. İsteklerin sadece
Kod:
GETmetodundan ibaret olmadığını biliyoruz. Eğer istersek metodu şöyle belirtebiliriz:
Kod:
fetch('https://site.com', {
method: 'POST',
}).then((resp) => {
// blah blahlar...Data Gönderimi
Fakat bu aşamada bile eksik bir şeyler var. Karşı tarafa değer göndermek ve bu değerleri formdata ya da json türünden yollamak. Bunun da yöntemi şöyle. Elimizde bir form olsun
Kod:
#frmDataolarak select edelim.
Kod:
const frmData = new FormData(document.querySelector("#frmData"));
fetch('https://site.com', {
method: 'POST',
body: frmData
}).then((resp) => {
// blah blahlar...Bu direkt olarak FormData yollamanın bir opsiyonuydu. Dilersek JSON türünden ya da payload olarak data yollayabiliriz. Öncelikle JSON nasılmış ona bakalım:
Kod:
const frmData = new FormData(document.querySelector("#frmData"));
fetch('https://site.com', {
method: 'POST',
body: JSON.stringify({
'username': 'Mahmut'
})
}).then((resp) => {
// blah blahlar...Yine bunun payload türünden (jQuery Ajax metodunda bunu kullanıyordu) gönderimi de mevcut.
Kod:
const frmData = new FormData(document.querySelector("#frmData"));
fetch('https://site.com', {
method: 'POST',
body: 'username=Mahmut&password=1',
}).then((resp) => {
// blah blahlar...Header İşlemleri
Kimi durumlarda headerlar lazım oluyor dediler. fetch api kullanırken Header sınıfı ile headerları da belirtebiliyoruz. Sınıf şart değil, dilersek obje gönderebiliriz.:
Kod:
const frmData = new FormData(document.querySelector("#frmData"));
const headers = new Headers({
'Content-Type': 'application/json'
})
fetch('https://site.com', {
method: 'POST',
body: 'username=Mahmut&password=1',
headers: headers,
}).then((resp) => {
// blah blahlar...2-) CORS Hataları ile Savaşın
Ben şu sıralar Vue.JS ile çalışıyorum. NPM üzerinden dev sürümünü ayağa kaldırınca sorun yok. Ancak endpoint IP ya da PORT’u farklı olunca bir sıkıntı oluşuyor. Ben bu hatayı alırken, fetch api ile çalışıyordum. Önerim de ona göre olacak. Neyse bununla ilgili hataları arasanız CORS’u görürsünüz. Muhtemeldir ki aldığınız hata şu cümleyi içeriyor:
Alıntı: If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.Merak etmeyin çözümü basit fetch api’nıza bir adet mode eklemeniz yeterli olacak. Yukarıdaki örnekten gidersek:
Kod:
fetch('https://site.com', {
mode: 'no-cors',
method: 'POST',
}).then((resp) => {
// blah blahlar...Şimdi sorunsuzca çalışabilirsiniz
3-) Promise Üzerinde Json Convert Daima Şart Değil
Garip oldu ama açıklamak isterim. Bir endpoint’e istekte bulundunuz. Endpoint size datayı return etti. Gelen datayı direkt olarak
Kod:
return resp.json()şeklinde döndürürseniz, JSON syntaxinden kaynaklı hatalar alabilirsiniz. Bu durumda bazen
Kod:
.json()gerekmeyebiliyor.
4-) Vue.JS Hakkında
Yazının en başında da belirttim. Öğrendiğim bazı şeyler var yok değil.
Prop ve Data İsimlerine Dikkat
Bir componente prop atayacaksanız, o prop ve data’dan dönen objenin adı aynı olamaz. Olur da console’da kocaman bir warn görürsünüz. Örnek:
Olmamalı!
Kod:
export default {
name: 'mycomponent',
props: [
'sample',
],
data() {
return {
sample: '',
}
}
}Created ve Mounted Aynı Değil
Vue.JS’de çalışırken benim gibi yenilerin yapacağı bir hatadan bahsetmek isterim. Datayı aldığınız created anında her şeyin olacağını sanmak büyük bir yanılgıdır.
Bizim dataya dair işlemleri DOM üzerinde gerçekleştirmemiz için created değil mounted’da çalışmamız gerekiyor ki bunu Adem İlter‘in Bricklayer kütüphanesinde deneyimledim. Örneklersek şöyle:
Kod:
created() {
this.fetchTrends({
limit: this.limit,
offset: this.offset
});
},
mounted() {
this.brickLayerInit();
},Datada Değişimleri İzlemek
En zevkli kısım burası bence. A ve B isimli componentlere sahipsiniz.
A componentinde bir işlem sonucunda X isimli data vs. her neyse, B isimli componente property olarak geçiyor. Çok karıştırmamak adına devamını kodla getireyim.
A Componenti
Kod:
<template>
<div>
<b-componenti :sayi="anindatasi"></b-componenti>
<button v-on:click="tiklaDataGitsin"></button>
</div>
</template>Javascript Kodu:
Kod:
//A componenti
export default {
name: 'acomp',
data() {
return {
anindatasi: 0,
}
},
methods: {
tiklaDataGitsin() {
this.anindatasi += 1;
}
}
}Yukarıdaki javascript kodu ve template kısacası şöyle çalışmakta:
Butona tıkla, tıklandığı anda
Kod:
tiklaDataGitsinisimli metodu çalıştır. Bu metod
Kod:
anindatasiisimli değeri 1 arttırsın. Ardından bu değer
Kod:
<b-componenti></b-componenti>içerisine paslansın.
B Componenti
O sıralarda B componenti ise şu vaziyetteydi.
Kod:
<template>
<div>
{{bdatasi}}
</div>
</template>Javascript Kodu:
Kod:
export default {
name: 'bcomponenti',
props: [
'sayi',
],
data() {
return {
bdatasi: this.sayi,
}
}
}Çözüm watch Olabilir
Okey buraya kadar hata almadan çalışabiliriz. Fakat A componentindeki olayın, B componentindeki datayı tetiklemesi gerekiyor. Çünkü bu componentler aynı sayfa üzerindeler. Bunun için
Kod:
watchkullanabiliriz.
Bu vue.js’in sağladığı büyük bir avantaj. Kısacası bir proptaki değişimi izleyebilirsiniz. Başka noktalarda henüz deneyimlemedim. Ancak
Kod:
sayiisimli prop’un değişim yaşadığını görebiliriz. Bir örnekle bakalım:
Kod:
watch: {
sayi() {
this.bdatasi += 1;
}
}Template içerisine yazdırdığımız
Kod:
{{bdatasi}}sonucunda değişiklikler yaşandığını da görebileceğiz demektir bu.
