JS Async / Await, Promise, Callbacks

Question

Bu 3 arasındaki farkı anlamaya çalışıyorum. Callbacks & Promises açık ama async / await kullanımını anlamıyorum. Sözlerin sözdizimsel şekeri olduğunu biliyorum ama denediğim şey işe yaramadı. Tüm bunları anlamaya çalıştığım kod parçasını paylaşıyorum ...

Bir dizi ile denedim

var array = [1,2,3];

ve 2 işlev

• get() 1 saniyede çalıştırır ve array
• post(item) 2 saniyede yürütülür ve yeni bir öğeyi array

Şimdi, ben almak istiyorum olmasıdır postyöntem ilk ve yürütmek gerektiğini geto kadar konsolda sonucu olması gerektiğini bundan sonra [1,2,3,4]değil[1,2,3]

GERİ ARAMAK

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] ✅
}

İyi çalışıyor ancak çok fazla geri arama olması durumunda kod daha karmaşık olacak ... Yani,

SÖZ VERMEK

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] ✅
}

Tamam, çok daha temiz bir kodla. Ama yine de birden fazla thenarama ... Şimdi,

Async / Bekle

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] ❌
}

Çok daha temiz bir versiyonu ama hiçbiri yolu, işe yaradı ... Ben de bu (her iki fonksiyonu (dönüştürmek denedim post& getile zaman uyumsuz ve çağrıya) 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] ❌
}

Ama yine de faydası yok. Bu yüzden bu özellik hakkında tamamen kafam karıştı (yani async / await). Lütfen bu örneği ayrıntılı olarak açıklayın. Ve ayrıca lütfen bana Promise.resolveve Promise.allbu bağlamda anlatın! Teşekkürler

Answer 1

asyncve vaatleri yönetmekawait için araçlar

await post(4);

Burada tarafınızdan verilen sözün postçözülmesini bekliyorsunuz.

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

Ancak, post bir söz vermez, bu yüzden yararlı hiçbir şey yapmaz.

Daha önce bir sözle çalışan bir uygulamanız vardı post. Öyleyse bunu kullan:

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

Answer 2

Bir gecikmeden sonra bir sözü çözen hiçbir şeyi denemeyin asyncve awaitkullanmayın . Mevcut haliyle, tanımladığınız tüm işlevler, anında çözülen bir söz verir.async

Sıklıkla kullanabileceğiniz bir yardımcı program işlevi kullanmak isteyeceksiniz. Aşağıdakileri kullanarak belirli bir milisaniyeden sonra çözülen bir söz verir 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

PROMISE'de yaptığınız şeye benzer .

Post setTimeout'u bir söze sarın ve iade edin.
ayar zaman aşımı gövdesi içinde çözümlemeyi çağırın.

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

o zaman bunu şu şekilde kullanabilirsiniz:

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

---