fetch.client.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import Vue from 'vue'
  2. import { hasFetch, normalizeError, addLifecycleHook, createGetCounter } from '../utils'
  3. const isSsrHydration = (vm) => vm.$vnode && vm.$vnode.elm && vm.$vnode.elm.dataset && vm.$vnode.elm.dataset.fetchKey
  4. const nuxtState = window.<%= globals.context %>
  5. export default {
  6. beforeCreate () {
  7. if (!hasFetch(this)) {
  8. return
  9. }
  10. this._fetchDelay = typeof this.$options.fetchDelay === 'number' ? this.$options.fetchDelay : 200
  11. Vue.util.defineReactive(this, '$fetchState', {
  12. pending: false,
  13. error: null,
  14. timestamp: Date.now()
  15. })
  16. this.$fetch = $fetch.bind(this)
  17. addLifecycleHook(this, 'created', created)
  18. addLifecycleHook(this, 'beforeMount', beforeMount)
  19. }
  20. }
  21. function beforeMount() {
  22. if (!this._hydrated) {
  23. return this.$fetch()
  24. }
  25. }
  26. function created() {
  27. if (!isSsrHydration(this)) {
  28. <% if (isFullStatic) { %>createdFullStatic.call(this)<% } %>
  29. return
  30. }
  31. // Hydrate component
  32. this._hydrated = true
  33. this._fetchKey = this.$vnode.elm.dataset.fetchKey
  34. const data = nuxtState.fetch[this._fetchKey]
  35. // If fetch error
  36. if (data && data._error) {
  37. this.$fetchState.error = data._error
  38. return
  39. }
  40. // Merge data
  41. for (const key in data) {
  42. Vue.set(this.$data, key, data[key])
  43. }
  44. }
  45. <% if (isFullStatic) { %>
  46. function createdFullStatic() {
  47. // Check if component has been fetched on server
  48. let fetchedOnServer = this.$options.fetchOnServer !== false
  49. if (typeof this.$options.fetchOnServer === 'function') {
  50. fetchedOnServer = this.$options.fetchOnServer.call(this) !== false
  51. }
  52. if (!fetchedOnServer || this.<%= globals.nuxt %>.isPreview || !this.<%= globals.nuxt %>._pagePayload) {
  53. return
  54. }
  55. this._hydrated = true
  56. const defaultKey = this.$options._scopeId || this.$options.name || ''
  57. const getCounter = createGetCounter(this.<%= globals.nuxt %>._fetchCounters, defaultKey)
  58. if (typeof this.$options.fetchKey === 'function') {
  59. this._fetchKey = this.$options.fetchKey.call(this, getCounter)
  60. } else {
  61. const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
  62. this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
  63. }
  64. const data = this.<%= globals.nuxt %>._pagePayload.fetch[this._fetchKey]
  65. // If fetch error
  66. if (data && data._error) {
  67. this.$fetchState.error = data._error
  68. return
  69. }
  70. // If there is a missing payload
  71. if (!data) {
  72. this.$fetch()
  73. return
  74. }
  75. // Merge data
  76. for (const key in data) {
  77. Vue.set(this.$data, key, data[key])
  78. }
  79. }
  80. <% } %>
  81. function $fetch() {
  82. if (!this._fetchPromise) {
  83. this._fetchPromise = $_fetch.call(this)
  84. .then(() => { delete this._fetchPromise })
  85. }
  86. return this._fetchPromise
  87. }
  88. async function $_fetch() {
  89. this.<%= globals.nuxt %>.nbFetching++
  90. this.$fetchState.pending = true
  91. this.$fetchState.error = null
  92. this._hydrated = false
  93. let error = null
  94. const startTime = Date.now()
  95. try {
  96. await this.$options.fetch.call(this)
  97. } catch (err) {
  98. if (process.dev) {
  99. console.error('Error in fetch():', err)
  100. }
  101. error = normalizeError(err)
  102. }
  103. const delayLeft = this._fetchDelay - (Date.now() - startTime)
  104. if (delayLeft > 0) {
  105. await new Promise(resolve => setTimeout(resolve, delayLeft))
  106. }
  107. this.$fetchState.error = error
  108. this.$fetchState.pending = false
  109. this.$fetchState.timestamp = Date.now()
  110. this.$nextTick(() => this.<%= globals.nuxt %>.nbFetching--)
  111. }