JavaScript vaatleri ile async await arasındaki fark nedir?

Ben kullanıyorum ECMAScript'i 6 ve ECMAScript 7 zaten benim uygulamalarda (Babel sayesinde) özellikleri - mobil ve web hem.

İlk adım açıkça ECMAScript 6 seviyelerine yönelikti. Pek çok eşzamansız kalıp, sözler (gerçekten ümit verici olan), üreteçler (* sembolünün neden olduğundan emin değilim) vb. Öğrendim. Bunlardan vaatler amacıma oldukça uygun geldi. Ve bunları uygulamalarımda oldukça kullanıyorum.

İşte temel bir vaadi nasıl uyguladığıma dair bir örnek / sözde kod:

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

Zaman geçtikçe ECMAScript 7 özellikleriyle karşılaştım ve bunlardan biri ASYNCve AWAITanahtar kelimeler / işlevler. Bunlar birlikte büyük harikalar yaratır. Verdiğim bazı sözleri ile değiştirmeye başladım async & await. Programlama stiline büyük değer katıyor gibi görünüyorlar.

Yine, işte async, await işlevimin nasıl göründüğüne dair bir sözde kod:

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

Sözdizimi hatalarını (varsa) bir kenara bırakırsak, ikisi de aynı şeyi yapıyor benim hissettiğim şey. Sözlerimin çoğunu neredeyse eşzamansız ile değiştirebildim, bekliyorlar.

Sözler benzer bir işi yaparken neden eşzamansız, ihtiyaç duyuluyor?

Eşzamansız, daha büyük bir sorunu çözmeyi mi bekliyor? Yoksa cehennemi geri aramak için farklı bir çözüm müydü?

Daha önce de söylediğim gibi, sözler ve asenkron kullanabiliyorum, aynı sorunu çözmeyi bekliyorum. Eşzamansızın çözülmeyi beklediği belirli bir şey var mı?

Ek Notlar:

React projelerimde ve Node.js modüllerimde yoğun olarak async, beklediğim ve vaatleri kullanıyorum. React özellikle erken bir kuş olmuştur ve birçok ECMAScript 6 ve ECMAScript 7 özelliğini benimsemiştir.

Promises benzer bir işi yaparken neden eşzamansız, ihtiyaç duyuluyor? Eşzamansız, daha büyük bir sorunu çözmeyi mi bekliyor?

async/awaitbasitçe size eşzamansız kod için eşzamanlı bir his verir. Çok zarif bir sözdizimsel şeker şeklidir.

Basit sorgular ve veri manipülasyonu için Promises basit olabilir, ancak karmaşık veri manipülasyonunun olduğu ve dahil olmayan senaryolarla karşılaşırsanız, kod sadece eşzamanlı görünüyorsa (başka bir deyişle, sözdizimi kendi başına, async/awaitetrafta dolaşabilen bir "tesadüfi karmaşıklık" biçimidir ).

Bilmek istiyorsanız co, aynı tür hissi vermek için (jeneratörlerin yanında) gibi bir kitaplık kullanabilirsiniz . Bunun gibi şeyler, async/awaitnihayetinde (doğal olarak) çözen problemi çözmek için geliştirilmiştir .

Async / Await, daha karmaşık senaryolarda çok daha güzel bir sözdizimi sağlar. Özellikle, döngülerle veya try/ gibi belirli diğer yapılarla ilgili her şey catch.

Örneğin:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Bu örnek, sadece Promises kullanılarak çok daha karmaşık olacaktır.

Promises benzer bir işi yaparken neden eşzamansız, ihtiyaç duyuluyor? Eşzamansız, daha büyük bir sorunu çözmeyi mi bekliyor? yoksa cehennemi geri aramak için farklı bir çözüm müydü? Daha önce de söylediğim gibi, Promises ve Async'i kullanabiliyorum, Aynı sorunu çözmeyi bekliyorum. Async Await'in çözdüğü belirli bir şey var mı?

Anlamanız gereken ilk şeyler async/ awaitsözdizimi sadece sözdizimsel şekerdir ve vaatleri artırmak içindir. Aslında bir asyncfonksiyonun dönüş değeri bir vaattir. async/ awaitsözdizimi bize zaman uyumsuz olarak eşzamanlı bir şekilde yazma imkanı verir. İşte bir örnek:

Söz zinciri:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Async işlev:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Yukarıdaki örnekte, awaitsözün ( fetch(url)) çözülmesini veya reddedilmesini bekler . Söz çözülürse, değer responsedeğişkende saklanır ve söz reddedilirse bir hata verir ve böylece catchbloğa girer .

async/ Kullanmanın awaitsöz zincirlemesinden daha okunaklı olabileceğini zaten görebiliyoruz . Bu, özellikle kullandığımız vaatlerin miktarı arttığında geçerlidir. Hem söz zincirleme hem de async/ awaitgeri arama cehennemi sorununu çözmek ve hangi yöntemi seçeceğiniz kişisel tercih meselesidir.

Artıları ve eksileri ile tam karşılaştırma.

Düz JavaScript

• Artıları

• Herhangi bir ek kitaplık veya teknoloji gerektirmez
• En iyi performansı sunar
• Üçüncü taraf kitaplıklar ile en iyi düzeyde uyumluluk sağlar
• Geçici ve daha gelişmiş algoritmaların oluşturulmasına izin verir

• Eksileri

• Ekstra kod ve nispeten karmaşık algoritmalar gerektirebilir

Zaman uyumsuz (kitaplık)

• Artıları

• En yaygın kontrol akış modellerini basitleştirir
• Hala geri arama tabanlı bir çözümdür
• İyi performans

• Eksileri

• Harici bir bağımlılık sunar
• Gelişmiş akışlar için hala yeterli olmayabilir

Sözler

• Artıları

• En yaygın kontrol akış modellerini büyük ölçüde basitleştirir
• Sağlam hata işleme
• ES2015 şartnamesinin bir parçası
• OnFulfilled ve onRedject için ertelenmiş başvuruyu garanti eder

• Eksileri

• Geri çağırma tabanlı API'ler gerektirir
• Küçük bir performans vuruşu sunar

Jeneratörler

• Artıları

• Engellemeyen API'yi engelleyici bir API gibi gösterir
• Basit hata işleme
• ES2015 şartnamesinin parçası

• Eksileri

• Tamamlayıcı bir kontrol akış kitaplığı gerektirir
• Yine de sıralı olmayan akışları uygulamak için geri aramalar veya vaatler gerektirir
• Jeneratör tabanlı olmayan API'ler için thunkify veya söz vermeyi gerektirir

Eşzamansız bekliyor

• Artıları

• Engellemeyen API'yi engelliyor gibi gösterir
• Temiz ve sezgisel sözdizimi

• Eksileri

• Babel veya diğer aktarıcılar ve bugün kullanılmak üzere bazı konfigürasyonlar gerektirir

Async / await, karmaşık kontrol akışına ihtiyaç duyduğunuz durumlarda kodunuzun daha temiz ve daha okunaklı olmasına yardımcı olabilir. Ayrıca daha fazla hata ayıklama dostu kod üretir. Ve hem eşzamanlı hem de eşzamansız hataları sadece ile işlemeyi mümkün kılar try/catch.

Geçenlerde, kod örnekleriyle birlikte bazı yaygın kullanım örneklerinde async / await'in vaatlere göre avantajlarını gösteren bu yazıyı yazdım: JavaScript Async / Await Blows Blows Away'in 6 Nedeni (Eğitim)