Ali GÖREN Açık Kaynak, JavaScript, Python, .NET RSS

JavaScript Notlarım

Etiketler: JavaScript Vue.JS Flask Tips

Bir süredir Vue.JS ile uygulamalar geliştiriyordum. Baktım ki uygulamalar artacak, kendi profilim altında toplamaktansa bir organizasyon altında toplamak daha mantıklı olur dedim.

Şimdilik Vue kullanarak ortaya çıkan projeleri şuraya alıyorum: https://github.com/vue-project. Tabi bu süreç bana birçok şeyi de öğretmiş oldu.

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:

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 GET metodundan ibaret olmadığını biliyoruz. Eğer istersek metodu şöyle belirtebiliriz:

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 #frmData olarak select edelim.

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:

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.

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


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:

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:

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 return resp.json() şeklinde döndürürseniz, JSON syntaxinden kaynaklı hatalar alabilirsiniz. Bu durumda bazen .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ı!

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:

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

<template>
  <div>
    <b-componenti :sayi="anindatasi"></b-componenti>
    <button v-on:click="tiklaDataGitsin"></button>
  </div>
</template>

Javascript Kodu:

//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 tiklaDataGitsin isimli metodu çalıştır. Bu metod anindatasi isimli değeri 1 arttırsın. Ardından bu değer <b-componenti></b-componenti> içerisine paslansın.

B Componenti

O sıralarda B componenti ise şu vaziyetteydi.

<template>
 <div>
  {{bdatasi}}
 </div>
</template>

Javascript Kodu:

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 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 sayi isimli prop’un değişim yaşadığını görebiliriz. Bir örnekle bakalım:

watch: {
  sayi() {
    this.bdatasi += 1;
  }
}

Template içerisine yazdırdığımız {{bdatasi}} sonucunda değişiklikler yaşandığını da görebileceğiz demektir bu.

My name is Yoda

Who Am I

24 Level insanım. Bana aşağıdan ulaşabilirsiniz.

Yorumlar