POCHOPENIE PRÍSĽUBOV JAVASCRIPTU PRE FIGURÍNY

Pochopenie prísľubov JavaScriptu pre figuríny

Sľuby Javascriptu nie sú ťažké. Mnoho ľudí to však na začiatku považuje za trochu ťažké pochopiť. Preto by som chcel zapisovať spôsob, akým chápem sľuby, atrapou.

Obsah

Pochopenie sľubov
Vytvorenie sľubu
Dodržiavanie sľubov
Reťazové sľuby
Sľuby sú asynchrónne
Sľuby v ES5 , ES6 /2015, ES7/Ďalej
Prečo ich sľúbiť a kedy ich použiť?
New Kid On the Block: Pozorovateľné
Zhrnutie

Pochopenie sľubov

Stručne povedané, sľub:

Predstavte si, že ste a dieťa . Tvoja mama sľuby ty, že ti získa a nový telefón budúci týždeň.

Vy neviem ak ten telefón dostanete do budúceho týždňa. Aj tvoja mama môže naozaj kúpiť ste úplne nový telefón, alebo vstaň a podržte telefón, ak nie je šťastná :(.

Toto je sľub . Sľub má 3 štáty. Oni sú:

Čakajúce: Vy neviem ak dostanete ten telefón
Splnené: Mama je šťastná, kupuje vám úplne nový telefón
Odmietnuté: Vaša mama je šťastná, zadržiava telefón

Vytvorenie prísľubu JavaScriptu

Premeňme to na JavaScript.

/_ ES5 _/ var isMomHappy = false; // Promise var willIGetNewPhone = new Promise( function (resolve, reject) { if (isMomHappy) { var phone = { brand: 'Samsung', color: 'black' }; resolve(phone); // fulfilled } else { var reason = new Error('mom is not happy'); reject(reason); // reject } } );

Kód je sám o sebe dosť expresívny.

// promise syntax look like this new Promise(/_ executor_/ function (resolve, reject) { ... } );

Dodržiavanie sľubov

Teraz, keď máme sľub, skonzumujme ho.

/_ ES5 _/ ... // call our promise var askMom = function () { willIGetNewPhone .then(function (fulfilled) { // yay, you got a new phone console.log(fulfilled); // output: { brand: 'Samsung', color: 'black' } }) .catch(function (error) { // oops, mom don't buy it console.log(error.message); // output: 'mom is not happy' }); }; askMom();

Ukážme si príklad a uvidíme výsledok!

Demo: https://jsbin.com/nifocu/1/edit?js,console

Reťazové sľuby

Sľuby sú reťaziteľné.

Povedzme, ty, dieťa, sľuby tvoj priateľ, že budeš Ukáž im nový telefón, keď ti ho mama kúpi.

To je ďalší prísľub. Poďme to napísať!

... // 2nd promise var showOff = function (phone) { return new Promise( function (resolve, reject) { var message = 'Hey friend, I have a new ' + phone.color + ' ' + phone.brand + ' phone'; resolve(message); } ); };

Poznámky:

// shorten it ... // 2nd promise var showOff = function (phone) { var message = 'Hey friend, I have a new ' + phone.color + ' ' + phone.brand + ' phone'; return Promise.resolve(message); };

Spojme reťaze sľubov. Vy, dieťa, môžete začať iba | _+_ | sľub po | _+_ | sľub.

showOff

Takto jednoducho je možné reťazec sľúbiť.

Sľuby sú asynchrónne

Sľuby sú asynchrónne. Zaznamenajme si správu pred a po tom, ako zavoláme sľub.

willIGetNewPhone

Aká je postupnosť očakávaného výstupu? Pravdepodobne očakávate:

... // call our promise var askMom = function () { willIGetNewPhone .then(showOff) // chain it here .then(function (fulfilled) { console.log(fulfilled); // output: 'Hey friend, I have a new black Samsung phone.' }) .catch(function (error) { // oops, mom don't buy it console.log(error.message); // output: 'mom is not happy' }); };

Skutočná postupnosť výstupu je však nasledovná:

// call our promise var askMom = function () { console.log('before asking Mom'); // log before willIGetNewPhone .then(showOff) .then(function (fulfilled) { console.log(fulfilled); }) .catch(function (error) { console.log(error.message); }); console.log('after asking mom'); // log after }

Prečo? Pretože život (alebo JS) nečaká na žiadneho muža.

Ty, dieťa, by si neprestal hrať, kým budeš čakať na prísľub svojej matky (nový telefón). Nie? To je niečo, čo nazývame asynchrónne , kód pobeží bez blokovania alebo čakania na výsledok. Čokoľvek, čo musí čakať na sľub, že bude pokračovať, vložte do | _+_ |.

Sľuby v ES5, ES6/2015, ES7/Next

ES5 - Väčšina prehliadačov

Demo kód je funkčný v prostrediach ES5 (všetky hlavné prehliadače + NodeJs), ak ho zahrnete Modrý vták sľubná knižnica. Je to pretože ES5 nepodporuje sľuby ihneď po vybalení. Ďalšou slávnou knižnicou prísľubov je Q od Krisa Kowala.

javascript previesť objekt na reťazec json

ES6 / ES2015 - Moderné prehliadače, NodeJs v6

Demo kód funguje po vybalení z krabice, pretože ES6 natívne podporuje sľuby. Navyše s funkciami ES6 môžeme kód ďalej zjednodušiť pomocou tučná šípka = > a používajte | _+_ | a | _+_ |.

Tu je príklad ES6 kód:

1. before asking Mom 2. Hey friend, I have a new black Samsung phone. 3. after asking mom

Poznamenáva, že všetky | _+_ | sa nahrádzajú | _+_ |. Všetky | _+_ | bolo zjednodušené na | _+_ |. Tieto zmeny majú niekoľko výhod. Prečítajte si viac na:-

ES7 - Async Await, aby syntax vyzerala krajšie

Predstavenie ES7 | _+_ | a | _+_ | syntax. Vďaka tomu vyzerá asynchrónna syntax krajšia a zrozumiteľnejšia bez | _+_ | a | _+_ |.

Prepíšte náš príklad syntaxou ES7.

1. before asking Mom 2. after asking mom 3. Hey friend, I have a new black Samsung phone.

Prečo ich sľúbiť a kedy ich použiť?

Prečo potrebujeme sľuby? Ako vyzerá svet pred prísľubom? Predtým, ako odpovieme na tieto otázky, vráťme sa k základu.

Normálne Funkcia vs. Asynchr Funkcia

Pozrime sa na tieto dva príklady, oba príklady vykonávajú sčítanie dvoch čísel, jedno pridanie pomocou normálnej funkcie, druhé pridanie vzdialene.

Normálna funkcia na pridanie dvoch čísel

.then

Asynchrónna funkcia na pridanie dvoch čísel

const

Ak sčítate čísla s normálnou funkciou, výsledok získate okamžite. Keď však odošlete vzdialený hovor, aby ste dosiahli výsledok, musíte počkať, nemôžete ihneď získať výsledok.

Alebo povedané takto, neviete, či získate výsledok, pretože server môže byť nefunkčný, reaguje pomaly atď. Nechcete, aby bol celý váš proces počas čakania na výsledok zablokovaný.

Volanie rozhraní API, sťahovanie súborov, čítanie súborov patrí medzi niektoré z bežných operácií asynchrónneho vykonávania.

Svet pred sľubmi: spätné volanie

Musíme pri asynchrónnom hovore použiť prísľub? Nie. Pred prísľubom používame spätné volanie. Spätné volanie je len funkcia, ktorú voláte, keď získate výsledok návratu. Upravme predchádzajúci príklad tak, aby prijal spätné volanie.

let

Syntax vyzerá dobre, prečo potom potrebujeme sľuby?

Čo keď chcete vykonať následnú asynchrónnu akciu?

Povedzme, že namiesto toho, aby sme čísla pridali iba raz, chceme ich sčítať trikrát. Pri normálnej funkcii to robíme:-

/_ ES6 _/ const isMomHappy = true; // Promise const willIGetNewPhone = new Promise( (resolve, reject) => { // fat arrow if (isMomHappy) { const phone = { brand: 'Samsung', color: 'black' }; resolve(phone); } else { const reason = new Error('mom is not happy'); reject(reason); } } ); const showOff = function (phone) { const message = 'Hey friend, I have a new ' + phone.color + ' ' + phone.brand + ' phone'; return Promise.resolve(message); }; // call our promise const askMom = function () { willIGetNewPhone .then(showOff) .then(fulfilled => console.log(fulfilled)) // fat arrow .catch(error => console.log(error.message)); // fat arrow }; askMom();

Ako to vyzerá so spätnými volaniami?

var

Demo: https://jsbin.com/barimo/edit?html,js,console

Syntax je menej užívateľsky prívetivá. Lepšie povedané, vyzerá to ako pyramída, ale ľudia to zvyčajne označujú ako peklo spätného volania, pretože spätné volanie sa vnorilo do ďalšieho spätného volania. Predstavte si, že máte 10 spätných volaní, váš kód sa vnorí 10 -krát!

Útek z pekla spätného volania

Sľuby prichádzajú na záchranu. Pozrime sa na sľubnú verziu rovnakého príkladu.

const

Demo: https://jsbin.com/qafane/edit?js,console

sql cheat sheet na pohovor

Sľubmi vyrovnáme spätné volanie s | _+_ |. Svojím spôsobom to vyzerá čistejšie, pretože nedochádza k vnoreniu spätného volania. Samozrejme, s ES7 | _+_ | syntax, tento príklad môžeme ešte vylepšiť, ale to už nechám na vás. :)

New Kid On the Block: Pozorovateľné

Predtým, ako sa uspokojíte so sľubmi, došlo k niečomu, čo ešte viac uľahčuje nakladanie s asynchrónnymi údajmi s názvom | _+_ |.

Pozorovateľné sú lenivé toky udalostí, ktoré môžu emitovať nula alebo viac udalostí a môžu, ale nemusia sa skončiť. zdroj

Niektoré kľúčové rozdiely medzi sľubmi a pozorovateľnými sú:

Nebojte sa, pozrime sa na to isté demo napísané pomocou Observables. V tomto prípade používam RxJS pre pozorovateľné.

function(resolve, reject)

Demo: https://jsbin.com/dosaviwalu/edit?js,console

Poznámky:

Pozorovateľní môžu ľahko vykonávať zábavnejšie veci. Napríklad | _+_ | pridať funkciu podľa | _+_ | iba s jedným riadkom kódu alebo to skúste znova, aby ste mohli hovor zopakovať určitý počet krát.

(resolve, reject) =>

Porozprávajme sa o Pozorovateľných v budúcom príspevku!

Zhrnutie

Zoznámte sa s spätnými volaniami a sľubmi. Pochopte ich a používajte ich. Zatiaľ si nerobte starosti s pozorovateľnými. Všetky tri môžu ovplyvniť váš vývoj v závislosti od situácie.

Tu sú demo kódy pre všetky | _+_ | príklady:

To je všetko. Dúfajme, že tento článok vám uľahčí cestu k skroteniu sľubov JavaScriptu.

Šťastné kódovanie!

#javascript

Pochopenie prísľubov JavaScriptu pre figuríny