Блог

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

Как я могу дождаться импорта скрипта, прежде чем пытаться его использовать, поскольку приведенное ниже не работает:

 export default {
    props: {
        vehicleId: {
            type: Number|String,
            required: true,
            default: () => null
        },
        settings: {
            type: Object,
            default: () => null
        }
    },
    beforeCreate() {
        if (!this.settings) {
            const Axios = () => import('../../../axiosConfig');

            Axios.get('/api/v1/media-slider-settings').then(response => {
                this.settings = response.data;
            });
        }
    },
  

Динамический import возврат обещания, поэтому вы должны использовать then функцию.

Попробуйте что-то подобное:

 <script>
export default {
  beforeCreate() {
    if (!this.settings) {
      import('../../../axiosConfig').then(axios => {
        axios.get('/api/v1/media-slider-settings').then(response => {
          this.settings = response.data;
        });
      });
    }
  },
};
</script>

  

Избегайте подхода с async/await , потому что функции жизненного цикла не поддерживают асинхронность в Vue.js .

Вы почти на месте, import() асинхронны, так что просто сделайте:

 // or use .then if you're not in an async function
const Axios = (await import('../../../axiosConfig')).default

Axios.get('/api/v1/media-slider-settings').then(response => {
  this.settings = response.data;
});
  

и обратите внимание, что import() возвращает модуль, поэтому вам нужно получить .default свойство, если вам нужен экспорт по умолчанию (как в вашем случае) или просто вызвать .someExportedName импорт именованного экспорта (т. Е. Экспорт не по умолчанию из модуля)