CW8 -- Promise, fetch and Cache

[Akif Eyler]

Bu haftanın gündemi:

* Web sayfalarınıza yapıcı eleştiri (isteyenlere)

* https://resilientwebdesign.com/chapter4/

* Promise örnekleri: caches, fetch()

* PWA Nasıl Yapılır

JavaScript API dünyası, bir kişinin hepsini öğrenemeyeceği kadar geniş
https://developer.mozilla.org/en-US/docs/Web/API

Ana konumuz olan Promise bu listede yok -- başka bir yerde anlatılmış

Bu uzun listedeki üç API'ye biraz daha yakından bakalım:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
https://developer.mozilla.org/en-US/docs/Web/API/Response
https://developer.mozilla.org/en-US/docs/Web/API/Cache

Başlangıç noktalarımız: (global)  navigator, caches, fetch()

Çalışma sayfamız:  https://maeyler.github.io/BLM305/inspect.html

Birinci örneğin cevabı anında dönüyor:

navigator.getBattery()  //bu kadar yazınca, Inspector gerisini tamamlar

.then(display, error)   //BatteryManager
then() içinde iki fonksiyon olabilir: cevap olumlu ise diplay, değilse error çağrılacak

Burada display yerine console.log, error yerine console.error yazabiliriz -- desktop'ta çalışır

Inspector içindeki şu satırlar Promise nesnelerini atlayıp sonucunu gösteriyor:

  if (f instanceof Promise)  //nothing to display in f

      f.then(display, reportError)

İkinci örnek JS isimli Cache nesnesini açıyor:

caches.open('JS').then(display)  //Cache

caches.open('JS')  //JS içinde ne var? Request array

.then(c => { c.keys().then(display) })

caches.open('JS')  //JS içinde arama

.then(c => { c.match('manifest.json').then(display) })

Response seçili iken iki kopyasını yapalım ve üç metodunu çağıralım:

_.blob().then(display)  //as binary

_.json().then(display)  //as object

_.text().then(display)  //as text

Üçüncü örnek aynı dosyayı repodan okuyor:

fetch('manifest.json')  //GitHub'da aynı metni bulalım

.then(display)) //Response

Bu kısım yukarıdaki ile aynı -- Promise atlanıyor ve Response gösteriliyor

ikinci aşamada çağrılan json() metodu yeni bir nesne üretiyor:

_.json().then(display)  //as object

Ref:  https://maeyler.github.io/JS/hard/Fetch%20remote.html

_Akif_Eyler_

[Akif Eyler]

CW8 -- Promise, fetch and Cache

Lab saatinde (15-17 arasında) yapılacak

17:30'dan sonraki ödevler geç sayılacak

Open the Application tab in dev-tools

Make a table similar to the attached image

Use your own cache if possible

Send me a screen shot as usual

Açıklama:

* Kendi ana sayfanızda cache varsa onu kullanın

  Henüz yoksa, başka bir web-app (JS değil) olabilir

* Bu ödev için yeni bir html dosyası olabilir ama şart değil

  Console + Inspector üstünden yapabilirsiniz

* cache içindeki bilgiler Request (url) olarak dönüyor

fetch(url).then(r => r.blob()) ile Blob haline getirin

* "Make a table" dedim ama table kullanmak şart değil

  Dosya bilgilerini okunur bir şekilde sunmanız yeterli

* Ekran resminde, yazdığınız JS kodu açıkça görünmeli

  Amaç, Cache ve fetch() konularını anladığınızı göstermek

_Akif_Eyler_

On Sun, Nov 25, 2018

...

İkinci örnek JS isimli Cache nesnesini açıyor:

caches.open('JS').then(display)  //Cache

caches.open('JS')  //JS içinde ne var? Request array

.then(c => { c.keys().then(display) })

caches.open('JS')  //JS içinde arama

.then(c => { c.match('manifest.json').then(display) })

Response seçili iken iki kopyasını yapalım ve üç metodunu çağıralım:

_.blob().then(display)  //as binary  <-- bunu kullanın

[Akif Eyler]

Bu ödevde hemen herkes 10 aldı -- birkaç tane R var, istenen bilgileri gösteren yeni bir ekran resmi gönderecekler

Notların ilan edildiği sayfada ödevlerdeki eksiklerinizi görebilirsiniz, geçen yıla göre çok fazla x var

Ana sayfalarınız iyi yönde gelişiyor, Cumartesi ayrıntılı bakmayı planlıyorum

_Akif_Eyler_