• Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
JavaScript Notları

 
#1

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:
GET

 metodundan 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:
#frmData

 olarak 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 Smile
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:
tiklaDataGitsin

 isimli metodu çalıştır. Bu metod 

Kod:
anindatasi

 isimli 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:
watch

 kullanabiliriz.

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:
sayi

 isimli 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.




Ara
Cevapla


[-]
Hızlı Cevap

İnsan Doğrulama:
Aşağıda görünen onay kutusunu işaretleyiniz. Bu işlem otomatik spam kayıtları önlemek için kullanılır.

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  JavaScript Console ile Debug İşlemleri blueman 0 1,671 30-08-2017, Saat: 20:28
Son Yorum: blueman

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Konuyu Okuyanlar:
1 Ziyaretçi

   
Türkçe Çeviri: MCTR, Forum Yazılımı: MyBB, © 2002-2020 MyBB Group.  



Merih Forum® bilgi paylaşım platformu. 2015-2020 Tüm hakları saklıdır.