Skip to content

14. [nuxt-11] örneği: bekleme görüntüsünün özelleştirilmesi

Varsayılan olarak, [nuxt]'in bekleme görüntüsü bir ilerleme çubuğudur. [nuxt-11] örneği, bunun kendi bekleme görüntünüzle değiştirilebileceğini göstermektedir:

Image

[nuxt-11] örneği, yükleme hatalarının nasıl yönetileceğini de göstermektedir.

Image

[nuxt-11] örneği, başlangıçta [nuxt-10] örneğinin kopyalanmasıyla elde edilir:

Image

[1]'e, bileşenler arasındaki olayları yönetmekle görevli bir istemci eklentisi ekleyeceğiz.

14.1. [event-bus] eklentisi

[event-bus] eklentisi hem istemci hem de sunucu tarafından çalıştırılacaktır, ancak sunucu tarafında çalışmadığını göreceğiz. Kod şöyledir:


// görünümler arasında bir olay veriyolu oluşturuluyor
import Vue from 'vue'
export default (context, inject) => {
  // olay veriyolu
  const eventBus = new Vue()
  // [eventBus] işlevinin bağlama enjeksiyonu
  inject('eventBus', () => eventBus)
}
  • 5. satır: olay veriyolu, [Vue] sınıfının bir örneğidir. Nitekim bu sınıf, olayları yönetmek için gerekli yöntemlere sahiptir:
    • [$emit]: bir olay yayınlamak için;
    • [$on]: belirli bir olayı dinlemek için;

Bu olay veriyolu, sayfalar tarafından asenkron bir işlevin bitmesini bekleme animasyonunu başlatmak/durdurmak için kullanılacak tek bir olayı, [loading]'i yönetecektir;

  • 7. satır: [$eventBus] adlı bir işlev (1. argüman) oluşturulur; bu işlevin görevi, az önce oluşturulan [eventBus] nesnesini (2. argüman) döndürmektir. Bu işlev, sayfaların [context.app] ve [this] nesnelerinde kullanılabilir olması için bağlama eklenir;

14.2. [default.vue] düzeni

[default.vue] düzeni şu şekilde değişir:


<template>
  <div class="container">
    <b-card>
      <!-- bir mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-11] : personnalisation de l'attente, gestion des erreurs</h4>
      </b-alert>
      <!-- yönlendirmenin geçerli görünümü -->
      <nuxt />
      <!-- yükleniyor -->
      <b-alert v-if="showLoading" show variant="light">
        <strong>Requête au serveur de données en cours...</strong>
        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
      </b-alert>
      <!-- yükleme hatası -->
      <b-alert v-if="showErrorLoading" show variant="danger">
        <strong>La requête au serveur de données a échoué : {{ errorLoadingMessage }}</strong>
      </b-alert>
    </b-card>
  </div>
</template>

<script>
/* eslint-disable no-console */
export default {
  name: 'App',
  data() {
    return {
      showLoading: false,
      showErrorLoading: false
    }
  },
  // yaşam döngüsü
  beforeCreate() {
    console.log('[default beforeCreate]')
  },
  created() {
    console.log('[default created]')
    // [loading] olayını dinliyoruz
    this.$eventBus().$on('loading', this.mShowLoading)
    // ve [errorLoadingMessage] olayını
    this.$eventBus().$on('errorLoading', this.mShowErrorLoading)
  },
  beforeMount() {
    console.log('[default beforeMount]')
  },
  mounted() {
    console.log('[default mounted]')
  },
  methods: {
    // yükleme yönetimi
    mShowLoading(value) {
      console.log('[default mShowLoading], showLoading=', value)
      this.showLoading = value
    },
    // yükleme hatası
    mShowErrorLoading(value, errorLoadingMessage) {
      console.log('[default mShowErrorLoading], showErrorLoading=', value, 'errorLoadingMessage=', errorLoadingMessage)
      this.showErrorLoading = value
      this.errorLoadingMessage = errorLoadingMessage
    }
  }
}
</script>
  • 11-14. satırlar: bekleme animasyonu. Bu animasyon, yalnızca [showLoading] özelliği doğru ise (29. satır) görüntülenir;
  • satır 16-18: yükleme hata mesajı. Yalnızca [showErrorLoading] özelliği (satır 30) doğru ise görüntülenir;
  • satır 29-30: Bileşenin ilk yüklenmesi sırasında, bekleme animasyonu ve hata mesajı gizlenir;
  • satır 37-43: Sayfa oluşturulduğunda, eklenti tarafından oluşturulan olay veriyolundaki [loading] olayını (1. argüman) dinler. Bu olayı aldığında, satır 52-55'teki [mShowLoading] yöntemini (2. argüman) çalıştırır;
  • 52-55. satırlar: [mShowLoading] yöntemi tarafından alınan değer, true / false şeklinde bir boole değeri olacaktır. Bu değer, bekleme mesajını göstermek / gizlemek için kullanılır;
  • satır 41-42: Sayfa oluşturulduğunda, eklenti tarafından oluşturulan olay veriyolundaki [errorLoading] olayını (1. argüman) dinler. Bu olayı aldığında, satır 57-61'deki [mShowErrorLoading] yöntemini (2. argüman) çalıştırır;
  • 57. satır: [mShowErrorLoading] yöntemi iki argüman alır:
    • 1. argüman, hata mesajını göstermek veya gizlemek için kullanılan true / false değerini alan bir boole değeridir;
    • 2. argüman yalnızca bir hata oluştuğunda mevcuttur. Bu argüman, görüntülenecek hata mesajını temsil eder;
  • 53. ve 58. satırlardaki günlük kayıtları, [showLoading] ve [showErrorLoading] yöntemlerinin sunucu tarafında yürütülmediğini gösterecektir;

14.3. [page1] sayfası

[page1] sayfasının kodu şu şekilde değişir:


<!-- görünüm no. 1 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigasyon -->
    <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]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz verilir
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // günlük
        console.log('[page1 asyncData finished]')
        // asenkron sonucu döndürülüyor - burada rastgele bir sayı
        resolve({ result: Math.floor(Math.random() * Math.floor(100)) })
      }, 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>
  • değişiklikler, 26-47. satırlardaki [asyncData] işlevinde gerçekleşir;
  • 29-30. satırlar: Asenkron işlev başlamadan önce, uygulamanın diğer sayfalarına [loading] olayı gönderilir. [asyncData] fonksiyonunda, henüz oluşturulmamış olan [this] nesnesine erişim sağlanamadığı unutulmamalıdır. Bu durumda, [asyncData] fonksiyonuna (26. satır) argüman olarak verilen bağlam kullanılır;
  • 30. satır: Yüklemenin başlayacağını belirtmek için olay veriyolu kullanılır;
  • satır 38: Yüklemenin tamamlandığını belirtmek için olay veriyolu kullanılır;

Not: Çalıştırma sırasında, [page1] sayfası sunucudan istendiğinde, bekleme görüntüsü görünmez. Günlüklerde, sunucu tarafında [default.mShowLoading] yönteminin çağrılmadığı görülür. Her halükarda, sayfa sunucuya istendiğinde bekleme resmini görmek bir anlam ifade etmez. Sunucu, [asyncData] işlevi tamamlandıktan sonra sayfayı istemci tarayıcısına gönderir. Bu durumda bekleme resmi gereksizdir. Bu durum, uygulamadaki sunucuya doğrudan istenen tüm sayfalar için geçerlidir.

14.4. [index] sayfası

[index] sayfasının kodu şöyledir:


<!-- ana sayfa -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
/* eslint-disable nuxt/no-timing-in-fetch-data */

import Navigation from '@/components/navigation'
import Layout from '@/components/layout'

export default {
  name: 'Home',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  // asenkron veriler
  asyncData(context) {
    // günlük
    console.log('[page1 asyncData started]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz verilir
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // günlük
        console.log('[page1 asyncData finished]')
        // hata döndürülüyor
        reject(new Error("le serveur n'a pas répondu assez vite"))
      }, 5000)
    }).catch((e) => context.error({ statusCode: 500, message: e.message }))
  },
  // yaşam döngüsü
  beforeCreate() {
    console.log('[home beforeCreate]')
  },
  created() {
    console.log('[home created]')
  },
  beforeMount() {
    console.log('[home beforeMount]')
  },
  mounted() {
    console.log('[home mounted]')
    // hata yok
    this.$eventBus().$emit('errorLoading', false)
  }
}
</script>
  • 30-49. satırlar: [asyncData] işlevi, [page1] sayfasındaki işlevle tek bir ayrıntı dışında aynıdır: 46. satırda, asenkron işlev bir hata durumunda sonlandırılır ([reject] yöntemi kullanılır);
  • 46. satır: [reject] işlevinin parametresi, [Error] sınıfının bir örneğidir. [Error] yapıcı işlevinin parametresi ise hata mesajıdır;
  • 48. satır: Bu hata, hatayı parametre olarak alan [Promise] sınıfının [catch] yöntemi tarafından yakalanır. Ardından, hatayı bildirmek için [context.error] işlevi kullanılır. [context.error] işlevinin parametresi, burada iki özelliğe sahip bir nesnedir:
    • [statusCode]: bir hata kodu (HTTP);
    • [message]: bir hata mesajı;

[asyncData] işlevi ister istemci ister sunucu tarafından çalıştırılsın, [context.error] hatası durumunda [nuxt], [layouts / error.vue] sayfasını görüntüler:

Image

Bu bir sayfa olmasına rağmen, [error.vue] sayfası [layouts] klasöründe aranır (belki de uygulama rotalarına dahil edilmesini önlemek için?). Burada, [error.vue] sayfası şöyledir:


<!-- HTML görünüm tanımı -->
<template>
  <!-- sayfa düzeni -->
  <Layout :left="true" :right="true">
    <!-- sağ sütundaki uyarı -->
    <template slot="right">
      <!-- sarı arka planlı mesaj -->
      <b-alert show variant="danger" align="center">
        <h4>L'erreur suivante s'est produite : {{ JSON.stringify(error) }}</h4>
      </b-alert>
    </template>
    <!-- sol sütundaki gezinme menüsü -->
    <Navigation slot="left" />
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'

export default {
  name: 'Error',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  // özellik [props]
  props: { error: { type: Object, default: () => 'waiting ...' } },
  // yaşam döngüsü
  beforeCreate() {
    // istemci ve sunucu
    console.log('[error beforeCreate]')
  },
  created() {
    // istemci ve sunucu
    console.log('[error created, error=]', this.error)
  },
  beforeMount() {
    // sadece istemci
    console.log('[error beforeMount]')
  },
  mounted() {
    // sadece istemci
    console.log('[error mounted]')
  }
}
</script>

[nuxt], [error.vue] sayfasını görüntülediğinde, meydana gelen hatayı (33. satır) [props] özelliğine aktarır. Hata [context.error(objet1)] tarafından tetiklenmişse, [error.vue] sayfasının [props] özelliği [objet1] değerini alır. [nuxt] belgelerinde, [objet1]'in en azından [statusCode, message] özniteliklerine sahip olması gerektiği belirtilmektedir. 9. satır, alınan [objet1] nesnesinin jSON dizesini görüntüler.

14.5. [page2] sayfası

[page2] sayfası, hatayı yönetmenin başka bir yolunu gösterir:

  • [page1]'te hata, ayrı bir sayfa olan [error.vue]'te görüntülenir;
  • [page2] sayfasında ise hata, hataya neden olan [page2] sayfasında görüntülenecektir;

[page2] kodunun içeriği şöyledir:


<!-- 2. görünüm -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigasyon -->
    <Navigation slot="left" />
    <!-- mesaj -->
    <b-alert slot="right" show variant="secondary">
      Page 2
    </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: 'Page2',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  // asenkron veriler
  asyncData(context) {
    // günlük
    console.log('[page2 asyncData started]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz verilir
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // keyfi bir hata oluşturuluyor
        const errorLoadingMessage = "le serveur n'a pas répondu assez vite"
        // başarıyla tamamlandı
        resolve({ showErrorLoading: true, errorLoadingMessage })
        // günlük kaydı
        console.log('[page2 asyncData finished]')
      }, 5000)
    })
  },
  // yaşam döngüsü
  beforeCreate() {
    console.log('[page2 beforeCreate]')
  },
  created() {
    console.log('[page2 created]')
  },
  beforeMount() {
    console.log('[page2 beforeMount]')
  },
  mounted() {
    console.log('[page2 mounted]')
    // istemci
    if (this.showErrorLoading) {
      console.log('[page2 mounted, showErrorLoading=true]')
      this.$eventBus().$emit('errorLoading', true, this.errorLoadingMessage)
    }
  }
}
</script>

Yine, sayfa koduna bir [asyncData] işlevi eklenir ve [index] gibi, [page2] de bir hata üretecektir; ancak bu sefer bu hatayı farklı bir şekilde ele alacağız.

  • 44. satır: Hem sunucu hem de istemci, [{ showErrorLoading: true, errorLoadingMessage }] sonucunu döndürerek sözü başarıyla tamamlar. Bunun, [showerrorLoading, errorLoadingMessage] özelliklerini sayfanın [data] özelliklerine dahil edeceğini ve istemcinin bu özellikleri alacağını biliyoruz;
  • 60-67. satırlar: [mounted] işlevinin yalnızca istemci tarafından yürütüldüğü bilinmektedir;
  • 63. satır: İstemci, [showErrorLoading] özelliğinin ayarlanıp ayarlanmadığını kontrol eder (duruma göre sunucu veya istemci tarafından). Eğer ayarlanmışsa, [default] sayfasının [this.errorLoadingMessage] hata mesajını görüntülemesi için [‘errorLoading’] olayını (satır 65) tetikler. Sonuç olarak, sunucu hata mesajı görüntülenmemiş bir sayfa gönderir. Bu hata mesajı, sayfa ‘yüklendiğinde’ son anda istemci tarafından görüntülenir;

14.6. Exécution

14.6.1. [nuxt.config]

[nuxt.config.js] çalıştırma dosyası şöyledir:


export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: 'Introduction à [nuxt.js]',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ssr routing loading asyncdata middleware plugins store'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: false,

  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [{ src: '@/plugins/event-bus' }],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Belge: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Belge: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Belge: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // kaynak kod dizini
  srcDir: 'nuxt-11',
  // yönlendirici
  router: {
    // uygulamanın URL kökü
    base: '/nuxt-11/'
  },
  // sunucu
  server: {
    // hizmet bağlantı noktası, varsayılan olarak 3000
    port: 81,
    // dinlenen ağ adresleri, varsayılan olarak localhost: 127.0.0.1
    // 0.0.0.0 = makinedeki tüm ağ adresleri
    host: 'localhost'
  }
}
  • 22. satır: [nuxt]'in varsayılan bekleme resmini kullanmaması için [loading] özelliğini [false] olarak ayarlıyoruz;
  • 31. satır: olay veriyolunu tanımlayan eklenti;

14.6.2. L, sunucu tarafından çalıştırılan [index] sayfası

Sunucudan [index] sayfasını isteyelim (URL [http://localhost:81/nuxt-11/] adresini elle yazalım). İstemci tarayıcısı tarafından görüntülenen sayfa şöyledir:

Image

Günlük kayıtları şu şekildedir:

Image

  • [3]'te, sunucunun [error.vue] sayfasını gönderdiği görülüyor;
  • [4]'te, istemcinin de sunucuyla aynı hatayı vererek [error] sayfasını görüntülediği görülmektedir;
  • [default] sayfasındaki [mShowLoading] yönteminin, [index] sayfası bir beklemeyi etkinleştirmiş olmasına rağmen sunucu tarafında çağrılmadığı fark edilebilir. Bu yöntem bir olay alındığında çağrılır ve görünüşe göre olay yönetimi sunucu tarafında uygulanmamıştır;

İstemci tarayıcısı tarafından alınan sayfanın kaynak kodunu 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-11/">
  <link rel="preload" href="/nuxt-11/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-11/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-11/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-11/_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-11] : personnalisation de l'attente, gestion des erreurs</h4>
              </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-11/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-11/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-11/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" align="center" class="alert alert-danger">
                <h4>L'erreur suivante s'est produite : {&quot;statusCode&quot;:500,&quot;message&quot;:&quot;le serveur n'a pas répondu assez vite&quot;}</h4>
                    </div>
                </div>
              </div>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>window.__NUXT__ = (function (a, b, c, d) {
  d.statusCode = 500; d.message = "le serveur n'a pas répondu assez vite";
  return {
    layout: "default", data: [d], error: d, serverRendered: true,
    logs: [
      { date: new Date(1575047424168), args: ["[event-bus créé]"], type: a, level: b, tag: c },
      { date: new Date(1575047424175), args: ["[page1 asyncData started]"], type: a, level: b, tag: c },
      { date: new Date(1575047429455), args: ["[page1 asyncData finished]"], type: a, level: b, tag: c },
      { date: new Date(1575047429515), args: ["[default beforeCreate]"], type: a, level: b, tag: c },
      { date: new Date(1575047429675), args: ["[default created]"], type: a, level: b, tag: c },
      { date: new Date(1575047430157), args: ["[error beforeCreate]"], type: a, level: b, tag: c },
      { date: new Date(1575047430246), args: ["[error created, error=]", "{ statusCode: 500,\n  message: 'le serveur n\\'a pas répondu assez vite' }"], type: a, level: b, tag: c }]
  }
    }("log", 2, "", {}));</script>
  <script src="/nuxt-11/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-11/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-11/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-11/_nuxt/app.js" defer></script>
</body>
</html>
  • 57. satır: Sunucunun, sunucu tarafında meydana gelen hatayı temsil eden bir [d] nesnesi gönderdiği görülüyor;
  • 59. satır: değeri [d] nesnesi olan bir [error] özelliği görülüyor. Sunucu tarafından gönderilen sayfada [error] özelliğinin bulunması nedeniyle, istemci komut dosyalarının [error.vue] sayfasını [error] hatasıyla görüntüleyeceği tahmin edilebilir;

14.6.3. Sunucu tarafından çalıştırılan [page1] sayfası

URL [http://localhost:81/nuxt-11/page1] adresini elle giriyoruz. 5 saniye sonra tarayıcı şu sayfayı görüntülüyor:

Image

Görüntülenen günlük kayıtları şunlardır:

Image

  • [1]'te sunucu günlükleri. [default] sayfasındaki [mShowLoading] yönteminin çağrılmadığı görülebilir;
  • [2]'te ise istemci günlükleri;

14.6.4. Sunucu tarafından çalıştırılan [page2] sayfası

URL ve [http://localhost:81/nuxt-11/page2] adreslerini elle giriyoruz. 5 saniye sonra, tarayıcı aşağıdaki sayfayı görüntülüyor:

Image

Tarayıcıda görüntülenen günlükleri inceleyelim:

Image

  • [1]'te, sunucu günlükleri. Sunucunun, istemci tarayıcısına gönderilen sayfaya [showErrorLoading, errorLoadingMessage] özelliklerini eklediğini hatırlayalım. Bu özelliklerin, istemci tarafından görüntülenen sayfanın [data]'lerine entegre edileceğini biliyoruz
  • [3]'te yer alacağı biliniyor; [page2] sayfası yüklendiğinde, [showErrorLoading] özelliğinin "true" değerinde olduğunu tespit eder. Ardından, [default] sayfasına bir olay gönderir; böylece bu sayfa, [4] sunucusu tarafından gönderilen hata mesajını görüntüler;

14.6.5. İstemci tarafından çalıştırılan [index] sayfası

Şimdi gezinme bağlantılarını kullanarak üç sayfayı da görüntülüyoruz. İstemci tarafından görüntülenen tüm sayfalar, sunucu tarafından görüntülenenlerle aynıdır. Tek fark, her seferinde 5 saniyenin dolmasını bekleyen bekleme resminin görüntülenmesidir.

[index] sayfasıyla başlıyoruz. Bu durumda bekleme görüntüsü görüntülenir:

Image

5 saniye sonra şu sayfa karşımıza çıkar:

Image

Dolayısıyla son sayfa, sunucu tarafında elde edilen sayfayla aynıdır.

Image

[index] sayfasındaki [asyncData] işlevini hatırlayalım:


asyncData(context) {
    // günlük
    console.log('[page1 asyncData started]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz verilir
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // günlük
        console.log('[page1 asyncData finished]')
        // hata döndürülüyor
        reject(new Error("le serveur n'a pas répondu assez vite"))
      }, 5000)
    }).catch((e) => context.error({ statusCode: 500, message: e.message }))
}

İstemci günlükleri şu şekildedir:

Image

  • [1]'te, [asyncData] işlevi başlatılır;
  • [2]'te bekleme görüntüsü başlatılır;
  • [2-3]'te, [default] sayfasının, QZ sayfasının [asyncData] işlevi tarafından gönderilen [loading, true], [2] ve [errorLoading, false] olaylarını aldığını görüyoruzXW2HTMLP001411ZQX sayfasının [asyncData] işlevi tarafından gönderilen [loading, true], [2] ve [errorLoading, false] olaylarını aldığı görülmektedir (5. ve 7. satırlar);
  • [4]'te bekleme sona erdi. [default] sayfası, [index] sayfası tarafından gönderilen [loading, false] olayını aldı (satır 13);
  • [5]'te, [asyncData] işlevi işini tamamladı;
  • [asyncData] işlevi, [context.error] ile bir hata oluşturduğu için (satır 19), [error] sayfası [6] olarak görüntülenir;

14.6.6. İstemci tarafından yürütülen [page1] sayfası

5 saniye bekledikten sonra, istemci şu sayfayı görüntülüyor:

Image

[page1]'teki [asyncData] işlevinin kodunu hatırlayalım:


asyncData(context) {
    // günlük
    console.log('[page1 asyncData started]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz veriliyor
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // günlük
        console.log('[page1 asyncData finished]')
        // asenkron sonucu döndürülüyor - burada rastgele bir sayı
        resolve({ result: Math.floor(Math.random() * Math.floor(100)) })
      }, 5000)
    })
},

Günlük kayıtları şu şekildedir:

Image

14.6.7. İstemci tarafından çalıştırılan [page2] sayfası

5 saniye bekledikten sonra, istemci şu sayfayı görüntüler:

Image

[page2]'teki [asyncData] ve [mounted] işlevlerinin kodunu hatırlayalım:


asyncData(context) {
    // günlük
    console.log('[page2 asyncData started]')
    // bekleme başlangıcı
    context.app.$eventBus().$emit('loading', true)
    // hata yok
    context.app.$eventBus().$emit('errorLoading', false)
    // bir söz veriliyor
    return new Promise(function(resolve, reject) {
      // asenkron bir işlev simüle ediliyor
      setTimeout(function() {
        // bekleme sonu
        context.app.$eventBus().$emit('loading', false)
        // keyfi bir hata oluşturuluyor
        const errorLoadingMessage = "le serveur n'a pas répondu assez vite"
        // başarıyla tamamlandı
        resolve({ showErrorLoading: true, errorLoadingMessage })
        // günlük
        console.log('[page2 asyncData finished]')
      }, 5000)
    })
  }

mounted() {
    console.log('[page2 mounted]')
    // müşteri
    if (this.showErrorLoading) {
      console.log('[page2 mounted, showErrorLoading=true]')
      this.$eventBus().$emit('errorLoading', true, this.errorLoadingMessage)
    }
}

Günlük kayıtları şu şekildedir:

Image

  • [1]'te, [default] sayfası, [page2] tarafından gönderilen (29. satır) ve hata mesajını görüntülemesini isteyen [showErrorLoading, true] olayını almıştır;
https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Lisansla Paylaş 3.0 Değiştirilmeden lisansının koşullarına göre kamuoyuna sunulmaktadır.