kingsubin

• Promise is a JavaScript object for asynchronous operation
• state: pending -> fulfilled or rejected
• Producer vs Consumer

 

1. Producer

• when new Promise is created, the executor runs automatically

const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    console.log('doing something....');
    setTimeout(() => {
        // resolve('ellie');
        reject(new Error('no network'));
    }, 2000);
});

 

 

2. Consumers: then, catch, finally

promise
    .then(value => {
        console.log(value);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => console.log('finally')
    });

 

 

3. Promise chaning

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
    .then(num => num * 2)
    .then(num => num * 3)
    .then(num => {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(num - 1), 1000);	
        });
    })
    .then(num => console.log(num)); // 5

 

 

4. Error Handling

const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('HEN'), 1000);
    });
const getEgg = hen =>
    new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error(`error! ${hen} => EGG`)), 1000);
    });
const cook = egg =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve((`${egg} => COOK`), 1000));
    });

getHen()
    .then(getEgg)
    .then(cook)
    .then(console.log)
    .catch(console.log);
// error! HEN => EGG

 

 

5. Callback Promise

class UserStorage {
    loginUser(id, password) {
        return new Promise ((resolve, reject) => {
            setTimeout(() => {
                if (
                    (id === 'ellie' && password === 'dream') ||
                    (id === 'coder' && password === 'academy')
                ) {
                    resolve(id);
                } else {
                    reject(new Error('not found'));
                }
            }, 2000);	
        });
    }
	
    getRoles(user) {
        return new Promise ((resolve, reject) => {
            setTimeout(() => {
                if (user === 'ellie') {
                    resolve({ name: 'ellie', role: 'admin' });
                } else {
                    reject(new Error('no access'));
                }
            }, 1000); 
        });
    }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

userStorage
    .loginUser(id, password)
    .then(userStorage.getRoles)
    .then(user => alert(`Hello ${user.name}, you have a ${user.role} roles`))
    .catch(console.log);

 

 

 

 

---

※출처

www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w