Programación asíncrona en JavaScript

Sergio Daniel Xalambrí

@sergiodxa

Callbacks

import { EventEmitter } from 'events';

const emitter = new EventEmitter();

emitter.on('message', data => {
    console.log(data);
});

emitter.emit('message', 'hola mundo');

Node.js Callbacks

import { readFile } from 'fs';

readFile('file.txt', 'utf8', (error, data) => {
    if (error) {
        return console.error(error);
    }

    console.log(data);
});

Callbacks Hell

import { readFile } from 'fs';


readFile('file.txt', 'utf8', (error, data) => {
    if (error) return console.error(error);

    readfile('file2.txt', 'utf8', (error2, data2) => {
        if (error2) return console.error(error2);

        readFile('file3.txt', 'utf8', (error3, data3) => {
            if (error3) return console.error(error3);

            readFile('file4.txt', 'utf8', (error4, data4) => {
                if (error4) return console.error(error4);

                console.log(data1, data2, data3, data4);
            });
        });
    });
});

Promises

import 'isomorphic-fetch';

const request = fetch('/api/v1/resources/', { method: 'GET' })

request
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error(error);
    });

Crear una promesas

import fs from 'fs';

function readFile(file, format) {
    return new Promise((resolve, reject) => {
        fs.readFile(file, format, (error, data) => {
            if (error) return reject(error);
            return resolve(data);
        });
    });
}

readFile('file.txt', 'utf8')
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

Promesas anidadas

import 'isomorphic-fetch';

const request = fetch('/api/v1/resources', { method: 'GET' })
    .then(response => response.json())
    .then(json => {
        console.log(json);
    });
    .catch(error => {
        console.error(error);
    });

Clase Promise

// Promesa completada
Promise.resolve(data)
    .then(data => console.log(data));

// Promesa rechazada
Promise.reject(error)
    .catch(error => console.error(error));

// Carrera de promesas
Promise.race([fetch('/api/v1/resources/'), fetch('/api/v2/resources/')])
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.error(error):

// Multiples promesas
Promise.all([fetch('/api/v1/resources/'), fetch('/api/v2/resources/')])
    .then(([response1, response2]) => {
        return Promise.all([response1.json(), response2.json()])
    })
    .then(([json1, json2]) => console.log(json1, json2)
    .catch(error => console.error(error)):

Generators

function* fizzBuzz () {
    let i = 0;
    while (i <= 100) {
        i++;
        let response = '';
    
        if (i % 3 === 0) response += 'Fizz';
        if (i % 5 === 0) response += 'Buzz';
    
        if (response === '') yield i;
        else yield response;
    }
}

for (let numer of fizzBuzz()) {
    console.log(numer);
}

Gen + Promises

import 'isomorphic-fetch';

function* getData() {
    try {
        const data1 = yield fetch('/api/v1/resources');
        const data2 = yield fetch(data1.url);
        return `${data2.text}!`;
    } catch (error) {
        throw Promise.reject(error);
    }
}

const dataGen = getData();

dataGen.next().value
    .then(response => response.json())
    .then(json => dataGet.next(json).value)
    .then(response => response.json())
    .then(json => Promise.resolve(dataGen.next(json).value))
    .then(data => console.log(data);
    .catch(error => console.error(error));

Async/Await

import 'isomorphic-fetch';

async function getData() {
    try {
        const response1 = await fetch('/api/v1/resources/');
        const data1 = await response1.json();

        const response2 = await fetch(data1.url);
        const data2 = await response2.json();

        return `${data2.text}!`;
    } catch (error) {
        throw error;
    }
}

getData()
    .then(text => console.log(text))
    .catch(error => console.error(error));

Programación asíncrona en JavaScript

By Sergio Xalambrí

Programación asíncrona en JavaScript

Un repaso sobre programación asíncrona en JavaScript. De Callbacks a Async/Await

  • 2,100