Week 8

DAG studenten: Pushen naar Github VOOR vrijdag 23/4/2021 23:59 AVOND studenten: Pushen naar Github VOOR zondag 25/4/2021 23:59

Setup

Maak een folder Labo7 in jouw webontwikkeling folder aan. Maak daar een bestand aan dat noemt oefening1.tsen commit/push die file, en kijk na of je die ook op Github ziet staan!

Belangrijk: Na elk stukje code dat je schrijft, test je jouw code. Wanneer die werkt, commit je die code! Zo kan je altijd terugkeren naar een werkende versie, en kunnen wij ook jouw vooruitgang volgen.

Belangrijk: We werken met TypeScript. Type dus ook alle variabelen en functies

Belangrijk: Vergeet niet tsc --init en npm install @types/node te doen voor het project te initialiseren.

Oefening 1: Promises

Deze oefening maak je in bestand oefening1.ts.

const slowSum = (a: number, b: number) => {
    return new Promise<number>((resolve, reject) => {
        setTimeout(() => {
            resolve(a+b);
        },1000)
    });
}

const slowMult = (a: number, b: number) => {
    return new Promise<number>((resolve, reject) => {
        setTimeout(() => {
            resolve(a*b);
        },1500)
    });
}

Dit zijn 2 functies die een promise terug geven. Ze simuleren een trage som functie en een trage vermenigvuldigings functie.

  1. Roep de slowSum functie aan met de getallen 1 en 5 en zorg dat ze het resultaat van deze functie op het scherm laat zien. (zie output)

  2. Roep de slowSum functie opnieuw aan met de getallen 1 en 5 maar zorg deze keer dat na het optellen de vermenigvuldigings functie `slowMult wordt aangeroepen dat het resultaat vermenigvuldigd met 2 en dan op het scherm laat zien. (zie output)

  3. Maak een eigen slowDiv functie dat een deling doet (laat deze 2000 milliseconden duren). Zorg ervoor dat als je een deling door nul doet dat je de promise afkeurt met de melding "You cannot divide by zero".

  4. Roep deze functie aan met de getallen 6 en 3 en laat het resultaat op het scherm zien. (zie output)

  5. Roep deze functie aan met de getallen 6 en 0 en laat de error op het scherm zien. (zie output)

Verwachte output:

Gebruik .then(...) om iets uit te voeren nadat de promise klaar is.

Oefening 2: Promises en fetch

Deze oefening maak je in bestand oefening2.ts.

Installeer de dependency node-fetch:

Maak gebruik van Promise.all om de drie volgende cocktails via de cocktail api met de volgende ids in te lezen: 11000, 11001, 11002 en vervolgens de naam van de drie cocktails op het scherm te laten zien.

Je kan een cocktail via een id via de volgende api call binnenhalen:

Verwachte output:

Oefening 3: Async/await

Deze oefening maak je in bestand oefening3.ts.

Gebruik de bovenstaande API call om alle moppen op het scherm te laten zien waar het woord 'dog' in voor komt. Je begint op de eerste pagina, en dan laad je de volgende in, en dan de volgende,... tot er geen moppen meer zijn.

Opgelet: In dit labo is het verplicht om de async/await werkwijze te gebruiken.

Verwachte output:

Push en commit jouw folder naar Github

PreviousHerhalingsoefeningenNextWeek 9

Last updated

Was this helpful?