NESTED CALLBACK

ARROW FUNCTIONS

function sum(a, b) {
    return a + b;
}
const sum = (a, b) => a + b;

=

const someFunction = (arg1, callback) => {
    // ... some code 
    console.log('someFunction', arg1);
    callback('A');
};

const secondFunction = (arg1, arg2, secondCallback) => {
    console.log('secondFunction', arg1, arg2);
    secondCallback();
};

const anotherFunction = (anotherCallback) => {
    console.log('anotherFunction');
    anotherCallback();
};


someFunction('abc', (resultSomeFunction) => {
    secondFunction(resultSomeFunction, 'B', () => {
        anotherFunction(() => {
            console.log('anotherCallback call');
        });
    });
});

TIME TO DEBUG!

CALLBACK HELL!

THE PYRAMID OF DOOM

PROMISE

PROMISE

Klasa pozwalająca na tworzenie OBIEKTÓW reprezentujących wartość lub niepowodzenie operacji asynchronicznych.

Promise reprezentuje operację która jeszcze się nie zakończyła, ale oczekuje się jej w przyszłości.

CALLBACKS VS PROMISES

  • Callback jest funkcją, promise jest obiektem
  • Callback przyjmuje parametry, promise jedynie zwraca wartość
  • Callback obsługuje sukces oraz błąd, promise nie obsługuje nic a jedynie przekazuje dalej wartości
  • Callback możemy wywołać wiele razy, promise jest wywoływany tylko raz

PROMISE STATES

  • pending
  • fulfilled
  • rejected

CREATE PROMISE

const myPromise = new Promise(/* executor */ (resolve, reject) => {
    if (/* some logic */) {
        resolve('all works fine');
    } else {
        reject('error');
    }
});

.then(onFulfilled, onRejected)

myPromise.then(
    result => { /* handle a succcessful result */ },
    error => { /* handle an error */ }
);
const myPromise = new Promise((resolve, reject) => {
    if (/* some logic */) {
        resolve('all works fine');
    } else {
        reject('error');
    }
});
myPromise.then(
    result => {
        console.log(result);
    },
    error => {
        console.log(error);
    }
);

.catch(onRejected)

myPromise
    .then(result => { /* ... */ })
    .then(result => { /* ... */ })
    .catch(error => { /* handle an error */ });
const myPromise = new Promise((resolve, reject) => {
    if (/* some logic */) {
        resolve('all works fine');
    } else {
        reject('error');
    }
});
myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error);
    });

.finally(onFinally)

myPromise
    .then(result => { /* ... */ })
    .then(result => { /* ... */ })
    .catch(error => { /* handle an error */ })
    .finally(() => { /* do something at the end ... */ });

Promise.all( [ ... ] )

const promise1 = new Promise((resolve, reject) => {
    // ...
    resolve('abc');
});


const promise2 = new Promise((resolve, reject) => {
    // ...
    resolve('xyz');
});


Promise.all([promise1, promise2]);

Promise.race( [ ... ] )

const promise1 = new Promise((resolve, reject) => {
    // ...
    setTimeout(() => resolve('abc'), 1000);
});


const promise2 = new Promise((resolve, reject) => {
    // ...
    setTimeout(() => resolve('xyz'), 500);
});


Promise.race([promise1, promise2]);

Promise.resolve( ... )

Promise.resolve(/* some object/string/etc... */);


Promise
    .resolve('resolved promise')
    .then(
        answer => console.log(answer)
    )
    .catch(
        error => console.log('enter here ?', error)
    );

Promise.reject( ... )

Promise.reject(/* some object/string/etc... */);


Promise
    .reject('some error!!!')
    .then(
        answer => console.log('enter here ?', answer)
    )
    .catch(
        error => console.log(error)
    );

ERROR HANDLING

try ... catch

try {
	// code...
} catch (error) {
	// error handling
}

try ... catch

  • try..catch działa tylko w przypadku błędów w czasie wykonywania
  • try..catch działa synchronicznie
  • try..catch zmienne zadeklarowane są lokalne
  • return & finally - finally wykona się zawsze nawet jak w bloku wystąpi return

try ... catch ... finally

try {
	// code...
} catch (error) {
	// error handling
} finally {
	// some code ...
}

Error types

  • Error - bazowa klasa błędu
  • EvalError - błąd w funkcji eval()
  • RangeError - wartość z poza zakresu
  • ReferenceError - bład referencji do obiektu
  • SyntaxError - błąd składniowy
  • TypeError - bład typu
  • URIError - błąd w funkcji encodeURI()

Error Object

  • name - nazwa błędu
  • message - wiadomość błędu
  • stack - stack w którym pojawił się błąd

EvalError

EvalError => SyntaxError

RangeError

const someNumber = 5;
someNumber.toPrecision(500); // this throw RangeError

ReferenceError

const a = 5;
const result = a + b; // this throw ReferenceError

SyntaxError

JSON.parse('crush JSON!'); // this throw SyntaxError
eval('const abc = "some broken string'); // this throw SyntaxError

TypeError

const someNumber = 5;
someNumber.toUpperCase(); // this throw TypeError

URIError

decodeURI('%%%'); // this throw URIError

Throw exception

// throw <error>;

throw 123;

throw "some error string";

throw new Error('some error');

instanceof

const someError = new SyntaxError('abc');

console.log(someError instanceof ReferenceError); // false

console.log(someError instanceof SyntaxError); // true

console.log(someError instanceof Error); // true

PROMISE

async/await

async

async function someFunc() {
    return ...; // some function body
}
 const arrowFunc = async () => ... // some function body
function multi(a, b) {
    return new Promise((resolve, reject) => {
        resolve(a * b);
    });
}
async function multi(a, b) {
    return a * b;
}
function multi(a, b) {
    return new Promise((resolve, reject) => {
        reject(new Error('some error'));
        resolve(a * b);
    });
}
async function multi(a, b) {
    throw new Error('some error');
    return a * b;
}
async function multi(a, b) {
    return a + b;
}

multi(4, 5)
    .then(result => {
        console.log(result);
    });

await

const someVar = await <promise>;


const someVar = await Promise.resolve('abc');


const axios = require('axios');
const user = await axios('https://.../users/1');
const axios = require('axios');

axios('https://jsonplaceholder.typicode.com/users/2')
    .then((response) => {
        console.log(response.data.name);
    });
const axios = require('axios');

(async function() {
    const response = await axios('https://jsonplaceholder.typicode.com/users/2');
    console.log(response.data.name);
})();

async/await

  • async tworzy nam funkcję opakowaną w Promise
  • await działa jedynie wewnątrz funkcji async
  • await nie można stosować w funkcji synchronicznej
  • await nie działa w kodzie najwyższego poziomu

Error handling in Promise

async function someFunc() {
    await Promise.reject(new Error('error'));
}
async function someFunc() {
    throw new Error('error');
}
const axios = require('axios');

axios('https://jsonplaceholder.typicode.com/users/2')
    .then((response) => {
        console.log(response.data.name);
    })
    .catch(error => {
        console.log(error)
    });
const axios = require('axios');

(async function () {
    try {
        const response = await axios('https://jsonplaceholder.typicode.com/users/2');
        console.log(response.data.name);
    } catch (error) {
        console.log(error);
    }
})();

callback-and-promise

By Piotr Tarasiuk

Made with Slides.com

callback-and-promise

  • 323

More from Piotr Tarasiuk