Olen ollut hyvin innostunut Promisesista siitä lähtien, kun ne esiteltiin vuosi sitten. Vaikka ympärillä liikkuu paljon viestejä ja mielipiteitä, Promises ei tee koodistasi suorituskykyisempää… ne tekevät siitä helpommin luettavaa ja ymmärrettävää (mikä minun kirjassani merkitsee usein paljon enemmän!)
Tämän postauksen ensimmäisessä osassa selitän promisesien perusrakenteen. Jos ymmärrät sen, voit vapaasti selata postauksen jälkimmäiseen osaan.
Lupaukset selitettynä selkokielellä
Tässä on lupauksen perusrakenne Javascriptissä:
Tässä on aika tyypillinen (ja vaikeasti lähestyttävä) koodinpätkä. Yritän eritellä, mistä on kyse.
Keskity aluksi vain riveihin 1-15:
- Tässä on instantiointi. Tällä rivillä luodaan periaatteessa lupaus. Lupaus JS:ssä tarvitsee jotain tehtävää, tehtävän. Joten funktio, jonka näet tässä välitettävän – function (resolve,reject) {…} on tuo tehtävä
- Seuraavaksi näet tehtävän rungon. Voit tehdä asioita täällä. Jossain tässä koodilohkossa sinun täytyy päättää, menivätkö asiat hyvin vai eivät. Jos esimerkiksi käytit tätä tilaa noutaaksesi kuvan, joko sait sen (meni hyvin)… tai et saanut (ei niin hyvin).
- Jos asiat menivät hyvin, kutsut jotain funktiota, joka merkitsee tämän lupauksen ”ratkaistuksi”. Jos asiat eivät menneet suunnitelmien mukaan, ”hylkäät” tämän lupauksen. (puhumme tästä tarkemmin ihan kohta)
Keskitytään nyt koodinpätkän jäljellä olevaan osaan, riveihin 17-27:
- Seuraavissa riveissä 1-15 olet tähän mennessä vain määritellyt Promise-oliosi
- Riveillä 17 & 22 olet periaatteessa liittänyt siihen käsittelijän
- promise.XXXX (jossa XXX voi olla ”.then” tai ”.catch” jne.) periaatteessa suorittaa lupauksessa määritellyn funktion (rivit 1-15). Sen perusteella, miten asiat menivät (ratkaistu tai hylätty), ne kutsuvat ”.then”- ja ”.catch”-funktioita. Joten jos lupaus ratkaistiin (…asiat menivät hyvin), suoritetaan funktio sisällä .then(…), muuten suoritetaan funktio sisällä .catch(…).
Huomautus:
- ”.then(function)” palauttaa lupauksen. Lisäksi voit kutsua ”.then(…)” tai ”.catch(…)” vain Promise-objekteihin.
Nyt kun olemme käsitelleet perusteet, katsotaanpa mielenkiintoisempi esimerkki siitä, mitä voimme tehdä Promiseilla.
Promisejen ketjuttaminen useiden pyyntöjen suorittamiseksi
Objekti: Vastikään törmäsin tilanteeseen, jossa minun piti hakea joukko URL-osoitteita peräkkäin. Kunkin URL-osoitteen vastaus oli kuitenkin käsiteltävä eri tavalla URL-osoitteen perusteella.
Tässä postauksessa oletetaan, että haettavat urlit ovat:
- google.com
- apple.com
- amazon.com
Tässä on yksinkertaistettu versio skriptistä, jota käytin tämän hoitamiseen:
Kerrotaanpa tämä alaspäin:
- Rivit 1-11: Luodaan yksinkertainen kääre jQueryn tarjoaman AJAX Get -menetelmän ympärille. Tämä yksinkertaisesti välittää vastauksen määritettyyn takaisinkutsuun.
- Rivit 18-51: Luon sitten kolme funktiota (kyllä! Funktioita!), jotka palauttavat JS-lupauksen
- Jokainen lupaus tekee sisäisesti näin – käyttää Ajax-kääreestä url-osoitteensa noutamiseen, ja kun data/vastaus on vastaanotettu, se tekee jotakin datalla ja kutsuu lopuksi ”resolve()”
- Rivillä 54: Ketjutan nämä lupaukset peräkkäin. Huomaa, että jokainen näistä funktioista palauttaa lupauksen (eikä ole lupaus itsessään). Siksi käytän ”first()”.then(…) vastakohtana ”first.then(…)”
Lisäksi selventääkseni, tässä on tapa tarkastella lupausten ketjua.
Tällä tavalla voit peräkkäin hakea jokaisen URL-osoitteen, käsitellä sen halutulla tavalla ja laukaista ”resolved()”-funktio, joka laukaisee ketjussa olevan seuraavan Promise:n 🙂
Huomaa: jos yrität suorittaa yllä olevan koodinpätkän selaimessa, sinun on otettava CORS käyttöön. Tässä on Chrome-laajennus, joka auttaa tekemään tämän yksinkertaisella klikkauksella.
Toivottavasti pidit tästä viestistä.