13. [nuxt-10] örneği: asyncData ve yükleme
Bir sayfadaki [asyncData] işlevi, genellikle harici verilerin asenkron olarak yüklenmesini sağlar. [nuxt], sayfanın yaşam döngüsünü başlatmadan önce [asyncData] işlevinin tamamlanmasını bekler. Dolayısıyla sayfa, harici veriler elde edildikten sonra görüntülenir. Bu işlev, aşağıdaki kurallara göre hem sunucu hem de istemci tarafından yürütülür:
- sayfa doğrudan sunucudan istendiğinde, yalnızca sunucu [asyncData] işlevini yürütür;
- ardından, istemci tarafında gezinme sırasında, yalnızca istemci [asyncData] işlevini yürütür;
Sonuç olarak, bu işlevi ya istemci ya da sunucu, ikisinden sadece biri yürütür. Ayrıca, [asyncData] işlevini istemci yürüttüğünde, [nuxt] işlevi, ayarlanabilen bir ilerleme çubuğu görüntüler.
[asyncData] fonksiyonu, arama motorlarına sayfaları verileriyle birlikte sunarak sayfaların daha anlamlı olmasını sağlar.
[nuxt-10] örneği, başlangıçta [nuxt-01] projesinin kopyalanmasıyla elde edilir:
Yalnızca [page1] sayfası değişir.
13.1. [page1] sayfası
[page1] sayfasının kodu şöyledir:
<!-- 1 numaralı görünüm -->
<template>
<Layout :left="true" :right="true">
<!-- gezinme -->
<Navigation slot="left" />
<!-- mesaj-->
<b-alert slot="right" show variant="primary"> Page 1 -- result={{ result }} </b-alert>
</Layout>
</template>
<script>
/* eslint-disable no-console */
/* eslint-disable nuxt/no-timing-in-fetch-data */
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
export default {
name: 'Page1',
// kullanılan bileşenler
components: {
Layout,
Navigation
},
// asenkron veriler
asyncData(context) {
// günlük
console.log('[page1 asyncData started]')
// bir söz verilir
return new Promise(function(resolve, reject) {
// asenkron bir işlev simüle ediliyor
setTimeout(function () {
// asenkron sonucu döndürme - burada rastgele bir sayı
resolve({ result: Math.floor(Math.random() * Math.floor(100)) })
// log
console.log('[page1 asyncData finished]')
}, 5000)
})
},
// yaşam döngüsü
beforeCreate() {
console.log('[page1 beforeCreate]')
},
created() {
console.log('[page1 created]')
},
beforeMount() {
console.log('[page1 beforeMount]')
},
mounted() {
console.log('[page1 mounted]')
}
}
</script>
- 26-39. satırlar: [asyncData] işlevi. Bu işlevi daha önce incelemiştik (bkz. bağlantı paragrafı). Bu işlev, sayfanın yaşam döngüsünden önce yürütülür. Bu nedenle, işlev içinde [this] anahtar sözcüğü kullanılamaz;
- 30. satır: Bu fonksiyon, bir [Promise] sözü döndürmeli veya async / await sözdizimini kullanmalıdır;
- 32-37. satırlar: Promise’ın asenkron işlevi, 5 saniyelik bir bekleme süresiyle simüle edilir (37. satır);
- 34. satır: Asenkron fonksiyonun sonucu {result :...} biçiminde bir nesne olarak döndürülür. [asyncData] fonksiyonu tarafından döndürülen asenkron nesne, sayfanın [data] nesnesine eklenir. Bu nedenle, sayfa [data] nesnesini tanımlamamış olsa da, şablonun 7. satırında [result] nesnesi kullanılabilir durumdadır;
13.2. [asyncData] ilerleme çubuğunun yapılandırılması
[page1] sayfası, istemci içinde bir gezinme işleminin hedefi olduğunda (SPA modu), istemci [asyncData] işlevini çalıştırır ve [nuxt], [asyncData] işlevi sonucunu verdiğinde gizlediği bir ilerleme çubuğu görüntüler. [nuxt.config.js] dosyasındaki [loading] özelliği, bu çubuğun yapılandırılmasını sağlar:
loading: {
color: 'blue',
height: '5px',
throttle: 200,
continuous: true
},
Varsayılan olarak, [nuxt]'in bekleme görüntüsü, sayfa genişliği kadar bir ilerleme çubuğudur. Bu çubuğun bir rengi ve kalınlığı vardır. Renkli çizgi, boyutunun %0'ından %100'üne kadar kademeli olarak büyür; dolayısıyla bekleme süresine bağlı olarak daha hızlı veya daha yavaş ilerler.
- 2. satır: ilerleme çubuğunun rengini belirler;
- 3. satır: çubuğun kalınlığını piksel cinsinden belirler;
- 4. satır: [throttle], animasyonun başlamasından önceki gecikme süresini milisaniye cinsinden belirtir. Bu, [asyncData] işlevi sonucunu hızlı bir şekilde verdiğinde animasyon görüntüsünün görünmemesini sağlar;
- 5. satır: [continuous], ilerleme çubuğunun animasyon davranışını belirler. Varsayılan olarak, çubuk bekleme süresine bağlı olarak daha hızlı veya daha yavaş bir şekilde %0'dan %100'e kadar kademeli olarak büyür. [continuous:true] ile renkli çubuk, boyutunun %0’ından %100’üne kadar sabit bir hızda büyür ve [asyncData] işlevi sonucunu verene kadar bu işlem tekrarlanır;
13.3. Exécution
Uygulamayı başlatalım, ardından sunucuya [page1] sayfasını manuel olarak isteyelim:
Günlük kayıtları şu şekildedir:
- Görüldüğü gibi, yalnızca [1] sunucusu [asyncData] işlevini çalıştırmış ve bunu sayfa döngüsünden önce gerçekleştirmiştir;
Şimdi sunucu tarafından gönderilen sayfayı (kaynak kodu) inceleyelim:
<!doctype html>
<html data-n-head-ssr>
<head>
<title>Introduction à [nuxt.js]</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<base href="/nuxt-10/">
<link rel="preload" href="/nuxt-10/_nuxt/runtime.js" as="script">
<link rel="preload" href="/nuxt-10/_nuxt/commons.app.js" as="script">
<link rel="preload" href="/nuxt-10/_nuxt/vendors.app.js" as="script">
<link rel="preload" href="/nuxt-10/_nuxt/app.js" as="script">
...
</head>
<body>
<div data-server-rendered="true" id="__nuxt">
<div id="__layout">
<div class="container">
<div class="card">
<div class="card-body">
<div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success">
<h4>[nuxt-10] : asyncData et loading</h4>
</div>
<div>
<div class="row">
<div class="col-2">
<ul class="nav flex-column">
<li class="nav-item">
<a href="/nuxt-10/" target="_self" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="/nuxt-10/page1" target="_self" class="nav-link active nuxt-link-active">
Page 1
</a>
</li>
<li class="nav-item">
<a href="/nuxt-10/page2" target="_self" class="nav-link">
Page 2
</a>
</li>
</ul>
</div> <div class="col-10"><div role="alert" aria-live="polite" aria-atomic="true" class="alert alert-primary"> Page 1 -- result=3 </div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>window.__NUXT__ = (function (a, b, c) {
return {
layout: "default", data: [{ result: 3 }], error: null, serverRendered: true,
logs: [
{ date: new Date(1574939615256), args: ["[page1 asyncData started]"], type: a, level: b, tag: c },
{ date: new Date(1574939620263), args: ["[page1 asyncData finished]"], type: a, level: b, tag: c },
{ date: new Date(1574939620285), args: ["[page1 beforeCreate]"], type: a, level: b, tag: c },
{ date: new Date(1574939620287), args: ["[page1 created]"], type: a, level: b, tag: c }
]
}
}("log", 2, ""));</script>
<script src="/nuxt-10/_nuxt/runtime.js" defer></script>
<script src="/nuxt-10/_nuxt/commons.app.js" defer></script>
<script src="/nuxt-10/_nuxt/vendors.app.js" defer></script>
<script src="/nuxt-10/_nuxt/app.js" defer></script>
</body>
</html>
- 55. satır: Sunucunun, sunucudaki [page1] sayfasının [data] nesnesine entegre edilmiş olan [result:3] nesnesini içeren bir [data] dizisini istemciye gönderdiği görülmektedir. İstemcinin de aynısını yapabilmesi ve dolayısıyla sunucuyla aynı sayfayı görüntüleyebilmesi için, sunucu ona [result] nesnesini iletir. Hatırlatmak gerekirse, istemci [asyncData] işlevini çalıştırmayacaktır. Sadece sunucu tarafından hesaplanan verileri kullanacaktır;
Şimdi gezinme menüsünü kullanarak [Home] sayfasından [Page 1] sayfasına geçelim:
- [1] sayfasında ilerleme çubuğu görünür;
5 saniye sonra, [Page 1] sayfasına ulaşırız:
Günlük kayıtları şu şekildedir:
Müşterinin, sayfanın yaşam döngüsünden önce [asyncData] işlevini çalıştırdığı görülüyor.