Асинхронное ожидание
Простой код для понимания async/await сводит меня с ума.
У меня есть кнопка, при нажатии на которую я читаю некоторое значение из локального хранилища и показываю его в окне предупреждения. Прежде чем показывать предупреждение, я хочу, чтобы console.info значение.
Если я понял, что async/await мой код должен делать именно это, но он работает в обратном порядке. сначала приходит оповещение, а потом консоль.
//Метод вызывается при нажатии кнопки
findMyAge2() {
this.getData("age").then(result => {
console.info('Hi');
myAge2 = result;
});
alert(myAge2);
}
async getData(key): Promise<any> {
return await this.storage.get(`${key}`);
}
Ожидаемый результат: в журнале консоли: Привет Пользовательский интерфейс: Возраст
Фактические результаты: Пользовательский интерфейс: Возраст в журнале консоли: Привет
Ответы 3
Попробуйте так,
findMyAge2() {
this.getData("age").then(result => {
console.info('Hi');
myAge2 = result;
alert(myAge2);
});
}
async getData(key): Promise<any> {
return await this.storage.get(`${key}`);
}
Прежде чем вы должны дождаться alert перед получением данных.
async/await работает так же, как и с промисами, что означает, что код выполняется, и вы не знаете, когда он завершится, вы просто знаете, что после того, как он завершится, вы хотите, чтобы что-то еще было выполнено.
Это именно то, что вы помещаете в функцию «тогда», которая выполняется после выполнения 1-й части (asyc getData).
В случае вашего кода findMyAge2 вызывается, когда вы нажимаете кнопку, затем он выполняет getData и указывает, что происходит после получения результата этого вызова в блоке «тогда». Поэтому вам просто нужно переместить предупреждение в блок «тогда», тогда вы получите ожидаемый результат.
var myAge2;
findMyAge2() {
this.getData("age").then(result => {
console.info('Hi');
myAge2 = result;
alert(myAge2);
});
}
async getData(key): Promise<any> {
return await this.storage.get(`${key}`);
}
JavaScript по своей природе асинхронен, поэтому, когда вы возвращаете Promise, код продолжает выполняться, и через некоторое время Promise разрешается.
async/await — это способ управления этим потоком программирования, который позволяет создавать синхронный код, который «ожидает» результата асинхронного выполнения.
Ваша проблема здесь в том, что вы хотите вернуть обещание из вашей getData функции и await его в вашей findMyAge2 функции.
async function findMyAge2() {
let result = await this.getData("age");
console.info('Hi');
myAge2 = result;
alert(myAge2);
}
async getData(key): Promise<any> {
return this.storage.get(`${key}`);
}
Добавление ключевого слова async к функции теперь всегда будет возвращать Promise. Так что вам не нужно await в вашем заявлении return. Это эффективно ничего не делает. Это все равно, что сказать:
function getData(key) {
return new Promise(resolve => {
return localStorage.get(`${key}`).then(result => resolve(result))
})
}
Вам не нужно ждать этого результата в локальном хранилище, потому что потребитель должен вызывать результат await или .then независимо от этого.