Pewnie było sto razy - wyciąganie danych z async/ await

0

Cześć, zaciąłem sie na czymś co pewnie jest proste, tyle, że nie dla mnie.
To, co poniżej to dwie (z wielu) metod klasy. Pierwsza - remoteLoad ma zerealizowac pobranie danych z zewnętrznego źródła, druga -getData- natomiast ma zrealizować takie pobranie i zwrócić dane. w sytuacji kiedy w storage nie ma danych. Jak sie zapewne domyślacie ostatecznie zwracana jest Promise co jest niepożądan, chciałbym mieć konkretna wartość.
Oczysiście w zakresie remoteLoad mam dostęp do właściwych wartości co sobie sprawdzam przez console.log(resp). Tyle, że potrzebuję tych wartości poza nią a nie w niej. Niemożliwe, żeby to nie było realizowalne, jednak wypróbowałem kilka sposobów - prostsze tj. praca na czystych promise, bardziej zaawansowane - axios i jeszcze trochę innych a nie jestem bliżej. Nie miałbym pewnie problemu z wykonaniem jakiejś funkcji na tych danych w zakresie try, ewentualnie pewnie dałoby się zapisac w jakims sztucznym stanie, ale ja to potrzebuję tego po prostu na zewnątrz w takim ukladzie mniej wiecej jak napisałem.

async remoteLoad(){
var that = this;
var result = null;
    try {
        const x = await fetch('https://api.myjson.com/bins/amapk');
        const resp = await x.json();
        console.log (resp);
        return resp;
        }

        catch(e){console.log(e)}
   
}

getData() {
    return this.storageService.areInStorage() ? this.storageService.load('localBooks') : this.remoteLoad();
}
0

Po pierwsze po co Ci w funkcji remoteLoad() te linijki:

var that = this;
var result = null;

A po drugie nie mowisz gdzie chcesz wykorzystac ta wartosc resp.
Zauzmy, ze w getData()

async getData(){
let resp = await remoteLoad();
}

Przeciez ta funkcja zwraca ci wartosc resp, wiec ja przypisz do zmiennej

0

Dzieki. Te linijki to pozostałości po pórbach róznego rodzaju
Ale funkcja nie zwraca wartości tylko promise i to jest cały ból - sorry, że o tym nie napisałem, byłoby lepie widać z czym walczę

0
async getData() {
    return this.storageService.areInStorage() ? this.storageService.load('localBooks') : await this.remoteLoad();
}
0
Patryk27 napisał(a):
async getData() {
    return this.storageService.areInStorage() ? this.storageService.load('localBooks') : await this.remoteLoad();
}

Wyrzuca błąd SyntaxError: await is only valid in async functions and async generators

0

Na pewno masz w swoim kodzie async getData(), tak jak napisałem?

0
Patryk27 napisał(a):

Na pewno masz w swoim kodzie async getData(), tak jak napisałem?

Przyznaję, że nie miałem, ale jak mam to znowu zwraca promise Dopisże gdzie to widać :


  const egz = new ListModel; console.log(egz.getData())
  
  
  

listModel to nazwa klasy którą ćwiczę i która ma ww metody

1

W takim wypadku teraz tamtą funkcję musisz zrobić async i napisać await egz.getData() - i tak dalej, i tak dalej.

Innego wyjścia (oprócz wykorzystywania .then(), ofc.) nie ma - once you go async, you never go back.

0

Żebym się nie pogubił - zatem na samej 'górze'

window.onload = async function() {myFunction()};

async function myFunction() {

  const egz = new ListModel; await console.log(egz.getData())
  
  }

a w klasie

async remoteLoad(){
var that = this;
var result = null;
    try {
        const x = await fetch('https://api.myjson.com/bins/amapk');
        const resp = await x.json();
        console.log (resp);
        
        return resp;

        }

        catch(e){console.log(e)}
   
}


async getData() {
    return this.storageService.areInStorage() ? this.storageService.load('localBooks') : await this.remoteLoad();
}
0
window.onload = function () {
  myFunction()
};

Event handler nie musi być async (chyba że planujesz w nim robić await), reszta wygląda ok.

0

W którym miejscu? + pokaż cały kod

0

Wywaliłem wszystko co by zamącało

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./modernizr-custom.js"></script>
    
    <title>Document</title>
</head>
<body>

<script src= './script.js'></script>
</body>
</html>
window.onload = function() {myFunction()};

async function myFunction(location) {
const egz = new ListModel; await console.log(egz.getData())
 
  }

class EventEmitter {
    constructor() {
      this._events = {};
    }
  
    on(evt, listener) {
      (this._events[evt] || (this._events[evt] = [])).push(listener);
      return this;
    }
  
    emit(evt, arg) {
      (this._events[evt] || []).slice().forEach(lsn => lsn(arg));
    }
  }
 
class ListModel extends EventEmitter {
    constructor(items) {
      super();
      
      this.sessionStorage = Modernizr.sessionstorage;
      this.temp= null;
      
      
        
    }


async remoteLoad(){

    try {
        const x = await fetch('https://api.myjson.com/bins/amapk');
        const resp = await x.json();
        console.log (resp);
        
        return resp;

        }

        catch(e){console.log(e)}
   
}

async getData() {
    return  await this.remoteLoad();
}

}
   
1
await console.log(egz.getData())

vs

console.log(await egz.getData())

Już drugi raz podałem Ci wprost to, co musisz napisać, i drugi raz zrobiłeś to źle ;-p

0

Działa !!!!
Pytanie jak z tym dalej. Czy każde wywołanie metody modelu będę musiał poprzedzać await -em? Czy jeżeli je będę definiował - bo na razie to golizna - to też wszedzie await?

1 użytkowników online, w tym zalogowanych: 0, gości: 1