Порядок в программе Javascript Async / Await

Question

const function1 = () => 
      new Promise(function(resolve,reject) {
          setTimeout(() => {
             resolve(10)
          },6000)
       });
       
const function2 = async () => {
    console.log("first");

    const val = await function1()
    console.log("second");
    return val
}

console.log("third -- " ,function2())

Я ожидал порядок сообщения, как показано ниже:

first
second
third -- Promise { <pending> }>

Но оказывается, что выдает следующий вывод:

first 
third -- Promise { <pending> }
second

Может кто-нибудь помочь мне понять это?

Answer 1

объяснение вашего кода

1. console.log ("first");- идет первым, я надеюсь, что нет вопросов

2. , когда интерпретатор видит эту строку const val = await function1() - он ждет здесь и продолжит выполнение синхронного кода с помощью console.log("third -- " ,function2()), и вы можете увидетьthird -- Promise { <pending> }

3. , чем обещание разрешается, и выполнение асинхронной части продолжается, и вы, наконец, можете увидеть console.log("second");

для достижения ожидаемого поведения.это:

const function1 = () => 
      new Promise(function(resolve,reject) {
          setTimeout(() => {
             resolve(10)
          },6000)
       });
       
const function2 = async () => {
    console.log("first");

    const val = function1()
    console.log("second");
    return val
}

console.log("third -- " , function2())

Answer 2

Это в журналах, приятель:)!

Журнал со словом третий регистрируется вторым.Поскольку журнал со словом ' second ' разрешен внутри функции 2, которая вызывается как обычная функция .Этот код в основном предполагает, что вас не интересует (асинхронный) результат функции два, поэтому он просто повторяет ожидающее обещание.

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

Answer 3

вместо вызова function2() вам нужно await на нем

    await function2(); // logs first (6 seconds expire) second, 10

это потому, что вам нужно подождать, пока функция 2 выполнит Обещание, прежде чем продолжить

вы можетесделайте следующее для желаемого результата

    const function3 = async () => {
        const third = await function2();
        console.log( "third --", third ) 
    }
    function3();

Answer 4

Попробуйте следующий код

const function1 = () =>
  new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(10)
    }, 6000)
  });

const function2 = async () => {
  console.log("first");

  const val = await function1()
  console.log("second");
  return val;
}

const start = async () => {
  console.log("third -- ", await function2());
};

start();