Javscript async / await

Bu eğitimde, örnekler yardımıyla JavaScript async / await anahtar kelimeleri hakkında bilgi edineceksiniz.

Sen kullanmak asyncfonksiyon, asenkron fonksiyon olduğunu temsil eden bir işleve sahip anahtar kelimeyi. Zaman uyumsuz işlev bir söz verir.

asyncİşlevin sözdizimi şöyledir:

 async function name(parameter1, parameter2,… paramaterN) ( // statements )

Buraya,

  • isim - fonksiyonun adı
  • parametreler - işleve aktarılan parametreler

Örnek: Async Function

 // async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f(); 

Çıktı

 Eşzamansız işlev.

Yukarıdaki programda asyncanahtar kelime, fonksiyonun asenkron olduğunu göstermek için fonksiyondan önce kullanılır.

Bu işlev bir vaat döndürdüğü için, zincirleme yöntemini şu şekilde kullanabilirsiniz then():

 async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));

Çıktı

 Eşzamansız işlev 1

Yukarıdaki programda f()fonksiyon çözümlenir ve then()yöntem çalıştırılır.

JavaScript Anahtar Kelime bekliyor

awaitAnahtar kelime içinde kullanılır asyncasenkron operasyon için beklemek fonksiyonu.

Await kullanılacak sözdizimi şöyledir:

 let result = await promise;

Kullanımı await, vaat bir sonuç (çözme veya reddetme) değeri döndürene kadar eşzamansız işlevi duraklatır. Örneğin,

 // a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();

Çıktı

 Söz çözüldü merhaba

Yukarıdaki programda bir Promisenesne oluşturulur ve 4000 milisaniyeden sonra çözülür . Burada asyncFunc()fonksiyon, fonksiyon kullanılarak yazılır async.

awaitVaadi için anahtar kelime bekler tamamlandı (çözmek veya reddetmek) olmak.

 let result = await promise;

Bu nedenle, merhaba yalnızca sonuç değişkeni için vaat değeri mevcut olduğunda görüntülenir.

Yukarıdaki programda, awaitkullanılmazsa, Promise çözülmeden önce merhaba görüntülenir.

Eşzamansız / bekleme işlevinin çalışması

Not : awaitEşzamansız işlevlerin yalnızca içinde kullanabilirsiniz .

Eşzamansız işlev, eşzamansız yöntemin görünüşte eşzamanlı bir şekilde yürütülmesine izin verir. İşlem eşzamansız olmasına rağmen, işlemin eşzamanlı olarak yürütüldüğü görülmektedir.

Programda birden fazla vaat varsa bu yararlı olabilir. Örneğin,

 let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )

Yukarıdaki programda, awaither sözün tamamlanmasını bekler.

Hata yönetimi

asyncFonksiyonu kullanırken, kodu senkronize bir şekilde yazarsınız. Ayrıca catch(), hatayı yakalamak için yöntemi de kullanabilirsiniz . Örneğin,

 asyncFunc().catch( // catch error and do something )

Bir hatayı ele almanın diğer yolu try/catchblok kullanmaktır . Örneğin,

 // a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved

Yukarıdaki programda, try/catchhataları işlemek için blok kullandık . Program başarılı bir şekilde çalışırsa, trybloğa gidecektir . Ve program bir hata atarsa, catchbloğa gidecektir .

Daha try/catchayrıntılı bilgi edinmek için JavaScript JavaScript dene / yakala sayfasını ziyaret edin.

Eşzamansız İşlev Kullanmanın Yararları

  • Kod, bir geri arama veya söz kullanmaktan daha okunabilir.
  • Hata işleme daha basittir.
  • Hata ayıklama daha kolaydır.

Not : Bu iki anahtar kelime async/await, JavaScript'in yeni sürümünde (ES8) tanıtıldı. Bazı eski tarayıcılar async / await kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript async sayfasını ziyaret edin / tarayıcı desteğini bekleyin.

Ilginç makaleler...