From 00ddf9138fbc61b33d73e687ac5d37b321b43243 Mon Sep 17 00:00:00 2001 From: Bochkarev Ivan Date: Tue, 17 Sep 2024 07:21:40 +0600 Subject: [PATCH] =?UTF-8?q?feat(docs)=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=BE=D0=B4?= =?UTF-8?q?=20Exploring=20Different=20Features=20of=20the=20Fetch=E2=80=A6?= =?UTF-8?q?=20(#82)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(docs) Добавлен перевод Exploring Different Features of the Fetch Hook * feat(docs) Добавлен перевод Exploring Different Features of the Fetch Hook * Apply suggestions from code review Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com> --------- Co-authored-by: Ivan Bochkarev Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com> --- ...erstanding-how-fetch-works-in-nuxt-2-12.md | 223 +++++++++--------- 1 file changed, 111 insertions(+), 112 deletions(-) diff --git a/content/7.blog/7.understanding-how-fetch-works-in-nuxt-2-12.md b/content/7.blog/7.understanding-how-fetch-works-in-nuxt-2-12.md index 4e089ff29..fed814a85 100644 --- a/content/7.blog/7.understanding-how-fetch-works-in-nuxt-2-12.md +++ b/content/7.blog/7.understanding-how-fetch-works-in-nuxt-2-12.md @@ -1,26 +1,26 @@ --- -title: 'Understanding how fetch works in Nuxt 2.12' -description: Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications. +title: 'Понимание работы fetch в Nuxt 2.12' +description: Изучение различных функций хука fetch и изучение нового способа внесения данных в приложения Nuxt. image: /assets/blog/understanding-how-fetch-works-in-nuxt-2.12.png date: 2020-04-06 authors: - - name: Krutie Patel + - name: Крути Патель avatarUrl: https://github.com/Krutie.png link: https://twitter.com/KrutiePatel category: Релиз --- -Nuxt introduces a new `fetch` with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications. +Nuxt представляет новый `fetch` с последним релизом версии 2.12. Fetch предоставляет совершенно новый способ получениях данных в приложениях Nuxt. -In this post, we will explore different features of the fetch hook and try to understand how it works. +В этом посте мы рассмотрим различные функции хука fetch и попытаемся понять, как он работает. -## Fetch Hook and Nuxt Lifecycle +## Хук Fetch и жизненный цикл Nuxt -In terms of Nuxt lifecycle hooks, `fetch` sits within Vue lifecycle after `created` hook. As we already know that, all Vue lifecycle hooks are called with their `this` context. The same applies to `fetch` hook as well. +С точки зрения хуков жизненного цикла Nuxt, `fetch` находится в рамках жизненного цикла Vue после хука `created`. Как мы уже знаем, все хуки жизненного цикла Vue вызываются с их контекстом `this`. То же самое относится и к хуку fetch. -![New fetch in Nuxt lifecycle](/assets/blog/new-fetch-lifecycle-hooks.png) +![Новый fetch в жизненном цикле Nuxt](/assets/blog/new-fetch-lifecycle-hooks.png) -Fetch hook is called after the component instance is created on the server-side. That makes `this` context available inside the `fetch`. +Хук fetch вызывается после создания экземпляра компонента на сервере. Это делает контекст `this` доступным внутри `fetch`. ```js export default { @@ -30,47 +30,47 @@ export default { } ``` -Let’s see what this could mean for page components. +Давайте посмотрим, что это может означать для компонентов страниц. -### Page Components +### Компоненты страниц -With the help of `this` context, fetch is able to mutate component’s data directly. It means we can set the component’s local data without having to dispatch Vuex store action or committing mutation from the page component. +С помощью контекста `this` fetch может напрямую изменять данные компонента. Это означает, что мы можем устанавливать локальные данные компонента, не прибегая к dispatch-действия Vuex или commit-мутациям из компонента страницы. -As a result, Vuex becomes optional, but not impossible. We can still use `this.$store` as usual to access Vuex store if required. +В результате Vuex становится необязательным, но не невозможным. Мы все еще можем использовать `this.$store` как обычно для доступа к хранилищу Vuex, если это необходимо. -## Availability of fetch hook +## Доступность хука fetch -With `fetch`, we can prefetch the data asynchronously **in any Vue components**. It means, other than page components found in `/pages` directory, every other `.vue` components found in `/layouts` and `/components` directories can also benefit from the fetch hook. +С `fetch` мы можем предварительно загружать данные асинхронно **в любом Vue-компоненте**. Это означает, что помимо компонентов страниц, найденных в директории `/pages`, каждый другой `.vue` компонент, найденный в директориях `/layouts` и `/components`, также может извлечь выгоду из хука fetch. -Let's see what this could mean for layout and building-block components. +Давайте посмотрим, что это может означать для лаяутов и компонентов строительных блоков. -### Layout Components +### Компоненты лаяута -Using new `fetch`, now we can make API calls directly from the layout components. This was impossible prior to the release of v2.12. +Используя новый `fetch`, теперь мы можем делать API-вызовы непосредственно из компонентов лаяута. Это было невозможно до выхода версии 2.12. -**Possible use cases** +**Возможные варианты использования** -- Fetch config data from the back-end in Nuxt layouts to generate footer and navbar dynamically -- Fetch user related data (i.e. user profile, shopping-cart item count) in the navbar -- Fetch site relevant data on `layouts/error.vue` +- Получение данных конфигурации с сервера в лаяутах Nuxt для динамического создания футера и навигационной панели +- Получение данных, связанных с пользователем (например, профиль пользователя, количество товаров в корзине) в навигационной панели +- Получение данных, относящихся к сайту, на `layouts/error.vue` -### Building-block (Child/Nested) Components +### Строительные блоки (Дочерние/Вложенные компоненты) -With `fetch` hook available in child components as well, we can off-load some of the data-fetching tasks from page-level components, and delegate them over to nested components. This was also impossible prior to the release of v2.12. +С доступным хуком `fetch` в дочерних компонентах мы можем переложить часть задач по получению данных с компонентов уровня страницы на вложенные компоненты. Это также было невозможно до выхода версии 2.12. -This reduces the responsibility of route-level components to a great extent. +Это значительно уменьшает ответственность компонентов уровня маршрута. -**Possible use case -** We can still pass props to child components, but if the child components need to have their own data-fetching logic, now they can! +**Возможный вариант использования** - Мы все еще можем передавать пропсы дочерним компонентам, но если дочерним компонентам нужна собственная логика получения данных, теперь они могут делать это сами! -## Call order of multiple fetch hooks +## Порядок вызова нескольких хуков fetch -Since each component can have its own data-fetching logic, you may ask what would be the order in which each of them are called? +Поскольку каждый компонент может иметь свою собственную логику получения данных, вы можете спросить, в каком порядке будут вызываться каждый из них? -Fetch hook is called on server-side once (on the first request to the Nuxt app) and then on client-side when navigating to further routes. But since we can define one fetch hook for each component, fetch hooks are called in sequence of their hierarchy. +Хук fetch вызывается на сервере один раз (при первом запросе к приложению Nuxt) и затем на клиенте при навигации по дальнейшим маршрутам. Но поскольку мы можем определить один хук fetch для каждого компонента, хуки fetch вызываются в последовательности их иерархии. -### Disabling fetch on server-side +### Отключение fetch на сервере -In addition, we can even disable fetch on the server-side if required. +Кроме того, мы можем даже отключить fetch на сервере, если это необходимо. ```js export default { @@ -78,17 +78,17 @@ export default { } ``` -And this way, the fetch hook will only be called on client-side. When `fetchOnServer` is set to false, `$fetchState.pending` becomes `true` when the component is rendered on server-side. +И таким образом, хук fetch будет вызываться только на клиенте. Когда `fetchOnServer` установлен в `false`, `$fetchState.pending` становится `true`, когда компонент отображается на сервере. -## Error Handling +## Обработка ошибок -New `fetch` handles error at component level. Let’s see how. +Новый `fetch` обрабатывает ошибки на уровне компонента. Давайте посмотрим как. -Because we’re fetching data asynchronously, the new fetch() provides a `$fetchState` object to check whether the request has finished and progressed successfully. +Поскольку мы получаем данные асинхронно, новый `fetch()` предоставляет объект `$fetchState` для проверки, завершился ли запрос, и прошел ли он успешно. -Below is what the `$fetchState` object looks like. +Ниже представлен объект `$fetchState`. -``` +```js $fetchState = { pending: true | false, error: null | {}, @@ -96,19 +96,19 @@ $fetchState = { }; ``` -We have three keys, +У нас есть три ключа: -1. **Pending -** lets you display a placeholder when fetch is being called on client-side -2. **Error -** lets you show an error message -3. **Timestamp -** shows timestamp of the last fetch which is useful for caching with `keep-alive` +1. **Pending -** позволяет отображать плейсхолдер, когда `fetch` вызывается на клиенте +2. **Error -** позволяет отображать сообщение об ошибке +3. **Timestamp -** показывает временную метку последнего `fetch`, что полезно для кэширования с `keep-alive` -These keys are then used directly in the template area of the component to show relevant placeholders during the process of fetching data from the API. +Эти ключи затем используются непосредственно в области шаблона компонента для отображения соответствующих плейсхолдеров в процессе получения данных из API. ```html ``` -When error occurs at **component-level**, we can set HTTP status code on server-side by checking `process.server` in fetch hook and follow it up with `throw new Error()` statement. +Когда возникает ошибка на уровне компонента, мы можем установить HTTP-код состояния на сервере, проверив `process.server` в хуке `fetch`, и затем выполнить оператор `throw new Error()`. ```js async fetch() { - const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`) - .then((res) => res.json()) + const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`) + .then((res) => res.json()) - if (post.id === this.$route.params.id) { - this.post = post + if (post.id === this.$route.params.id) { + this.post = post } else { - // set status code on server and - if (process.server) { - this.$nuxt.context.res.statusCode = 404 - } - // use throw new Error() - throw new Error('Post not found') + // установить код состояния на сервере и + if (process.server) { + this.$nuxt.context.res.statusCode = 404 + } + // использовать throw new Error() + throw new Error('Пост не найден') } } ``` -Setting the HTTP status code this way **is useful for correct SEO**. +Установка HTTP-кода состояния таким образом **полезна для правильного SEO**. -## Fetch as a method +## Fetch как метод -New fetch hook also acts as a method that can be invoked upon user interaction or invoked programmatically from the component methods. +Новый хук fetch также действует как метод, который может быть вызван при взаимодействии пользователя или вызван программно из методов компонента. ```html - - + + ``` ```js -// from component methods in script section +// из методов компонента в разделе скрипта export default { methods: { refresh() { @@ -158,13 +158,13 @@ export default { } ``` -## Making Nuxt pages more performant +## Повышение производительности страниц Nuxt -We can use `:keep-alive-props` prop and `activated` hook to make Nuxt page components more performant using a new fetch hook. +Мы можем использовать пропс `:keep-alive-props` и хук `activated` для повышения производительности компонентов страниц Nuxt с помощью нового хука fetch. -Nuxt allows **caching a certain number of pages** in the memory along with their fetched data. And also allows **adding a number of seconds** before we can re-fetch the data. +Nuxt позволяет **кэшировать определенное количество страниц** в памяти вместе с их полученными данными. А также позволяет **добавить количество секунд** до того, как мы сможем повторно получить данные. -For any of the above methods to work, we have to use the `keep-alive` prop in generic `` and ` components. +Для работы любого из вышеуказанных методов мы должны использовать пропс`keep-alive` в общих компонентах `` и ``. ```html{}[layouts/default.vue] ``` -In addition, we can pass `:keep-alive-props` to `` component to cache a number of pages along with their fetched data. +Кроме того мы можем передать `:keep-alive-props` в компонент ``, чтобы кэшировать определенное количество страниц вместе с их полученными данными. -`:keep-alive-props` prop allow us to indicate the maximum number of pages that should be kept in the memory while we navigate elsewhere within the site. +Пропс `:keep-alive-props` позволяет нам указать максимальное количество страниц, которые должны храниться в памяти, пока мы перемещаемся по сайту. ```html{}[layouts/default.vue] ``` -Above is one way to boost page performance which is more high-level and generic, while the next one drills down to optimize the fetch request calls by using the `timestamp` property of `$fetchState` and comparing it against the number of seconds delay before it re-fetches the data. +Выше представлен один из способов повышения производительности страниц, который является более высокоуровневым и общим, в то время как следующий способ углубляется в оптимизацию вызовов запросов fetch, используя свойство `timestamp` объекта `$fetchState` и сравнивая его с количеством секунд задержки до повторного получения данных. -Vue’s `activated` hook is used here with Nuxt's `keep-alive` prop to re-fetch the data. +Хук `activated` Vue используется здесь с пропсом `keep-alive` Nuxt для повторного получения данных. ```js export default { activated() { - // Call fetch again if last fetch more than a minute ago + // Вызвать fetch снова, если последний fetch был более минуты назад if (this.$fetchState.timestamp <= Date.now() - 60000) { this.$fetch() } @@ -197,17 +197,17 @@ export default { } ``` -## asyncData vs Fetch +## asyncData против Fetch -As far as page components are concerned, new `fetch` seems way too similar to `asyncData()` because they both deal with the local data. But there are some key differences worth taking note of as below. +Что касается компонентов страниц, новый `fetch` кажется слишком похожим на `asyncData()`, потому что они оба имеют дело с локальными данными. Но есть некоторые ключевые различия, которые стоит отметить, как показано ниже. -As of Nuxt 2.12, `asyncData` method is still an active feature. Let’s examine some of the key differences between `asyncData` and new `fetch`. +Начиная с Nuxt 2.12, метод `asyncData` по-прежнему является активным функционалом. Давайте рассмотрим некоторые ключевые различия между `asyncData` и новым `fetch`. ### asyncData -1. `asyncData` is limited to only page-level components -2. `this` context is unavailable -3. Adds payload by **returning** the data +1. `asyncData` ограничен только компонентами уровня страницы +2. Контекст `this` недоступен +3. Добавляет полезную нагрузку, **возвращая** данные ```js export default { @@ -215,18 +215,18 @@ export default { const data = await context.$axios.$get( `https://jsonplaceholder.typicode.com/todos` ) - // `todos` does not have to be declared in data() + // `todos` не нужно объявлять в data() return { todos: data.Item } - // `todos` is merged with local data + // `todos` объединяется с локальными данными } } ``` -### New Fetch +### Новый Fetch -1. `fetch` is available in all Vue components -2. `this` context is available -3. Simply **mutates** the local data +1. `fetch` доступен во всех Vue-компонентах +2. Контекст `this` доступен +3. Просто **изменяет** локальные данные ```js export default { @@ -239,31 +239,30 @@ export default { const { data } = await axios.get( `https://jsonplaceholder.typicode.com/todos` ) - // `todos` has to be declared in data() + // `todos` должен быть объявлен в data() this.todos = data } } ``` -## Fetch before Nuxt 2.12 - -If you have been working with Nuxt for a while, then you’ll know that the previous version of `fetch` was significantly different. +## Fetch до Nuxt 2.12 -> **Is this a breaking change?** +Если вы работали с Nuxt какое-то время, то знаете, что предыдущая версия `fetch` значительно отличалась. -> No, it isn't. Actually, the old fetch can still be used by passing the `context` as the first argument to avoid any breaking changes in your existing Nuxt applications. +> **Это критическое изменение?** +> Нет, это не так. На самом деле, старый fetch все еще можно использовать, передав `context` в качестве первого аргумента, чтобы избежать каких-либо критических изменений в ваших существующих приложениях Nuxt. -Here’s the list of notable changes in `fetch` hook compared with **before** and **after** v2.12. +Вот список заметных изменений в хуке `fetch` по сравнению с **до** и **после** версии 2.12. -### 1. Call order of `fetch` hook +### 1. Порядок вызова хука `fetch` -**Before -** `fetch` hook was called before initiating the component, hence `this` wasn’t available inside the fetch hook. +**До -** Хук `fetch` вызывался до инициализации компонента, поэтому `this` не был доступен внутри хука fetch. -**After -** `fetch` is called after the component instance is created on the server-side when the route is accessed. +**После -** `fetch` вызывается после создания экземпляра компонента на сервере при доступе к маршруту. -### 2. `this` vs `context` +### 2. `this` против `context` -**Before -** We had access to the Nuxt `context` on page-level components, given that the `context` is passed as a first parameter. +**До -** У нас был доступ к контексту Nuxt на компонентах уровня страницы, учитывая, что `context` передается в качестве первого параметра. ```js export default { @@ -273,7 +272,7 @@ export default { } ``` -**After -** We can access `this` context just like Vue client-side hooks without passing any parameters. +**После -** Мы можем получить доступ к контексту `this` как и в хуках Vue на клиенте без передачи каких-либо параметров. ```js export default { @@ -283,36 +282,36 @@ export default { } ``` -### 3. Availability of `fetch` hook +### 3. Доступность хука `fetch` -**Before -** Only page (route-level) components were allowed to fetch data on the server-side. +**До -** Только компоненты страниц (уровня маршрута) могли получать данные на сервере. -**After -** Now, we can prefetch the data asynchronously in any Vue components. +**После -** Теперь мы можем предварительно загружать данные асинхронно в любом Vue-компоненте. -### 4. Call order of `fetch` hook +### 4. 4. Порядок вызова хука `fetch` -**Before -** `fetch` could be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. +**До -** `fetch` мог быть вызван на сервере один раз (при первом запросе к приложению Nuxt) и на клиенте при навигации по дальнейшим маршрутам. -**After -** New `fetch` is the same as an old fetch, but… +**После -** Новый `fetch` такой же, как старый fetch, но… -…since we can have one `fetch` for each component, `fetch` hooks are called in sequence of their hierarchy. +…поскольку мы можем иметь один `fetch` для каждого компонента, хуки fetch вызываются в последовательности их иерархии. -### 5. Error Handling +### 5. Обработка ошибок -**Before -** We used the `context.error` function that showed a custom error page when an error occurred during API calls. +**До -** Мы использовали функцию `context.error`, которая показывала пользовательскую страницу ошибки при возникновении ошибки во время API-вызовов. -**After -** New `fetch` uses the `$fetchState` object to handle errors in the template area during API calls. +**После -** Новый `fetch` использует объект `$fetchState` для обработки ошибок в области шаблона во время API-вызовов. -Error handling is performed at component level. +Обработка ошибок выполняется на уровне компонента. -> **Does this mean we cannot show users a custom error page like we did prior to Nuxt 2.12?** +> **Значит ли это, что мы больше не можем показывать пользователям пользовательскую страницу ошибки, как мы делали до Nuxt 2.12?** -Yes we can, but only with `asyncData()` when it's about page-level component data. When using `fetch`, we can utilize `this.$nuxt.error({ statusCode: 404, message: 'Data not found' })` to show a custom error page. +Да, мы можем, но только с `asyncData()`, когда речь идет о данных компонентов уровня страницы. При использовании fetch мы можем использовать `this.$nuxt.error({ statusCode: 404, message: 'Данные не найдены' })`, чтобы показать пользовательскую страницу ошибки. -## Conclusion +## Заключение -New fetch hook brings a lot of improvements and provides more flexibility in fetching data and organizing route-level & building-block components in a whole new way! +Новый хук fetch приносит множество улучшений и обеспечивает большую гибкость в получении данных и организации компонентов уровня маршрута и строительных блоков новым способом! -It will certainly make you think a little differently when you plan and design your new Nuxt project that requires multiple API calls within the same route. +Это, безусловно, заставит вас думать немного иначе, когда вы планируете и проектируете новое приложение Nuxt, требующее нескольких API-вызовов в пределах одного маршрута. -I hope this article has helped you get acquainted with the new `fetch` feature. I'd love to see what you build with it. +Надеюсь, эта статья помогла вам ознакомиться с новой функцией `fetch`. Буду рад увидеть, что вы создадите с её помощью.