> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/komponenty/asinkhronnye-komponenty.md).

# Асинхронные компоненты

## Асинхронные компоненты

Иногда бывает удобно разделить крупное приложение на части и подгружать компоненты с сервера только тогда, когда в них возникнет потребность. Для этого Vue позволяет определить компонент как функцию-фабрику, асинхронно возвращающую определение компонента. Vue вызовет фабричную функцию только тогда, когда компонент действительно понадобится, и закэширует результат для дальнейшего использования. Например:

```javascript
Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Передаём определение компонента в коллбэк resolve
    resolve({
      template: '<div>Я — асинхронный!</div>'
    })
  }, 1000)
})
```

Функция-фабрика принимает параметр `resolve` — коллбэк, который вызывается после того, как определение компонента получено от сервера. Кроме того, можно вызвать `reject(reason)`, если загрузка по какой-либо причине не удалась. Мы используем `setTimeout` исключительно в демонстрационных целях; как именно получать компонент в реальной ситуации — решать только вам самим. Один из удачных подходов — это использовать асинхронные компоненты в связке с функциями Webpack по разделению кода:

```javascript
Vue.component('async-webpack-example', function (resolve) {
  // Специальный синтаксис require укажет Webpack
  // автоматически разделить сборку на части
  // для последующей асинхронной загрузки
  require(['./my-async-component'], resolve)
})
```

Вы также можете вернуть `Promise` в функции-фабрике, так что с Webpack 2 и синтаксисом ES2015 можно сделать так:

```javascript
Vue.component(
  'async-webpack-example',
  // Функция `import` возвращает Promise.
  () => import('./my-async-component')
)
```

При использовании локальной регистрации компонентов, вы также можете непосредственно указывать функцию, которая возвращает `Promise`:

```javascript
new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})
```

## Управление состоянием загрузки

Фабрика асинхронного компонента также может возвращать объект следующего формата:

```javascript
const AsyncComponent = () => ({
  // Загружаемый компонент. Значение должно быть Promise
  component: import('./MyComponent.vue'),
  // Компонент загрузки, используемый пока загружается асинхронный компонент
  loading: LoadingComponent,
  // Компонент ошибки, используемый при неудачной загрузке
  error: ErrorComponent,
  // Задержка перед показом компонента загрузки. По умолчанию: 200 мс.
  delay: 200,
  // Компонент ошибки будет отображаться, если таймаут
  // был указан и время ожидания превышено. По умолчанию: Infinity.
  timeout: 3000
})
```

> Обратите внимание, что вы должны использовать [Vue Router](https://github.com/vuejs/vue-router) версии 2.4.0+ если вы хотите использовать указанный выше синтаксис для компонентов маршрута.