javascript async promises klp

[k33theod]

Έχω μια συνάρτηση σε js που κάνει ένα request fetch όπως παρακάτω

function get_from_curl(immo )
{
  fetch('./post_curl2.php', 
  {
    method: 'POST', // or 'PUT'
    headers: 
    {
      "Content-Type":"application/json"
    },
    body: JSON.stringify(immo),
  }, true).then((response) => response.text()).then((data) => 
    {
      scores.push(JSON.parse(data));
    }).catch((error) => {console.error('Error:', error);}
  );
}

for (immo of immos)
get_from_curl(immo );

και θέλω στην συνέχεια να καλέσω την παρακάτω:

for (score of scores)
	vizualize(score);

έχω όμως πάντα πρόβλημα με το async δηλαδή όταν καλώ τον δεύτερο κώδικα τα scores δεν έχουν γυρίσει όλα

Εάν κάποιος έχει εμπειρία με asyncs και promises και μπορεί να βοηθήσει

[marios28]

1 ώρα πριν, k33theod είπε

Εάν κάποιος έχει εμπειρία με asyncs και promises και μπορεί να βοηθήσει

Αν και δεν έχω εμπειρία στη Javascript, (αλλά στη c#), όποτε βάσει αυτών που γράφεις και με μια γρήγορη ματιά πιθανό να σε βοηθήσουν αυτά στα παρακάτω links:

https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait

https://dev.to/shoupn/javascript-fetch-api-and-using-asyncawait-47mp  

[Ponous]

1 ώρα πριν, k33theod είπε

.then((response) => response.text())

Δεν ξέρω πόσο θα σε βοηθήσει αλλά εδώ εγώ θα το τροποποιούσα.

Θα έλεγα...

.then((response) => {
  const someData = response.data // ή response.text().data αναλόγως με το πως τα επιστρέφει ο server
  
  // Μετά το υπόλοιπο κομμάτι στο οποίο ίσως να δήλωνα καινούργια scores
  scores.push(JSON.parse(someData));
  scores.forEach(function(item){
    // some usage here
  });
});

Edit: Άμα δεν είναι στο περίπου έτσι στείλε να το βρούμε. Ίσως βάλουμε κάποιο promise ή callback function μετά το push

Επεξ/σία 13 Μαΐου 2020 από Ponous

[k33theod]

@Ponous δεν θέλω μέσα από την συνάρτηση να καλέσω scores.forEach. Κάθε φορά που καλώ την get_from_curl παίρνω ένα json που εξαρτάται από την παράμετρο immo. και μετά θέλω να τα κάνω visualize τα δείχνω δηλαδή με ένα graphic. To response.data που λες δεν με επηρεάζει αφού δουλεύει σωστά. Το είχα response.json() αλλά κάτι δεν δουλευε σωστά και το άλλαξα σε τεχτ.

@marios28 Νομίζω το δεύτερο link είναι κοντά σε αυτό που ψάχνω.

 

[Predatorkill]

Μπακαλικα:

If scores.length > 0 τοτε καλεσε την for blabla visualize

απλως μεχρι να ερθουν τα data το γραφημα θα ειναι κενο. Μπορεις να βαλεις μια let loading = false εξω απο το fetch καντην true στην αρχη της συναρτησης και μολις παρεις το response καντην false (και στο catch καντην false). Μετα αντι για γραφημα μπορεις να βαλεις εναν loading indicator και μολις scores.length > 0 && !loading να δειξεις το γραφημα. (Φυσικα μπορεις να παιξεις σκετο scores.length χωρις loading αλλα ειπα να βαλω λιγη σαλτσουλα κοτζαμ μπακαλικο).

Σοβαρα:

Μπορεις αυτο:

for (immo of immos)
get_from_curl(immo );

να το κανεις .map ή forEach ( μιας και δεν επιστρεφεις τπτ, απλα γεμιζεις το scores) και να βαλεις μπροστα Promise.all και να λυθει το προβλημα σου αμεσα.

https://www.taniarascia.com/promise-all-with-async-await/

https://flaviocopes.com/javascript-async-await-array-map/

προσεχε μονο με το browser compatibility ισως χρειαστει polyfill, δεν ξερω τι εργαλεια τρεχεις.

 

Επεξ/σία 14 Μαΐου 2020 από Predatorkill

[Lanike71]

Έχει να κάνει νομίζω με το χρόνο αναμονής.

Αν ο χρόνος που θα πάρεις όλα τα scores είναι αμελητέος, τότε πας με τη μπακάλικη του @Predatorkill.

Αν όμως μεσολαβεί κάποιος χρόνος επειδή τα scores μπορεί να είναι κάποιες χιλιάδες και πρέπει να εμφανίσεις κάτι στην οθόνη, τότε πας με τη σοβαρή @Predatorkill.

[k33theod]

@Predatorkill Ευχαριστώ το κοιτάω. Το όλο consept είναι για μένα λίγο δύσκολο. Προσπαθώ να κατανοήσω και τι ακριβώς ή περίπου γίνεται ώστε αν το χρειαστώ ξανά να το ξέρω, αλλά αυτή η τάση με τα anonymous functions και arrow functions κάνει την κατάσταση δύσκολη.

[Ponous]

Α σόρι. Δεν κατάλαβα καλά. Τότε μπορείς να κάνεις το εξής:

1. Η διαδικασία όπου φορτώνεις δεδομένα στο scores, δλδ το scores.push θα το βάλεις σε μια νέα συνάρτηση. Η συνάρτηση αυτή όμως θα επιστρέφει promise!

var jsonToScores = function(jsonData) {
  return new Promise(function(resolve, reject) {
    
	// κάνε ότι γουστάρεις εδώ

    if ( /* όλα οκ */ ) {
      resolve("Data loaded");
    } else {
      reject(Error("Data could not be loaded"));
    }
  });
}

Κι εσύ θα το καλέσεις ως εξής:

jsonToScores(jsonData, otherParametersYouWantToSend).then(function(callbackVariablesIfAny) {
  // σε αυτό το σημείο έχεις δεδομένα γιατί μόλις φορτώθηκαν
})

2. Μπορείς το scores να το βάλεις σε ένα αντικείμενο το οποίο να έχει 2 μεταβλιτές. Τα δεδομένα σου(scores) και μια μεταβλιτή isLoaded(boolean).

let yourData = {
	"scores" : [],
	"isLoaded" : false
}

// κάθε φορά μπορείς να το ελέγξεις ως 
if(yourData.isLoaded) {
	validate(yourData.scores);
}

 

[Xvipes]

const get_from_curl = async(immo) =>
    fetch(
        './post_curl2.php', {
            method: 'POST', // or 'PUT'
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(immo),
        },
        true
    );

const immosPromises = immos.map(get_from_curl);
try {
    const scores = await Promise.all(immosPromises)
        .then(res => Promise.all(res.map(r => r.text())));
} catch (error) {
    console.error('Error:', error);
}

Εγώ θα το έκανα κάπως έτσι.

[t(o.ot)]

Η for...of μπορεί να πάρει await (δες εδώ)

for await (let a of [Promise.resolve(1), Promise.resolve(2)]) {
    console.log(a);
}
// => 1, 2

 

Οπότε το δεύτερο block που έχεις θα γίνει:

for await (score of scores)
	vizualize(score);

 

Επεξ/σία 25 Μαΐου 2020 από t(o.ot)

[skiabox]

Δες και το deno που προσφέρει global await functionality χωρίς αναγκαστικό wrapping του api call σε async/await function.

[t(o.ot)]

Το deno είναι server-side only που υποστηρίζει ένα μικροσκοπικό subset των npm modules που υπάρχουν για τον κύριο "ανταγωνιστή" του, τη node.js. Πώς μπορεί να είναι λύση στο πρόβλημα του TS, δεδομένου ότι έχει ήδη την υλοποίησή του in-place; Εκτός αν του προτείνεις να γράψει τα πάντα από την αρχή σε ένα framework που δεν γνωρίζει καθόλου.

Επεξ/σία 25 Μαΐου 2020 από t(o.ot)

[skiabox]

3 ώρες πριν, t(o.ot) είπε

Το deno είναι server-side only που υποστηρίζει ένα μικροσκοπικό subset των npm modules που υπάρχουν για τον κύριο "ανταγωνιστή" του, τη node.js. Πώς μπορεί να είναι λύση στο πρόβλημα του TS, δεδομένου ότι έχει ήδη την υλοποίησή του in-place; Εκτός αν του προτείνεις να γράψει τα πάντα από την αρχή σε ένα framework που δεν γνωρίζει καθόλου.

Το παλικάρι λέει ότι τώρα ξεκινάει.

Δεν φαίνεται να έχει γράψει πολύ κώδικα ακόμα για αυτό του είπα για deno.

Ειδικά το fetch api του browser το υποστηρίζει το deno από την κατασκευή του.

Επίσης έχει δικό του core functionality που συνέχεια μεγαλώνει.

[t(o.ot)]

2 ώρες πριν, skiabox είπε

Το παλικάρι λέει ότι τώρα ξεκινάει.

Δεν φαίνεται να έχει γράψει πολύ κώδικα ακόμα για αυτό του είπα για deno.

Ειδικά το fetch api του browser το υποστηρίζει το deno από την κατασκευή του.

Επίσης έχει δικό του core functionality που συνέχεια μεγαλώνει.

Εξακολουθώ να μην καταλαβαίνω. Το Fetch είναι ένα browser API, η node.js έχει τo http module για τον ίδιο σκοπό. Πού υπερτερεί το fetch για να μπορέσει να δικαιολογήσει μια αλλαγή framework (το οποίο deno παρεμπιπτόντως έχει ΠΟΛΛΑ άλλα μειονεκτήματα όπως πχ την έλλειψη package manager και κοινότητας)? Επίσης, πιθανώς ο κώδικας του TS να είναι 100% front-end, πως η deno ή η node.js θα τον βοηθήσουν σε αυτή την περίπτωση; Τέλος, αν είναι να του προτείνουμε του ανθρώπου να αλλάξει όλο τον κώδικά του, γιατί όχι Ruby on Rails, Java, C# ή C++ για παράδειγμα; 

[skiabox]

15 ώρες πριν, t(o.ot) είπε

Εξακολουθώ να μην καταλαβαίνω. Το Fetch είναι ένα browser API, η node.js έχει τo http module για τον ίδιο σκοπό. Πού υπερτερεί το fetch για να μπορέσει να δικαιολογήσει μια αλλαγή framework (το οποίο deno παρεμπιπτόντως έχει ΠΟΛΛΑ άλλα μειονεκτήματα όπως πχ την έλλειψη package manager και κοινότητας)? Επίσης, πιθανώς ο κώδικας του TS να είναι 100% front-end, πως η deno ή η node.js θα τον βοηθήσουν σε αυτή την περίπτωση; Τέλος, αν είναι να του προτείνουμε του ανθρώπου να αλλάξει όλο τον κώδικά του, γιατί όχι Ruby on Rails, Java, C# ή C++ για παράδειγμα; 

Φίλε με επιθετικά posts δεν ασχολούμαι πλέον.

Μπορείς να πιστεύεις ότι θέλεις.

Για την ακρίβεια θα σε κάνω και ignore να μπεις στη λίστα με όλους τους υπόλοιπους που κάνουν επιθετικά-μη ευγενικά posts.

Επεξ/σία 26 Μαΐου 2020 από skiabox