Асинк Жду необычного поведения

Question

Я пытаюсь понять функцию JavaScript Async / Await.

Итак, я написал короткий код, чтобы понять его, но он дает мне необычное поведение / результат.

var a = 10;

function load_data(data) {
  setTimeout(() => {
    a = data
  }, 2000);
}

function print() {
  console.log(a);
}

async function init() {
  await load_data(40);
  print();
}

init();

Я ожидаю, что зарегистрированное значение будет 40, но его регистрация 10 с асинхронностью и ожиданием.

Answer 1

Вы должны вернуть Promise в load_data(). На самом деле вы ничего не возвращаете, поэтому код не ожидает разрешения какого-либо значения. Вы должны сделать что-то вроде этого:

function load_data(data){
    return new Promise( resolve => {
       setTimeout(() => {
           a=data;
           resolve(true);
       }, 2000)
    }
}

Answer 2

Async / Await - это синтаксис, используемый для обработки обещаний, а не просто асинхронное поведение. Чтобы он работал с load_data, функция должна возвращать объект обещания, который разрешает 40.

Это должно работать так, как вы ожидаете:

var a = 10

function load_data(data){
  return new Promise((resolve) => {
    setTimeout(() => {
        a=data;
        resolve(a);
    }, 2000)
  });
}

function print(){
    console.log(a)
}

async function init(){

    await load_data(40);

    print();
}

init();

Прежде чем узнавать об асинхронном ожидании, необходимо узнать об обещаниях, поскольку это всего лишь синтаксис над обещаниями.

Answer 3

Async зависит от Обещаний , но вы нигде не даете обещаний в своем коде.В результате, ожидание load_data не ждет.

Попробуйте использовать обещание и решить, как только истечет время ожидания:

function load_data(data){
    return new Promise(resolve => setTimeout(() => {
        a=data
        resolve()
    }, 2000))
}

Кроме того, мы предположим, что это только для обученияasync / await… в противном случае вы должны рассмотреть все обычные рекомендации, повторяющие использование глобальных переменных таким образом.Это рецепт для беспорядка, когда ваш код становится больше

var a = 10

function load_data(data){
    return new Promise(resolve => setTimeout(() => {
        a=data
        resolve()
    }, 2000))
}

function print(){
    console.log(a)
}

async function init(){
    await load_data(40);
    print();
}

init();

Answer 4

Вы должны создать обещание. Кроме того, лучше не использовать глобальную переменную, а разрешить обещание с желаемым значением:

function load_data(data){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data); //<-- pass data to resolve
        }, 2000)
    });
}

async function init(){
    let data = await load_data(40); // <--- get the promised value
    console.log(data);
}

init();

Answer 5

См .: manual1 manual2

Это работа для меня:

var a = 10

function load_data(data){
    return new Promise(resolve=>{
        setTimeout(() => {
            a=data;
            resolve('ok');
           }, 2000)    
});

}

function print(){
    console.log(a)
}

async function init(){

await load_data(40);

print();
}

init();

Answer 6

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

var a = 10;
function load_data(data) {
  return new Promise(resolve => {
      a=data;
      resolve('resolved');
  });
}

async function init() {

  var result = await load_data(40);
  print();
}

function print(){
    console.log(a)
}

init();