Programavimo pasaulyje svarbu efektyviai valdyti asinchroninius procesus, kad būtų užtikrinta patraukli vartotojo patirtis. Ypač JavaScript programavimo kalboje yra daugybė būdų tai padaryti. Vienas iš populiariausių metodų dirbant su asinchroniniais procesais yra async/await konstrukcija. Tai apima sintaksinį supaprastinimą, leidžiantį aiškiau ir skaidriau rašyti asinchroninę programą. Šiame vadove susipažinsime su async ir await pagrindais ir sužinosime, kaip jie gali pagerinti tavo kodavimą.
Pagrindinės įžvalgos
- async/await leidžia aiškiai ir paprastai rašyti sintaksę asinchroninių procesų valdymui.
- Bet kuri funkcija, naudojanti await raktinį žodį, turi būti pažymėta kaip async.
- await efektyviai laukia, kol būsena yra išpildyta, prieš tęsiant kodo vykdymą.
- Klaidos valdymas gali būti elegantiškai įgyvendintas naudojant try/catch blokus.
Žingsnis po žingsnio vadovas
Visų pirma, turėtumėte įsitikinti, kad suprantate Promises pagrindus, kadangi async/await remiasi jais. Jei jau esate susipažinę su Promises, dabar galime aptarti asynchronous async/await naudojimą.
Žingsnis 1: Sukurkite Delayed funkciją
Pradėkite nuo paprastos funkcijos, kuri grąžina Promise ir simuliuoja delsimo proceso. Štai pavyzdys funkcijos, vadinamos delay.
Tai yra pagrindinė įgyvendinimo versija. Su šia funkcija galite nurodyti delsimo trukmę milisekundėmis.
Žingsnis 2: Introdukcija Async ir Await
Dabar norite pasinaudoti async/await privalumais. Pradėkite kurdami funkciją, kuri naudoja async raktinį žodį.
Šiame kodo gabale funkcija runDelay naudoja async raktinį žodį, leidžiant jai naudoti await. Tai reiškia, kad funkcijos vykdymas bus sustabdytas, kol Promise, kurį grąžina delay funkcija, bus įvykdytas.
Žingsnis 3: Testuoti asinchroninę funkciją
Norėdami išbandyti, kaip ji veikia, iškvieskite runDelay funkciją.
Vykdydami scenarijų pamatysite, kad konsolė išveda "Pradedama vėlavimas...", po to 2 sekundes pauzuoja ir galiausiai parodo "Vėlavimas baigtas."
Žingsnis 4: Klaidos valdymas su try/catch
Programavimo metu tai dažnai vyksta – klaidos gali atsirasti bet kada. Su async/await galite lengviau tvarkyti klaidas pasinaudodami try/catch.
Jei norite sugauti klaidas, galite modifikuoti runDelay funkciją taip:
Pasinaudojant try/catch, bet kuri klaida, kuri atsiranda vykdant await delay(2000), gali būti sugauta ir parodyta.
Žingsnis 5: Naudoti fetch su async/await
Kitas dažnai pasitaikantis atvejis yra duomenų gavimas naudojant fetch API.
Šiame pavyzdyje naudojant fetch siunčiama tinklo užklausa. Vėlgi, mes galime pasinaudoti await, kad užtikrintume, jog palauksime atsakymo, prieš tęsdami.
Suminavimas - Async ir Await: Žingsnis po žingsnio vadovas
Šiame vadove sužinojote, kaip su async/await konstrukcija JavaScript efektyviau valdyti asinchroninius procesus. Pamatėte, kaip sukurti vėlavimą, kaip tvarkyti klaidas ir kaip efektyviai gauti duomenis naudojant fetch API.
Pasinaudokite šia sintaksė savo būsimuose projektuose, kad jūsų kodas būtų skaidresnis ir lengviau prižiūrimas!
Dažnai užduodami klausimai
Koks yra skirtumas tarp async ir await?async pažymi funkciją kaip asinchroninę, tai reiškia, kad ji grąžins Promises. await naudojamas laukimui, kol vykdoma Promise.
Kada turėtumėte naudoti async/await?Naudokite, kai dirbate su asinchroniniais procesais ir norite, kad jūsų kodas būtų aiškus ir skaidrus.
Ar galiu naudoti async/await kiekviename naršyklėje?Taip, bet įsitikinkite, kad naudojama naršyklė palaiko modernią JavaScript sintaksę. Jei reikia, galite naudoti transpilerus, tokius kaip Babel.
Ar galiu naudoti await paprastoje funkcijoje?Ne, norint naudoti await, funkcija, kurioje jis naudojamas, turi būti pažymėta kaip async.
Kas atsitinka, jei Promise nepavyksta?Jei Promise nepavyksta, išmetama klaidos žinutė, kurią galima tvarkyti naudojant try/catch.
