Pažadai yra aktuali tema „JavaScript“ kūrimo būreliai , ir jūs tikrai turėtumėte su jais susipažinti. Jų nėra lengva apsukti galvą; norint juos suprasti, gali prireikti kelių pamokų, pavyzdžių ir pakankamai daug praktikos.

Mano tikslas yra padėti jums suprasti „JavaScript“ pažadus ir paraginti daugiau naudotis jais. Aš paaiškinsiu, kas yra pažadai, kokias problemas jie sprendžia ir kaip jie veikia. Kiekvieną šiame straipsnyje aprašytą žingsnį lydi jsbin kodo pavyzdys, kuris padės jums dirbti kartu ir bus naudojamas kaip pagrindas tolesniems tyrimams.

nemokama „fullz“ kreditinė kortelė 2017 m

Kas yra „JavaScript“ pažadas?

Pažadas yra metodas, galiausiai sukuriantis vertę. Tai gali būti laikoma asinchroniniu „getter“ funkcijos atitikmeniu. Jo esmę galima paaiškinti taip:

promise.then(function(value) { // Do something with the 'value' });

Pažadai gali pakeisti asinchroninį skambučių naudojimą, ir jie teikia keletą pranašumų. Jie pradeda įsitvirtinti, kai vis daugiau bibliotekų ir sistemų jas priima kaip pagrindinį būdą tvarkyti asinchroniškumą. Ember.js yra puikus tokios sistemos pavyzdys.

Yra kelios bibliotekos kad padargas „Promises / A +“ specifikaciją . Išmoksime pagrindinį žodyną ir naudodamiesi keliais „JavaScript“ pažadų pavyzdžiais praktiškai pristatysime jų sąvokas. Aš naudosiu vieną iš populiariausių diegimo bibliotekų, rsvp.js , kodo pavyzdžiuose.

Pasiruoškite, mes išmesime daug kauliukų!

Gaunama rsvp.js biblioteka

Pažadai, taigi ir rsvp.js, gali būti naudojami tiek serveryje, tiek kliento pusėje. Norėdami ją įdiegti nodejs , eikite į savo projekto aplanką ir įveskite:

npm install --save rsvp

Jei dirbate priekinėje dalyje ir naudojate „bower“, tai tiesiog

bower install -S rsvp

toli.

Jei norite tiesiog patekti į žaidimą, galite jį įtraukti naudodami paprastą scenarijaus žymą (o naudodami jsbin galite pridėti ją išskleidžiamajame meniu „Pridėti biblioteką“):

fulfill

Kokias savybes turi pažadas?

Pažadas gali būti vienoje iš trijų valstybių: kol , įvykdė arba Atstumtas . Sukūrus pažadą, laukiama jo būsenos. Iš čia jis gali pereiti į įvykdytą arba atmestą būseną. Mes vadiname šį perėjimą pažado sprendimas . Išspręsta pažado būsena yra jos galutinė būsena, todėl ją įvykdžius ar atmetus, ji ir lieka.

Rsvp.js pažadas gali būti sukurtas vadinamuoju būdu atsiskleidžiantis konstruktorius . Šio tipo konstruktorius paima vieną funkcijos parametrą ir nedelsdamas iškviečia jį dviem argumentais reject ir fulfilled, tai gali peržadėti pažadą arba rejected arba var promise = new RSVP.Promise(function(fulfill, reject) { (...) }); valstybė:

kaip atlikti c ++ programavimą

then

Šis „JavaScript“ pažadų modelis yra vadinamas atskleidžiančiu konstruktoriumi, nes vienos funkcijos argumentas atskleidžia jo galimybes konstruktoriaus funkcijai, tačiau užtikrina, kad pažado vartotojai negalėtų manipuliuoti jo būsena.

Pažado vartotojai gali reaguoti į jos būsenos pokyčius, pridėdami savo tvarkytoją per promise.then(onFulfilled, onRejected); metodas. Tam reikia įvykdymo ir atmetimo tvarkytojo funkcijų, kurių abiejų gali trūkti.

onFulfilled

Priklausomai nuo pažado sprendimo proceso rezultato, onRejected arba function dieToss() { return Math.floor(Math.random() * 6) + 1; } console.log('1'); var promise = new RSVP.Promise(function(fulfill, reject) { var n = dieToss(); if (n === 6) { fulfill(n); } else { reject(n); } console.log('2'); }); promise.then(function(toss) { console.log('Yay, threw a ' + toss + '.'); }, function(toss) { console.log('Oh, noes, threw a ' + toss + '.'); }); console.log('3'); iškviečiamas vedlys asinchroniškai .

Pažiūrėkime pavyzdys tai rodo, kokia tvarka viskas vykdoma:

1 2 3 Oh, noes, threw a 4.

Šis fragmentas spausdina išvestį, panašią į šią:

1 2 3 Yay, threw a 6.

Arba, jei mums pasiseks, pamatysime:

then

Ši pažadų pamoka parodo du dalykus.

Pirma, kad prižiūrėtojai, kuriuos pridėjome prie pažado, iš tikrųjų buvo iškviesti, kai visi kiti kodai buvo paleisti asinchroniškai.

Antra, kad įvykdymo tvarkytojas buvo iškviestas tik tada, kai pažadas buvo įvykdytas, su verte, kuria jis buvo išspręstas (mūsų atveju - kauliukų metimo rezultatas). Tas pats pasakytina ir apie atmetimo tvarkytoją.

Pažadų grandinė ir žlugdymas

Specifikacijoje reikalaujama, kad signupPayingUser .then(displayHoorayMessage) .then(queueWelcomeEmail) .then(queueHandwrittenPostcard) .then(redirectToThankYouPage) funkcija (tvarkytojai) taip pat turi grąžinti pažadą, kuris įgalina susieti pažadus kartu ir gauti kodą, kuris atrodo beveik sinchroniškas:

signupPayingUser

Čia, function dieToss() { return Math.floor(Math.random() * 6) + 1; } function tossASix() { return new RSVP.Promise(function(fulfill, reject) { var n = Math.floor(Math.random() * 6) + 1; if (n === 6) { fulfill(n); } else { reject(n); } }); } function logAndTossAgain(toss) { console.log('Tossed a ' + toss + ', need to try again.'); return tossASix(); } function logSuccess(toss) { console.log('Yay, managed to toss a ' + toss + '.'); } function logFailure(toss) { console.log('Tossed a ' + toss + '. Too bad, couldn't roll a six'); } tossASix() .then(null, logAndTossAgain) //Roll first time .then(null, logAndTossAgain) //Roll second time .then(logSuccess, logFailure); //Roll third and last time pateikia pažadą, o kiekviena pažadų grandinės funkcija bus iškviesta su ankstesnio tvarkytojo grąžinimo verte, kai ji bus baigta. Visais praktiniais tikslais tai sujungia skambučius, neužblokuodamas pagrindinės vykdymo gijos.

Norėdami pamatyti, kaip kiekvienas pažadas bus išspręstas pagal ankstesnio grandinės elemento grąžinimo vertę, grįžtame prie kauliukų metimo. Mes norime mesti kauliukus daugiausia tris kartus arba tol, kol pasirodys pirmieji šeši jsbin :

Tossed a 2, need to try again. Tossed a 1, need to try again. Tossed a 4. Too bad, couldn't roll a six.

Vykdydami šį pažadų kodo pavyzdį, konsolėje pamatysite kažką panašaus:

tossASix

Pažadą grąžino logAndTossAgain atmetamas, kai metimas nėra šeši, todėl atmetimo tvarkytojas iškviečiamas su faktiniu metimu. logAndTossAgain atspausdina ant konsolės ir pateikia pažadą, kuris reiškia dar vieną kauliukų metimą. Savo ruožtu tas metimas taip pat atmetamas ir atjungiamas iki kito Tossed a 4, need to try again. Yay, managed to toss a 6.

Tačiau kartais jums pasiseka * ir pavyksta išmesti šešetuką:

kas yra bendra adresuojama rinka

then

* Jums nereikia gauti kad pasisekė. Yra maždaug 42% tikimybė sukti bent vieną šešetą, jei metate tris kauliukus.

Tas pavyzdys taip pat moko mus ko nors daugiau. Pažiūrėkite, kaip daugiau metimų nebuvo padaryta po pirmo sėkmingo šešetuko ridenimo? Atkreipkite dėmesį, kad visi įvykdymo tvarkytojai (pirmieji argumentai skambučiuose į null) grandinėje yra logSuccess, išskyrus paskutinį, null. Specifikacijoje reikalaujama, kad jei tvarkytojas (įvykdymas ar atmetimas) nėra funkcija, grąžintas pažadas turi būti išspręstas (įvykdytas arba atmestas) su ta pačia verte. Ankstesniame pažadų pavyzdyje įvykdymo tvarkytuvas then nėra funkcija, o pažado vertė buvo įvykdyta su 6. Taigi pažadas, kurį grąžino signupPayingUser .then(displayHoorayMessage) .then(queueWelcomeEmail) .then(queueHandwrittenPostcard) .then(redirectToThankYouPage) .then(null, displayAndSendErrorReport) skambutis (kitas grandinėje) taip pat bus įvykdytas, jo vertė yra 6.

Tai kartojasi tol, kol yra tikrasis įvykdymo tvarkytojas (tas, kuris yra funkcija), taigi įvykdymas teka žemyn kol bus tvarkoma. Mūsų atveju tai atsitinka grandinės gale, kur jis linksmai prisijungia prie konsolės.

Tvarkymo klaidos

„Promises / A +“ specifikacijoje reikalaujama, kad jei pažadas būtų atmestas arba atmestų klaidų įmetimo klaida būtų atmesta, tai turėtų atlikti atmetimo apdorotojas, kuris yra „pasroviui“ nuo šaltinio.

Pasitelkiant žemiau pateiktą „down down“ techniką, galima aiškiai valdyti klaidas:

displayAndSendErrorReport

Kadangi atmetimo tvarkytuvas pridedamas tik pačiame grandinės gale, jei kuris nors įvykdymo tvarkytojas grandinėje atmetamas arba išmeta klaidą, jis nusileidžia žemyn, kol atsitrenkia į var tossTable = { 1: 'one', 2: 'two', 3: 'three', 4: 'four', 5: 'five', 6: 'six' }; function toss() { return new RSVP.Promise(function(fulfill, reject) { var n = Math.floor(Math.random() * 6) + 1; fulfill(n); }); } function logAndTossAgain(toss) { var tossWord = tossTable[toss]; console.log('Tossed a ' + tossWord.toUppercase() + '.'); } toss() .then(logAndTossAgain) .then(logAndTossAgain) .then(logAndTossAgain); .

Grįžkime prie savo mylimų kauliukų ir pažiūrėkime, kaip tai veikia. Tarkime, kad mes tiesiog norime mesti kauliukus asinchroniškai ir atspausdinti rezultatus:

function logAndTossAgain(toss) { var tossWord = tossTable[toss]; console.log('Tossed a ' + tossWord.toUpperCase() + '.'); } function logErrorMessage(error) { console.log('Oops: ' + error.message); } toss() .then(logAndTossAgain) .then(logAndTossAgain) .then(logAndTossAgain) .then(null, logErrorMessage);

Kai tai paleisite, nieko neįvyks. Niekas nėra atspausdintas ant pulto ir, atrodo, nėra klaidų.

Iš tikrųjų klaida išmetama, mes jos tiesiog nematome, nes grandinėje nėra atmetimo tvarkytojų. Kadangi kodas tvarkytuvuose vykdomas asinchroniškai, su nauju kaupu, jis net neprisijungęs prie konsolės. Tegul sutvarkyk tai :

'Tossed a TWO.' 'Oops: Cannot read property 'toUpperCase' of undefined'

Paleidus aukščiau nurodytą kodą dabar rodoma klaida:

logAndTossAgain

Pamiršome ką nors grąžinti iš undefined o antrasis pažadas įvykdomas toUpperCase. Kitas įvykdymų tvarkytojas susprogdina bandydamas paskambinti rsvp.js apie tai. Tai dar vienas svarbus dalykas, kurį reikia atsiminti: visada grąžinkite ką nors iš prižiūrėtojų arba būkite pasiruošę kitiems tvarkytojams, kad nieko nepraeitų.

Pastatas aukštesnis

Dabar mes pamatėme „JavaScript“ pažadų pagrindus šios pamokos kodo pavyzdyje. Didžiulis jų naudojimo pranašumas yra tas, kad juos galima sudaryti paprastais būdais, kad pateiktų „sudėtingus“ pažadus su norimu elgesiu. function toss() { var n = Math.floor(Math.random() * 6) + 1; return new RSVP.resolve(n); // [1] } function threeDice() { var tosses = []; function add(x, y) { return x + y; } for (var i=0; i<3; i++) { tosses.push(toss()); } return RSVP.all(tosses).then(function(results) { // [2] return results.reduce(add); // [3] }); } function logResults(result) { console.log('Rolled ' + result + ' with three dice.'); } function logErrorMessage(error) { console.log('Oops: ' + error.message); } threeDice() .then(logResults) .then(null, logErrorMessage); biblioteka pateikia saujelę jų, ir jūs visada galite sukurti savo, naudodamiesi primityviaisiais ir šiais aukštesnio lygio.

Norėdami sužinoti paskutinį, sudėtingiausią pavyzdį, mes keliaujame į pasaulį 500 m vaidmenų atlikimas ir mėtymas kauliukais, norint gauti simbolių balus. Tokie balai gaunami sukant po tris kauliukus kiekvienam personažo įgūdžiui .

Leisk man įklijuoti kodas čia pirmiausia paaiškinkite, kas nauja:

toss

Mes esame susipažinę su RSVP.resolve iš paskutinio kodo pavyzdžio. Tai tiesiog sukuria pažadą, kuris visada įvykdomas metant kauliuką. Aš naudojau threeDice patogų metodą, kuris sukuria tokį pažadą su mažiau ceremonijų (žr. [1] aukščiau pateiktame kode).

RSVP.all Sukūriau 3 pažadus, kurie kiekvienas reiškia kauliukų metimą, ir galiausiai juos sujungiau su RSVP.all results priima pažadų rinkinį ir yra išspręstas pateikiant jų išspręstų vertybių masyvą, po vieną kiekvienam pažadui, išlaikant jų tvarką. Tai reiškia, kad mesčių rezultatas yra 'Rolled 11 with three dice' (žr. [2] aukščiau pateiktame kode), ir mes grąžinsime pažadą, kuris bus įvykdytas jų suma (žr. [3] aukščiau pateiktame kode).

Tada išsprendus gautą pažadą registruojamas bendras skaičius:

RSVP.all

Pažadų naudojimas realioms problemoms išspręsti

„JavaScript“ pažadai naudojami kur kas sudėtingesnių programų problemoms spręsti nei asinchroniniai dėl nieko gero kauliukų metimai .

Jei pakeisite tris kauliukus, išsiųsdami tris „ajax“ užklausas atskiriems galiniams taškams ir tęsite, kai visi jie sėkmingai grįš (arba jei kuris nors iš jų nepavyko), jūs jau turite naudingą pažadų ir

|_+_|

taikymą.

pagal kurią licenciją platinamas „Linux“?

Pažadai, tinkamai naudojant, sukuria lengvai įskaitomą kodą, kurį lengviau pagrįsti ir tokiu būdu lengviau derinti nei skambučius. Nereikia nustatyti konvencijų dėl, pavyzdžiui, klaidų tvarkymo, nes jos jau yra specifikacijos dalis.

Mes vos subraižėme, ką pažadai gali padaryti šioje „JavaScript“ pamokoje. Pažadėtosios bibliotekos pateikia gerą dešimtį metodų ir žemo lygio konstruktorių, kurie yra jūsų žinioje. Įvaldykite šiuos dalykus, o dangus yra riba, ką galite su jais padaryti.

Apie autorių

Balintas Erdi jau seniai buvo puikus vaidmenų ir AD&D gerbėjas, dabar yra puikus pažadas ir „Ember.js“ gerbėjas. Tai, kas buvo nuolat, yra jo aistra rokenrolui. Štai kodėl jis nusprendė rašyti knygą Ember.js knygoje naudojama rokenrolas kaip programos taikymo tema. Prisiregistruok čia žinoti, kada jis paleidžiamas.