Fyrirlestur – Ósamstillt forritun

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Ósamstillt forritun (async programming)

• Þegar forritin okkar fara að nýta hluti sem eru ekki í minni þurfum við að beita öðrum aðferðum í forritun
• Það er hratt að sækja hluti í minni, hægara að sækja á disk og (oftast) enn hægara að sækja yfir net
• Bíðum ekki eftir því að beiðni klárist, nýtum ósamstillta forritun (asynchronous/async programming)

---

Samstillt forritun

• Flest forrit sem þið hafið séð hingað til eru samstillt—þau keyra eina línu í einu, eitt fall í einu—eru línuleg
• Hægt að nota þræði, JavaScript hefur ekki stuðning við þá
• Notum async forritun með event loop á einum þræði
• Höldum CPU ekki uppteknum á meðan beðið

---

---

Callbacks

• Ein leið til að vinna með async kóða, t.d. í atburðum
• Köllum í fall sem tekur langan tíma, eða verður kallað í seinna, með callback argument
• Fallið kallar í callback fall með niðurstöðu þegar búið
• Ef við köllum í annað fall sem tekur langan tíma úr callback þurfum við annað callback o.s.fr. o.s.fr.

---

// snoozea í 5s, síðan 3s og að lokum 1s
setTimeout(() => {
  alert('Vakna!');
  setTimeout(() => {
    alert('Vakna núna!');
    setTimeout(() => {
      alert('VAKNA!!');
    }, 1000);
  }, 3000);
}, 5000);

---

• Getum búið til almennt fall snooze sem birtir skilaboð eftir ákveðinn tíma
• Getur aukalega tekið við callback falli sem keyrir í framhaldinu
• Verður aðeins læsilegra

---

function snooze(s, msg, callback) {
  setTimeout(() => {
    alert(msg);
    if (callback) {
      callback();
    }
  }, 1000 * s);
}

snooze(5, 'Vakna', () => {
  snooze(3, 'Vakna núna!', () => {
    snooze(1, 'VAKNA!!');
  });
});

---

• snooze dæmi

---

Promises

• Promise er hjúpun fyrir gildi sem mun verða til í framtíðinni
• Gerir asynchronous forritun auðveldari
• Öðruvísi hugtak en callbacks, vinnum með hjúpuð gildi í staðinn fyrir eitthvað sem við köllum í framhaldi

---

• Þegar við skilgreinum Promise köllum við í:
  • resolve með gildi þegar við höfum lokið aðgerð
  • reject með villu ef eitthvað fer úrskeiðis

---

• Þegar við vinnum með promise skilgreinum við
  • then callback til að vinna með gildið, fær skilagildi sem argument
  • catch callback til að vinna með villu, fær villu sem argument
• then og catch eru föll á Promise

---

• Getum sent promise gildi á milli og bætt við then og catch!
• Ef búið er að uppfylla en við köllum í seinna, þá fáum við svarið

---

const fifteen = Promise.resolve(15);
fifteen
  .then(v => console.log(`Got ${v}`));
// → Got 15
setTimeout(() => {
  fifteen
    .then((value) => {
      console.log('Sama svar, sekúndu seinna', value)
    });
}, 1000);

---

• promise dæmi

---

Villur

• Villumeðhöndlun með callbacks verður hratt mjög ólæsileg og flókin
• Eitt argument fyrir hvað gerist ef við fáum gildi, annað fyrir villu
• Blöndum saman villumeðhöndlun og lógík
• Mjög mikið inndreginn kóði, callback hell

---

snooze(5, 'Vakna', () => {
  if (ok) {
    snooze(3, 'Vakna núna!', () => {
      if (okok) {
        snooze(1, 'VAKNA!!');
      } else {
        // villa
      }
    });
  } else {
    // villa
  }
});

---

• catch eftir then í Promise sér um villur í öllum kóða sem á undan kemur
• Þurfum ekki að hafa villumeðhöndlun innan kóða sem sér um að bregðast við gildi

---

function futureMessage(msg) {
  return new Promise((resolve, reject) => {
    if (msg === 'foo') {
      reject(new Error('No foo!'));
    }

    setTimeout(() =>
      resolve(`${msg} from future`), 2000);
  });
}

futureMessage('Hi!')
  .then(msg => console.log(msg));
// "Hi! from future!" eftir 2 sek

---

futureMessage('foo')
  .then(msg => console.log(msg))
  .catch(e => console.log(e));
// "No foo!" strax

---

Stöður á promise

Promise getur verið í einni af þrem stöðum:

• pending, verið að bíða eftir gildi
• fulfilled, búið að uppfylla loforð með gildi
• rejected, búið að hafna loforði með villu

---

const p = futureMessage('hmm');
function foo(promise) {
  console.log(promise);

  promise.then(msg => console.log(msg));

  return 'Handling promise...';
}
foo(p);
// Promise { ... }
// "Handling promise..."
// "hmm from the future!" eftir 2 sek

---

function snooze(s, msg) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(msg);
    }, s * 1000);
  });
}

snooze(5, 'Vakna')
  .then(msg => alert(msg))
  .then(() => snooze(3, 'Vakna núna!'))
  .then(msg => alert(msg))
  .then(() => snooze(1, 'VAKNA!!!'))
  .then(msg => alert(msg));

---

• promise og villumeðhöndlun dæmi
• snooze dæmi með promises

---

Promise.all

• Promise.all tekur við fylki af Promise og skilar Promise
  • Ef eitthvert rejactarar er Promise rejectað
  • Niðurstaða er fylki með niðurstöðu í réttri röð m.v. uppruna

---

Promise.race

• Promise.race tekur við fylki af Promise og skilar Promise
  • Skilar niðurstöðu úr fyrsta Promise sem lýkur eða rejectar

---

const snoozefest = Promise.all([
  snooze(5, 'Vakna'),
  snooze(3, 'Vakna núna!'),
  snooze(1, 'VAKNA!!!'),
])
  .then(result => console.log(result));

console.log(snoozefest);
// Promise {pending}
// 5s seinna..
// ["Vakna", "Vakna núna!", "VAKNA!!!"]

---

// snooze eins og áður

Promise.race([
  snooze(5, 'Vakna'),
  snooze(3, 'Vakna núna!'),
  snooze(1, 'VAKNA!!!'),
])
  .then(result => console.log(result));

// 1s seinna..
// "VAKNA!!!"

---

• all og race dæmi

---

async og await

• async await er önnur leið til að vinna með async kóða
• Leyfir okkur að bíða eftir async aðgerð í línulegu flæði
• Merkjum föll sem þarf að bíða eftir með async
• Merkjum að við ætlum að bíða með await
• Grípum villur með try catch

---

// snooze fall eins og áður
async function snoozer() {
  alert(await snooze(5, 'Vakna'));
  alert(await snooze(3, 'Vakna núna'));
  alert(await snooze(1, 'VAKNA!!!'));
}

snoozer();

---

// futureMessage eins og áður
async function future() {
  try {
    const res = await futureMessage('foo');
    console.log(res);
  } catch (e) {
    console.log(e);
  }
}

future();

---

• Getum ekki notað await í global scope—verður að vera innan async falls
• async fallið skilar Promise!
  • async await er syntactic sugar fyrir Promise
  • Ættum að hafa catch á það fall til að vera örugg um að missa ekki af villum

---

async forritun

• Async forritun er erfið til að byrja með
• Lærum ekki á einum degi eða einni viku en margt af því sem við gerum á vefnum er async
• Sjáum dæmi í atburðum og ajax beiðnum
• Förum enn dýpra í vefforritun 2

---

• async await dæmi
• snooze dæmi með async await