Vue.js async / await с функцией затем не выполняется

Question

Я пытаюсь использовать async / await с axios.then () внутри цикла for. Функция не запускается или даже не пытается вызвать axios. У меня есть ощущение, что использование функции then () является частью проблемы.

Мне нужно, чтобы цикл for ожидал выполнения функции then (), прежде чем перейти к следующему элементу массива. Любые идеи, как я могу изменить свой код, чтобы заставить функции axios.then () работать асинхронно?

accounts = [{a},{b},{c}, ...] // Example of accounts array

async function get_user_data (accounts) {
  // For of loop
  for (let [index, user] of accounts.entries()) {
    // Currently using await before axios call
    await axios.get(url, headers)
      .then(function(data) {
        console.log(data)
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}

UPDATE:

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

1. Используйте простые тесты для подтверждения проблемы, а не с кодом
2. Проверьте webpack, babel и другие конфигурации компилятора, если выше не работает

Answer 1

В общем случае анти-шаблон считается смешиванием интерфейса обещания (т. Е. .then()) с семантикой await/async.

Учитывая, что функция get_user_data определена async, рассмотримпересмотренная реализация, основанная на блоке try/catch для более четкого выполнения программы и большей предсказуемости в асинхронном поведении вашего цикла:

async function get_user_data (accounts) {
  for (let [index, user] of accounts.entries()) {

    /* try/catch block allows async errors/exceptions to be caught
    without then need for a .catch() handler */
    try {    

        /* Using await, the response data can be obtained in this 
        way without the need for a .then() handler */
        const data = await axios.get(url, headers)
        console.log(data);
    }
    catch(error) {

        /* If an error occurs in the async axios request an exception
        is thrown and can be caught/handled here */
        console.log(error)
    }
  }
}

Answer 2

  async get_user_data(accounts) {
        // For of loop
        (async() => {
            for (let [index, user] of accounts.entries()) {
                // Currently using await before axios call
                await axios.get(url, headers)
                    .then(function(data) {
                        console.log(data)
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        })();
    },

Answer 3

Спасибо Dacre Denny за быструю помощь. Его тестовый код помог мне определить, что проблема не в коде.

Проблема в конечном итоге была вызвана тем, что интерфейс Vue компилировал мое приложение, которое на данный момент не поддерживает async / await из коробки. Решено следующим решением о переполнении стека , размещенным здесь . Обратите внимание, что код теперь работает как положено. Takeways:

1. Используйте простые тесты для подтверждения проблемы, а не с кодом
2. Проверьте webpack, babel или другие конфигурации компилятора, если выше не работа
3. Отсутствие ошибок в случае сбоя функции может указывать на ошибку компиляции. Проверьте конфиги.