JS Async / Await vs Promise vs Callbacks

Question

Sto cercando di capire la differenza tra questi 3. Callbacks & Promises sono chiari ma non ottengo l'utilizzo di async / await. So che è lo zucchero sintattico delle promesse ma quello che ho provato non ha funzionato. Condivido il pezzo di codice che ho cercato di capire tutto questo ...

Ho provato con un array

var array = [1,2,3];

e 2 funzioni

• get() esegue in 1 secondo e consola il file array
• post(item) viene eseguito in 2 secondi e spinge un nuovo elemento nel file array

Ora, quello che voglio ottenere è che il postmetodo dovrebbe essere eseguito prima e getdopo in modo che il risultato sulla console [1,2,3,4]non sia[1,2,3]

RICHIAMA

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item, callback) {
    setTimeout(() => {
        array.push(item);
        callback();
    }, 2000);
}

function init() {
    post(4, get);
    // returns [1,2,3,4] ✅
}

Funziona bene ma in caso di troppe richiamate, il codice sarà più disordinato ... Quindi,

PROMETTERE

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item) {
    return new Promise((resolve, reject) => setTimeout(() => {
        array.push(item)
        resolve();
    }, 2000));
}

function init() {
    post(4).then(get);
    // returns [1,2,3,4] ✅
}

Ok con un codice molto più pulito. Ma ancora più thenchiamate ... Ora,

Async / Await

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

async function init() {
    await post(4);
    get();
    // returns [1,2,3] ❌

    await post(4);
    await get();
    // returns [1,2,3] ❌

    post(4);
    await get();
    // returns [1,2,3] ❌
}

Versione molto più pulita ma in nessun modo, ha funzionato ... Ho anche provato questo (converti entrambe le funzioni ( post& get) in asincrono e chiama con then)

async function get() {
    setTimeout(() => console.log(array), 1000);
}

async function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

async function init() {
    post(4).then(get);
    // returns [1,2,3] ❌
}

Ma ancora inutile. Quindi sono totalmente confuso su questa funzione (cioè asincrono / attendono). Si prega di elaborare proprio questo esempio. E per favore parlami di Promise.resolvee Promise.allin questo stesso contesto! Grazie

Answer 1

asynce awaitsono strumenti per gestire le promesse

await post(4);

Qui stai aspettando che la promessa restituita da postvenga risolta.

function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

Tuttavia, post non restituisce una promessa , quindi non fa nulla di utile.

postPrima avevi un'implementazione funzionante di con una promessa. Quindi usa quello:

function post(item) {
    return new Promise((resolve, reject) => setTimeout(() => {
        array.push(item)
        resolve();
    }, 2000));
}

Answer 2

I tuoi tentativi con asynce awaitnon utilizzare nulla che risolva una promessa dopo un ritardo . Allo stato attuale, tutte le asyncfunzioni che hai definito restituiscono una promessa che si risolve immediatamente.

Ti consigliamo di utilizzare una funzione di utilità che puoi usare spesso. Restituisce una promessa che si risolve dopo un determinato numero di millisecondi, utilizzando setTimeout:

// utility function
let delay = ms => new Promise(resolve => setTimeout(resolve, ms));

let array = [1, 2, 3];

async function get() {
    await delay(1000);
    console.log(array);
}

async function post(item) {
    await delay(1000);
    array.push(item)
}

async function init() {
    await post(4);
    await get();
}

init();
console.log("wait for it...");

Answer 3

Simile a quello che hai fatto in PROMISE .

Racchiudi setTimeout in una promessa e restituiscilo.
chiama la risoluzione all'interno del corpo del settimeout.

function post(item) {
 return new Promise((resolve)=>{
   setTimeout(() => {
     array.push(item)
     resolve()
   }, 2000);
 })
}

allora puoi usarlo in questo modo:

async function init() {
    await post(4);
    get();
    }

---