În acest tutorial, veți afla despre asincronizarea / așteptarea cuvintelor cheie JavaScript cu ajutorul unor exemple.
Utilizați asynccuvântul cheie cu o funcție pentru a reprezenta că funcția este o funcție asincronă. Funcția de sincronizare returnează o promisiune.
Sintaxa asyncfuncției este:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Aici,
- nume - numele funcției
- parametri - parametri care sunt trecuți funcției
Exemplu: Funcția de sincronizare
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Ieșire
Funcția de sincronizare.
În programul de mai sus, asynccuvântul cheie este utilizat înainte de funcție pentru a reprezenta că funcția este asincronă.
Deoarece această funcție returnează o promisiune, puteți utiliza metoda de înlănțuire then()astfel:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Ieșire
Funcția de sincronizare 1
În programul de mai sus, f()funcția este rezolvată și then()metoda este executată.
JavaScript așteaptă cuvântul cheie
Cuvântul awaitcheie este utilizat în interiorul asyncfuncției pentru a aștepta operațiunea asincronă.
Sintaxa de utilizat await este:
let result = await promise;
Utilizarea awaitpauzelor funcției de sincronizare până când promisiunea returnează o valoare de rezultat (rezolvă sau respinge). De exemplu,
// 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();
Ieșire
Promisiunea s-a rezolvat salut
În programul de mai sus, Promisese creează un obiect și se rezolvă după 4000 de milisecunde. Aici, asyncFunc()funcția este scrisă folosind asyncfuncția.
Cuvântul awaitcheie așteaptă ca promisiunea să fie completă (rezolvă sau respinge).
let result = await promise;
Prin urmare, salut este afișat numai după ce valoarea promisiunii este disponibilă pentru variabila de rezultat.
În programul de mai sus, dacă awaitnu este utilizat, salut este afișat înainte ca Promise să fie rezolvată.
Funcționarea funcției de asincronizare / așteptare
Notă : Puteți utiliza awaitnumai în interiorul funcțiilor asincronizate.
Funcția asincronă permite ca metoda asincronă să fie executată într-un mod aparent sincron. Deși operația este asincronă, se pare că operația este executată în mod sincron.
Acest lucru poate fi util dacă există mai multe promisiuni în program. De exemplu,
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); )
În programul de mai sus, awaitașteaptă ca fiecare promisiune să fie completă.
Eroare de manipulare
În timp ce utilizați asyncfuncția, scrieți codul într-o manieră sincronă. Și puteți utiliza, de asemenea, catch()metoda pentru a detecta eroarea. De exemplu,
asyncFunc().catch( // catch error and do something )
Celălalt mod în care puteți gestiona o eroare este prin utilizarea try/catchblocului. De exemplu,
// 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
În programul de mai sus, am folosit try/catchblocul pentru a gestiona erorile. Dacă programul rulează cu succes, acesta va merge la trybloc. Și dacă programul aruncă o eroare, acesta va merge la catchbloc.
Pentru a afla mai multe try/catchdetalii, vizitați JavaScript JavaScript try / catch.
Avantajele utilizării funcției de sincronizare
- Codul este mai ușor de citit decât utilizarea unui callback sau a unei promisiuni.
- Tratarea erorilor este mai simplă.
- Depanarea este mai ușoară.
Notă : aceste două cuvinte cheie async/awaitau fost introduse în versiunea mai nouă a JavaScript (ES8). Este posibil ca unele browsere mai vechi să nu accepte utilizarea async / await. Pentru a afla mai multe, vizitați JavaScript async / așteaptă asistența browserului.
