Javascript async / await объяснение поведения

async / await - это новое поколение обещаний. По сути, await будет задерживать выполнение остальной части кода до разрешения await. Например.

async function getUser() {    
     const id = 'zzzz';    
     const user = await get(`http://getuser.xxx/{id}`);

     console.info(user);    
}

Единственная консоль печатается после выполнения функции get.

await делает то, что написано на коробке: он ожидает ответа вашей асинхронной функции:

let asyncFunc = () =>
    new Promise((resolve,reject) => {
       setTimeout(() => resolve("This is async"), 5000)
    });

console.info("before await");
console.info(await asyncFunc());
console.info("after await");

Будет записан "before await", затем, через 5 секунд, будет записан "This is async", а затем "after await".

Это в основном заставляет асинхронную функцию вести себя синхронно.

По отдельности да, async/await - синтаксический сахар для обещаний. Вам не хватает более широкого контекста: сами обещания присутствуют, потому что JS не мог приостановить выполнение функции до того, как появился await. Чтобы смоделировать этот эффект паузы, вы должны преобразовать всю синхронную функцию (в данном случае цикл for), а не только строку await.

Сначала мы должны развернуть цикл for в while (говоря о синтаксическом сахаре!), Затем мы можем переписать его в рекурсию (потому что до await мы могли «останавливаться» только между функциями, а не внутри них), затем мы можем перепрограммировать это рекурсивно только при выполнении обещания. Это ваш код, преобразованный из async/await в обещания:

let asyncFunc = function() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('This is async'), 1000)
  });
};

function loop(i) {
  if (i < 5) {
    console.info('This is sync');
    return asyncFunc().then(result => {
      console.info(result);
      return loop(++i);
    });
  }
}

loop(0);

По сути, теперь у вас есть два типа функций: функции async и функции, отличные от async, и только функции async могут иметь в себе await (или вы получите сообщение «SyntaxError: await действительно только в асинхронной функции»). Это своего рода причина: чтобы «переписать» семантику await в семантику, отличную от await, вам нужно изменить всю функцию, а не только строки await. Это синтаксический сахар, но на уровне вся функция, а не на уровне операторов, как в примерах OP.

Обновлено: вы также можете в основном прочитать, что нужно сделать в исходном коде:

for(let i = 0; i < 5; i++) {
   console.info('This is sync')
   console.info(await asyncFunc())
}

Let a loop start with i being 0. Check that i is less then 5; if so, log "This is sync", and invoke asyncFunc (and wait for it to finish). Then, print out its result, increment the counter and continue the loop.

Несмотря на то, что код был радикально переработан относительно синтаксиса JavaScript, он по-прежнему очень похож на то, что я написал, не так ли? :)

async/await может быть синтаксическим сахаром, но это больше, чем просто сахар вокруг then(). Намного лучшая аналогия для async/await - генераторы + обещания.. Если вы напишете генератор, вы заметите, что синтаксис почти такой же, как у async/await, но с использованием yield вместо await.

Например, вы можете написать генератор, который будет выглядеть почти так же, как ваш второй цикл for, и он будет давать вам такое же поведение:

let asyncFunc = function() {
  return new Promise((resolve,reject) => {
     setTimeout(_ => resolve('This is async'), 1000)
  })
}

/*  Generator Function  */
function *gen(){
  for(let i = 0; i < 5; i++) {
    console.info('This is sync')
    yield asyncFunc().then(console.info)  // looks and acts a lot like await
   }
}

/* iterate through the generator */
let it = gen()
function runGen(){
  let p = it.next()
  if (p.done) return
  else p.value.then(runGen)
}
runGen()

Ваши первые два примера в основном эквивалентны. Но, угадайте, в этих двух примерах нельзя использовать цикл for. Не существует простого способа имитации оператора await внутри цикла for. Это потому, что взаимодействие цикла for (или цикла while) с async/await является более продвинутым, чем включение простого оператора .then(), как в ваших двух примерах.

await приостанавливает выполнение всей содержащей функции. Это приостановит даже петли for и while. Чтобы запрограммировать что-то подобное только с .then(), вы должны изобрести свою собственную конструкцию цикла, потому что вы не можете сделать это только с помощью цикла for.

Например, если у вас это с помощью await:

let asyncFunc = function() {
    return new Promise((resolve,reject) => {
       setTimeout(_ => resolve('This is async'), 1000)
    })
}

async function someFunc() {
    for(let i = 0; i < 5; i++) {
       console.info('This is sync')
       console.info(await asyncFunc())
    }
}

И, если вам нужна аналогия с использованием только .then(), вы не можете использовать цикл for, потому что нет способа «приостановить» его без await. Вместо этого вам нужно разработать свой собственный цикл, который обычно включает вызов локальной функции и поддержание собственного счетчика:

function someFunc() {
    let i = 0;

    function run() {
        if (i++ < 5) {
            console.info('This is sync')
            asyncFunc().then(result => {
                console.info(result);
                run();
            });
        }
    }
    run();
}

Или некоторые используют такую ​​конструкцию .reduce() (особенно, если вы повторяете массив):

// sequence async calls iterating an array
function someFunc() {
    let data = [1,2,3,4,5];
    return data.reduce((p, val) => {
        console.info('This is sync')
        return p.then(() => {
           return asyncFunc().then(result => {
                console.info(result);
            });
        });
    }, Promise.resolve());
}

Can someone explain what is the difference, or in other words, what exactly async/await does behind the scenes?

За кулисами интерпретатор Javascript приостанавливает дальнейшее выполнение функции с помощью оператора ожидания. Текущий контекст функции (состояние локальной переменной, точка выполнения и т. д.) Сохраняется, из функции возвращается обещание, и выполнение за пределами этой функции продолжается до тех пор, пока не будет выполнено или отклонено обещание, которое ожидалось. Если он разрешается, то выбирается то же состояние выполнения, и функция продолжает выполняться еще до следующего await и так далее, пока в конечном итоге функция не будет иметь больше операторов await и не будет больше выполнять (или перейдет к оператору return). .

Чтобы объяснить дальше, вот некоторые предыстории об асинхронной функции:

Когда вы объявляете функцию async, интерпретатор создает особый вид функции, которая всегда возвращает обещание. Это обещание отклоняется, если функция либо явно возвращает отклоненное обещание, либо если в функции есть исключение (исключение перехватывается интерпретатором и превращается в отклонение обещания, которое возвращает функция).

Обещание разрешается, если / когда функция возвращает нормальное значение или просто возвращается нормально, завершив свое выполнение.

Когда вы вызываете функцию, она начинает выполняться синхронно, как и любая обычная функция. Сюда входят любые циклы, которые могут быть в функции (как в цикле for в вашем примере). Как только функция встречает первый оператор await и ожидающее значение является обещанием, тогда функция возвращается в этой точке и возвращает свое обещание. Дальнейшее выполнение этой функции приостанавливается. Поскольку функция возвращает свое обещание, любой код после этого вызова функции продолжает выполняться. Некоторое время спустя, когда обещание, которое ожидалось внутри функции async, разрешается, в цикл событий вставляется событие, чтобы возобновить выполнение этой функции. Когда интерпретатор возвращается в цикл обработки событий и переходит к этому событию, выполнение функции возобновляется с того места, где оно было остановлено в строке сразу после оператора await.

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

Прелесть этой способности приостанавливать или приостанавливать выполнение функции в середине курса заключается в том, что она работает в конструкциях цикла, таких как for и while, и это делает выполнение асинхронных операций в последовательности с использованием такого цикла намного проще для программирования, чем раньше. async и await (как вы обнаружили). Не существует просто аналогичного способа кодирования цикла секвенирования с использованием только .then(). Некоторые используют .reduce(), как показано выше. Другие используют вызов внутренней функции, как показано выше.