Обещание JavaScript с ожиданием объяснения - PullRequest
Новая
       5

Обещание JavaScript с ожиданием объяснения

0 голосов
/ 14 мая 2018

Я просто хотел бы понять , как обещания и ждать совместной работы. Посмотрите на следующий код: 

console.log("One: Started");
setTimeout(function(){console.log("One: Completed")}, 1000);
console.log("Two: Started");
setTimeout(function(){console.log("Two: Completed")}, 2000);
console.log("Three: Started");
setTimeout(function(){console.log("Three: Completed")}, 3000);

Так что это, конечно, журналы: 

One: Started
Two: Started
Three: Started
One: Completed
Two: Completed
Three: Completed

Я хотел бы завершить один до того, как начнется следующий. Я написал это с моим пониманием обещаний и жду, но это не работает. Кто-нибудь, пожалуйста, попробуйте отредактировать этот код, чтобы он заработал. И, пожалуйста, объяснение, как я пытаюсь понять обещания и жду 

async function LogAll() {
    console.log("One: Started");
    await function() {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                console.log("One: Completed");
                resolve();
            }, 1000);
        });
    }
    console.log("Two: Started");
    await function() {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                console.log("Two: Completed");
                resolve();
            }, 2000);
        });
    }
    console.log("Three: Started");
    await function() {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                console.log("Three: Completed");
                resolve();
            }, 3000);
        });
    }
}

LogAll();

Ответы [ 3 ]

0 голосов
/ 14 мая 2018

Объявление async function определяет asynchronous function, который возвращает объект AsyncFunction.

async function может содержать выражение await, которое приостанавливает выполнение async function и ожидаетпрошло разрешение Promise's, а затем возобновляет выполнение async function's и возвращает разрешенное значение. 

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('calling');
    }, 2000);
  });
}

async function asyncCall() {
  
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
  console.log('called');
}

asyncCall();

Подробнее см. Async Await

0 голосов
/ 14 мая 2018

Что такое асинхронная функция:

Это функция, которая возвращает объект AsyncFunction, аналогично Promises.Если он выдает ошибку, объект отклоняет, в противном случае, когда он возвращает значение, он разрешается.

Асинхронные функции новее, и до того, как они существовали, были разные способы написания асинхронного кода: Promises (часть rxjs),Observables («бесконечные обещания»), обратные вызовы, используемые с событиями синхронизации.

Что такое ключевое слово await:

В Javascript ключевое слово await может использоваться только внутриasync Функция со следующим синтаксисом:

[returnValue] = await expression;

Где выражение может быть Promise или любым другим значением, возвращаемым асинхронным кодом.

awaitприказывает коду остановиться и ждать этого значения.

Без этого returnValue в вышеприведенном выражении будет немедленно дано значение (скорее всего, undefined), и код продолжит работу без блокировки.Через некоторое неизвестное время и неизвестную точку в коде функция, наконец, вернется, и returnValue наконец получит правильное значение.Но, возможно, код пошел вперед и ошибочно предположил, что у вас уже есть определенное и обновленное значение, возможно, оно не удалось.

Попробуйте запустить фрагменты без асинхронного ожидания.Это примеры счетчиков, показывающие соответствующий синхронный код:

ПРИМЕР 1: все Обещания запускаются немедленно 

function LogAll() {
  console.log("One: Started");
  new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("One: Completed");
      resolve();
    }, 1000);
  });
  console.log("Two: Started");
  new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("Two: Completed");
      resolve();
    }, 2000);
  });
  console.log("Three: Started");
  new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("Three: Completed");
      resolve();
    }, 3000);
  });
}

LogAll();

ПРИМЕР 2: Никаких обещаний вообще (результаты, аналогичные примеру 1) 

function LogAll() {
      console.log("One: Started");

        setTimeout(function() {
          console.log("One: Completed");
        }, 1000);

      console.log("Two: Started");

        setTimeout(function() {
          console.log("Two: Completed");
        }, 2000);

      console.log("Three: Started");

        setTimeout(function() {
          console.log("Three: Completed");
        }, 3000);
        
    }

    LogAll();

В Примере 2 обратите внимание, что setTimeout является событием синхронизации, более старой функцией Javascript, поэтому он действительно не нуждается в обертке Promise, за исключением того, что Promise позволяет бросатьошибки и отклонить.

0 голосов
/ 14 мая 2018

Вам нужно await обещания , а не только функции.Когда вы await function ... (без вызова), функция оценивается как выражение, а затем отбрасывается.Просто вызовите функции: 

async function LogAll() {
  console.log("One: Started");
  await (function() {
    return new Promise((resolve, reject) => {
      setTimeout(function() {
        console.log("One: Completed");
        resolve();
      }, 1000);
    });
  })();
  console.log("Two: Started");
  await (function() {
    return new Promise((resolve, reject) => {
      setTimeout(function() {
        console.log("Two: Completed");
        resolve();
      }, 2000);
    });
  })();
  console.log("Three: Started");
  await (function() {
    return new Promise((resolve, reject) => {
      setTimeout(function() {
        console.log("Three: Completed");
        resolve();
      }, 3000);
    });
  })();
}

LogAll();

Или, для этого примера, вообще не использовать функции - просто дождитесь обещаний напрямую: 

async function LogAll() {
  console.log("One: Started");
  await new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("One: Completed");
      resolve();
    }, 1000);
  });
  console.log("Two: Started");
  await new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("Two: Completed");
      resolve();
    }, 2000);
  });
  console.log("Three: Started");
  await new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log("Three: Completed");
      resolve();
    }, 3000);
  });
}

LogAll();
...