Nuxt fetch error

Начиная с версии 2.12 в Nuxt появился новый подход к получению данных приложением.

Хук Fetch и жизненный цикл Nuxt

Сверху вниз

    NuxtServerInit
        |
   Route Middleware
        |
     validate     
        |
    asyncData()
        |
   beforeCreate()
        |
     created() 
        |
[$fetchState.pending = true]
  >>> fetch() <<<
        |
     mounted()
[$fetchState.pending = false]
      

Хук fetch() вызывается  после  того, как экземпляр компонента создан на стороне сервера. Это делает доступным контекст this внутри fetch().

export default {
	fetch() {
        console.log(this)
    }
}

Page Components

И так что же это означает для компонентов страниц (pages). При помощи контекста this, fetch может изменить данные компонента напрямую. Это значит, что можно определить локальные данные компонента, без необходимости вызывать события/фиксировать изменения через  Vuex Store для Page компонента.

В результате Vuex становиться не обязательным. Конечно по прежнему можно использовать  this.$store, как обычно для доступа к Vuex Store, если необходимо.

Доступность хука fetch()

Используя fetch() можно асинхронно загружать данные в любых компонентах.  Это означает, что не только компоненты в директории /pages/*, но и любые другие .vue компоненты в  /layouts и /components могут использовать этот подход.

Layouts (макеты)

Теперь, используя новый подход с fetch(), возможно делать запросы непосредственно из Layout компонентов. Что  было невозможно до версии Nuxt 2.12.

Возможное применение:

• Загрузка конфигурации с сервера, для динамической генерации футер (footer) или навигации (navbar)
• Загрузка данных пользователя, например профиль, корзина в navbar
• Загрузка соответствующих сайту данных в layouts/error.vue

Блочные (Child/Nested) компоненты

Используя fetch() в дочерних, можно исключить загрузку некоторых данных из уровня компонента страницы Page, делегировать часть задач загрузки в дочерние компоненты. Все еще можно передать параметры в дочерние компоненты, но данные каждый компонент сможет загрузить самостоятельно.

Порядок выполнения при множественном использовании fetch()

Очевидный вопрос, если каждый компонент может сам загружать данные, то в каком порядке происходит загрузка.

fetch() выполняется на стороне сервера один раз (при первом запросе Nuxt приложения) и затем выполняется на стороне клиента при запросе соответствующего маршрута. Но поскольку можно определить fetch() для каждого компонента, все они будут исполняться последовательно в соответствие с иерархией.

Отключение fetch() на стороне сервера

Можно отключить  выполнение fecth() на стороне сервера, выполнение будет проходить только на стороне клиента:

export default {
    fetchOnServer: false
}

Свойство $fetchState.pending на стороне сервера будет установлено в true

Обработка ошибок

Обработка ошибок теперь происходит на уровне компонента. Поскольку данные загружаются асинхронно, fetch() предлагает  объект $fetchState для контроля за состоянием запроса:

$fetchState = {
    pending: true | false,
    error: null | [],
    timestamp: Integer
}

1. pending — поможет в отображении статуса загрузки
2. Error — сообщения об ошибках
3. Timestamp — отображает временную метку последнего запроса, которую можно использовать при кешировании совместно с keep-alive

<template>
    <div>
      <p v-if="$fetchState.pending">Loading data...</p>
	  <p v-else-if="$fetchState.error">Error while lodaing!</p>
      <ul v-else>
          <li v-for="..." />
      </ul>    
    </div>
</template>    

При возникновении ошибки  на уровне компонента, можно установить HTTP статус на стороне сервера используя проверку process.server внутри fetch() и передать через throw new Error()

async fetch() {
    const post = await fetch('//url/post').then((res) => res.json())
    if (post.id === this.$route.params.id) {
        this.post = post
    } else {
        // on server
        if (process.server) {
            this.$nuxt.context.res.statusCode = 404
        }
        
        // throw
        throw new Error('Post not found')
    }
}

Установка правильного статуса ответа кране важна для SEO.

fetch() как метод

fetch() можно использовать как обычный метод. Например для программного обновления данных

<button @click="$fetch">refresh</button>

или в методе компонента

export default {
    methods: {
        refresh() {
            this.$fetch()
        }
    }
}

Эффективность страниц

Используем :keep-alive-props, хук activated и хук fetch() вместе, для повышения эффективности страниц.

Nuxt может кешировать в памяти страницы вместе с извлеченными данными. И указать количество секунд, через которое следует запросить данные снова.

Используем keep-alive на <nuxt /> и <nuxt-child />

<template>
	<div>
    	<nuxt keep-alive />
    </div>
</template>

для добавления параметров используем :keep-alive-props

<nuxt keep-alive :keep-alive-props="{ max: 10 }" />

Это один из способов повышения производительности страниц. Это общий универсальный способ. Другой подход использовать свойство $fetchData.timestamp для более точной настройки. Используется Vue хук activated

export default {
    activated() {
        // more than 1 minute ago
        if (this.$fetchState.timestamp <= Date.now() - 60000) {
            this.$fetch()
        }
    }
}

asyncData vs Fetch

asyncData

1. asyncData работает только для page-компонентов
2. this контекст не доступен
3. Добавляет результат возвращая значение

export default {
	async asyncData(context) {
        const data await context.$axios.$get('//fetch/url')
        return  {
            todos: data.item
        }
    }
}

новый fetch()

1. Доступен во всех Vue компонентах
2. this контекст доступен
3. Просто изменяет локальные данные

export default {
    data() {
        return {
            todos: []
        }
    },
    async fetch() {
        const { data } = await axios.get('//fetch/url')
        this.todos = data
    }
}

И так

Новый fetch() предлагает множество улучшений, большую гибкость при получении данных и организации маршрутов, а также возможность загружать данные на уровне отдельных строительных блоков страницы (pages, layouts, componnets).  Новый подход предполагает множество запросов к API для одной страницы, что требует внимательней относиться к проектированию страниц и приложения в целом.

In the process of studying Nuxt source code, I found that the operation process of FETCH was completely different from what was said on the official website, so I had a brainwave and went to the English official website… As expected, FETCH has been updated in Nuxt 2.12, which can be said to be completely changed and more powerful. However, the document on the Chinese official website is still 2.11.x and has not been updated. After reading the English document, I found this blog post on the official website. It is very good and I want to translate it for the reference of students learning Nuxt. After all, there are basically no Chinese materials at present.

introduce

Nuxt introduced a new method called Fetch in the latest release 2.12. Fetch provides an entirely new way to bring data into Nuxt applications. In this article, we’ll explore the different capabilities of the Fetch hook and try to understand how it works.

Fetch hook function Nuxt life cycle

Nuxt’s fetch function runs after Vue’s CREATE hook function. As we know, all Vue lifecycle hook functions are called in their this context, and FETCH is no exception.

export default {
  fetch() {
    console.log(this); }};Copy the code

Let me take a look at what this means for page components.

For page components

With the help of this context, FETCH can change the component’s data directly, which means that we can set the component’s local data directly without using external stores like Vuex to store the data. This makes the Vuex an option. You can still use this.$store if you want to use it.

Availability of the Fetch hook function

With the fetch function we can prefetch asynchronous data from any Vue component. This means that the previous restriction that could only be used by Vue components in the Page directory is removed and all Vue components can use the FETCH function. Examples are vue components in the /layouts and/Components directories. What does this mean for layouts and build-block components

Layout components

By using the new FETCH function, we can make API calls directly from the Layout component. This was not possible before V2.12 was released. Some examples of usage:

• Get the configuration data from the back end and dynamically generate the footer and navigation bar
• Get user related information, such as user profile, number of items in shopping cart
• Can be found inlayouts/error.vueGet site-related data

Build-block components

Since we can use the hook function in the child component, we can delegate all the data fetching that was previously done in the page component to the child component fetch. This greatly reduces the task of routing level (Page) components. We can still use props to pass data to the child component, but if the child component needs its own fetching logic, this is now possible!

The order in which multiple hook functions are run

Since each component can have its own data retrieval logic, you might ask, what is the order in which each component is called? The Fetch hook is called once on the server side (at the first request of the Nuxt application, and then when the client navigates to another path. But since we can define a FETCH hook for each component, the FETCH hooks are invoked in their hierarchical order. The page hook function runs before the Components hook function.

Disable FETCH on the server

You can easily disable the FETCH function on the server if you want.

export default {
  fetchOnServer: false
};
Copy the code

Error handling

The new FETCH error handling mechanism is component-level, let’s see how this is implemented. Since we are retrieving data asynchronously, the new fetch () provides an object to check whether the request has ended and succeeded. This is what this object looks like —$fetchState

$fetchState = {
  pending: true | false.error: null | {},
  timestamp: Integer
};
Copy the code

There are three properties:

1. Peding — lets you display a placeholder (whether a request is being made) when a client calls fetch.
2. Error — Allows you to display Error messages
3. **Timestamp **- displays the Timestamp of the last fetch call, which is useful for components that use caching via keep-alive

These values can be used directly in the component’s template to show Loding during the data acquisition process.

template
  div
    p v-if="$fetchState.pending"Fetching posts.../p
    p v-else-if="$fetchState.error"Error while fetching posts/p
    ul v-else
      …
    /ul
  /div
/template
Copy the code

When errors occur at the component level, we can set the HTTP status code on the server side by judging process.server in the FETCH hook, and use the Throw New Error() statement for subsequent processing.

async fetch() {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/The ${this.$route.params.id}`)
                     .then((res) =  res.json())

  if (post.id === this.$route.params.id) {
      this.post = post
    } else {
      // Set the status code on the server
      if (process.server) {
        this.$nuxt.context.res.statusCode = 404
      }
      // Then throw an error
      throw new Error('Post not found')}}Copy the code

Setting HTTP status codes like this is helpful for proper SEO.

Fetch can also be invoked using methods

The new Fetch hook is also a method that can be invoked during user interaction or within Methods.

! -- from template in template --
button @click="$fetch"Refresh Data/button
Copy the code

// from component methods in script section
export default {
  methods: {
    refresh() {
      this.$fetch(); }}};Copy the code

Enhanced performance of Nuxt pages

Nuxt allows you to cache a certain number of pages and their fetched data in memory by using the keep-alive-props and activated hook functions. You can also set the expiration time of these caches. If we want to use the method mentioned above, we need to add keep-alive Prop to the and component.

! -- layouts/default.vue --
template
  div
    nuxt keep-alive /
  /div
/template
Copy the code

We can also control the number of cached pages by adding :keep-alive-props.

nuxt keep-alive :keep-alive-props="{ max: 10 }" /
Copy the code

The above is an advanced and generic way to improve page performance. We can also optimize the call of the fetch request by using $fetchstate.timestamp, mainly by comparing the timestamp of the last request, to achieve a more liberal caching strategy

export default {
  activated() {
    // If the last request has been more than a minute, make the request again
    if (this.$fetchState.timestamp = Date.now() - 60000) {
      this.$fetch(); }}};Copy the code

asyncData vs Fetch

For page components, the new FETCH seems too similar to asyncData. Since they are both responsible for handling local data, there are still some key differences worth noting, as follows:

AsyncData

1. The asyncData method can only be used in the page component (routing level component)
2. AsyncData is called before the component is instantiated, so this is not accessible
3. Add data to the component through retrun

export default {
  async asyncData(context) {
    const data = await context.$axios.$get(
      `https://jsonplaceholder.typicode.com/todos`
    );
    // 'todos' does not need to be declared in data
    return { todos: data.Item };
    // 'todos' will merge with local data}};Copy the code

New Fetch

1. Fetch is available in all VUE components
2. Fetch is called after the component is instantiated and can access this
3. It is very simple to modify local data directly

export default {
  data() {
    return {
      todos: []}; },async fetch() {
    const { data } = await axios.get(
      `https://jsonplaceholder.typicode.com/todos`
    );
    // `todos` has to be declared in data()
    this.todos = data; }};Copy the code

Fetch before Nuxt 2.12

If you’ve been using Nuxt for a while, you’ll notice that the new FETCH is completely different from the previous version.

Is this a destructive update (does it make the previous fetch unavailable)

In fact, no, we can still pass the context parameter to fetch to use the fetch from the previous version, that is, without making any disruptive changes to your application. Here are some comparisons of fetch between the old and new versions

1. When to call the fetch hook

** Old: ** was called before the component was instantiated, so this cannot be accessed ** New: ** When accessing a route is called after the component was instantiated, this can be accessed

2. this VS context

** Old: ** We can access the Nuxt context on the page-level component if the context is passed as the first argument.

export default {
  fetch(context) {
    / /...}};Copy the code

** New: ** We can access this context as if it were a Vue client hook function, without passing any arguments.

export default {
  fetch() {
    console.log(this.data); }};Copy the code

3. The availability

** Old: ** can only be called on the server side in a page component (routing level component). ** New: ** can be used in any VUE component to get asynchronous data.

4. Fetch hook call sequence

** Old: ** Fetch can be called once on the server (when the first request arrives on the NUxT server), and every time before navigating to the component that contains fetch on the client ** new: ** The new fetch and the old fetch are actually the same calls, but since the new FETCH can be set in a child component, the order of calls to the fetch is based on their structural hierarchy.

5. Error handling

Old: We use context.error to display a custom error page when an error occurs during an API call. New: The new FETCH uses the $fetchState object to handle errors in the template area during API calls. Its error handling is component-level.

Does this mean we can’t show custom error pages to users in Nuxt 2.12? ** Of course not, we can still use asyncData() in page-level components to display custom error pages by calling this.$nuxt.error({statusCode: 404, message: ‘Data not found’}).

conclusion

The new Fetch hook function brings many improvements and provides more flexibility to fetch data and organize routing-level and building-block components in a whole new way! When you’re planning and designing a new Nuxt project that requires multiple API calls in a single route, it definitely makes you think a little differently. I hope this article has helped you get familiar with the new FETCH feature. I look forward to seeing what you can do with it.