Tengo una clase como esta (simplificado):
export class Foo { constructor(el, menuItems ) { this.id = this.el.dataset.id; this.menuItems = menuItems; this.fetchResult = async function (uri) { fetch(uri, { method: 'get' }) .then(response => response.json()) .then(data => { return data.saved === true; }) .catch(function (err) { console.log('Failed ', err); return false; }); } } doAction(action) { const uri = 'foo/'+ action +'?id=' + this.id; const map = { 'close': async () => { const success = await this.fetchResult(action); console.log(success); // says undefined? } /* some other actions */ } return map[action]; } attachDialogs() { this.menuItems.addEventListener('click', (element) => { this.doAction( element.dataset.action )(); }); } } Por alguna razón const success = await this.fetchResult(action); no espera el resultado. Continúa inmediatamente, dando como resultado un valor 'indefinido'.
En segundo plano, se está realizando la búsqueda. ¿Cómo puedo hacer que espere el resultado?
Creo que el problema es que no está resolviendo la respuesta de su solicitud, intente devolver una promesa y resolver solo cuando tenga su respuesta (o error)
this.fetchResult = function(uri) { return new Promise((resolve, reject) => { fetch(uri, { method: 'get' }) .then(response => response.ok ? response.json() : reject(new Error(response.statusText))) .then(result => resolve(result)) } } const map = { 'close': async () => { const success = await this.fetchResult(action); } }Elimine el asíncrono de fetchResult, no hay motivo para ello. Está esperando el resultado de Promise en fetchResult, solo necesita la palabra clave async si fetch result también está escrito en async await:
await res = fetch(url)¡Gracias @Toto Nabendo y @ggorlen!
Solución de trabajo:
export class Foo { constructor(el, menuItems ) { this.id = this.el.dataset.id; this.menuItems = menuItems; this.fetchResult = async function (uri) { return fetch(uri, { method: 'get' }) .then(response => response.json()) .then(data => { return data.saved === true; }) .catch(function (err) { console.log('Failed ', err); return false; }); } } async doAction(action) { const uri = 'foo/'+ action +'?id=' + this.id; const map = { 'close': async () => { const success = await this.fetchResult(action); console.log(success); } /* some other actions */ } return map[action]; } attachDialogs() { this.menuItems.addEventListener('click', (element) => { this.doAction( element.dataset.action )(); }); } }